/* Atlas: secciones visuales e interactivas (cadenas globales de valor).
   Usa los colores y fuentes de styles.css; solo agrega lo propio de estas páginas. */

.ax { --ax-dis: #a78bfa; --ax-eda: #60a5fa; --ax-mat: #e8c97a; --ax-eq: #fb923c; --ax-fab: #4ade9a; --ax-mad: #2dd4bf; --ax-osat: #f472b6; --ax-fin: #e8edf5; --ax-rojo: #ff6b6b; overflow-x: clip; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ax-wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.ax-sec { padding: clamp(4rem, 10vw, 8rem) 0; position: relative; scroll-margin-top: 60px; }
.ax-sec.alt { background: linear-gradient(180deg, #0d1015 0%, #0b0e12 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ax-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.ax-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 5.4vw, 3.8rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 16ch; }
.ax-h2 em { font-style: italic; color: var(--accent); }
.ax-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--text-muted); max-width: 60ch; margin-top: 1.1rem; }
.ax-centro { text-align: center; }
.ax-centro .ax-h2, .ax-centro .ax-lead { margin-left: auto; margin-right: auto; }
.ax-nota { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-subtle); margin-top: 1rem; line-height: 1.6; }
.ax-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); font-family: var(--font-body); font-size: 0.88rem; cursor: pointer; transition: all var(--transition); text-decoration: none; }
.ax-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.18); }
.ax-btn.on, .ax-btn[aria-pressed="true"] { background: var(--accent-dim); border-color: rgba(74,222,154,0.35); color: var(--accent); }
.ax-btn.primario { background: var(--accent); color: #07110c; border-color: var(--accent); font-weight: 500; }
.ax-btn.primario:hover { filter: brightness(1.08); color: #07110c; }
.ax-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ax-pais { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; padding: 0.22rem 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.05); color: var(--text); }
.ax-pais i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ---- Portada de un capítulo ---- */
.ax-hero { min-height: calc(92vh - 64px); display: flex; flex-direction: column; justify-content: center; padding: 4rem 0 3rem; text-align: center; position: relative; }
.ax-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 35%, rgba(74,222,154,0.10), transparent 70%); pointer-events: none; }
.ax-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 11vw, 7.5rem); line-height: 0.98; letter-spacing: -0.03em; }
.ax-hero h1 em { font-style: italic; color: var(--accent); }
.ax-hero .ax-lead { margin: 1.4rem auto 0; font-size: clamp(1.1rem, 2vw, 1.4rem); }
.ax-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 940px; margin: 3.5rem auto 0; }
.ax-stat { padding: 1.1rem 0.75rem; border-top: 1px solid var(--border); text-align: left; }
.ax-stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--text); line-height: 1.1; }
.ax-stat span { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 0.35rem; line-height: 1.45; }
.ax-scroll { margin-top: 3rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); }
.ax-scroll::after { content: ''; display: block; width: 1px; height: 38px; margin: 0.8rem auto 0; background: linear-gradient(var(--accent), transparent); animation: ax-baja 2s ease-in-out infinite; }
@keyframes ax-baja { 0%,100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---- Indice de capítulo (saltos) ---- */
.ax-indice { position: sticky; top: 64px; z-index: 50; background: rgba(10,12,15,0.82); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--border); }
.ax-indice ul { list-style: none; display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; max-width: 1120px; margin: 0 auto; padding: 0.5rem 1.5rem; }
.ax-indice ul::-webkit-scrollbar { display: none; }
.ax-indice a { display: block; white-space: nowrap; font-size: 0.8rem; padding: 0.35rem 0.75rem; border-radius: 999px; color: var(--text-muted); text-decoration: none; transition: all var(--transition); }
.ax-indice a:hover { color: var(--text); }
.ax-indice a.on { background: rgba(255,255,255,0.08); color: var(--text); }
.ax-progreso { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--accent); width: 0; }

/* ---- El viaje (globo fijo + pasos) ---- */
.ax-viaje-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2rem; }
.ax-escena { order: 2; position: sticky; top: 112px; height: calc(100vh - 128px); display: flex; align-items: center; justify-content: center; }
.ax-globo { position: relative; width: 100%; height: 100%; max-height: 640px; }
.ax-globo canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.ax-globo-hint { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-subtle); letter-spacing: 0.06em; pointer-events: none; white-space: nowrap; }
.ax-tip { position: absolute; z-index: 5; max-width: 250px; padding: 0.75rem 0.9rem; background: rgba(17,20,26,0.96); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; font-size: 0.84rem; line-height: 1.5; color: var(--text-muted); box-shadow: 0 12px 40px rgba(0,0,0,0.45); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.ax-tip.on { opacity: 1; transform: none; }
.ax-tip b { display: block; color: var(--text); font-size: 0.92rem; margin-bottom: 0.2rem; }
.ax-bandera-ar { display: inline-block; position: relative; width: 20px; height: 13px; margin-left: 4px; vertical-align: -1px; border-radius: 2px; background: linear-gradient(#74acdf 0 33.4%, #fff 33.4% 66.6%, #74acdf 66.6%); box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
.ax-bandera-ar::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #f6b40e; }
.ax-pasos { list-style: none; padding: 0; margin: 0; }
.ax-paso-movil, .ax-paso-ctl { display: none; }
.ax-paso { min-height: 88vh; display: flex; align-items: center; padding: 2rem 0; }
.ax-paso:first-child { min-height: 70vh; }
.ax-paso-card { background: rgba(17,20,26,0.9); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem 1.6rem 1.4rem; opacity: 0.35; transition: opacity .5s, border-color .5s, transform .5s; transform: scale(0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ax-paso.on .ax-paso-card { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--c, #4ade9a) 40%, transparent); }
.ax-paso-num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c, var(--accent)); }
.ax-paso h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.12; margin: 0.5rem 0 0.7rem; }
.ax-paso p { color: var(--text-read, #a8b2c4); line-height: 1.7; font-size: 1rem; }
.ax-barras { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 0.55rem; }
.ax-barras li { display: grid; grid-template-columns: 7.5rem 1fr 3.6rem; align-items: center; gap: 0.6rem; font-size: 0.84rem; }
.ax-barras .b { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06); overflow: hidden; }
.ax-barras .b i { display: block; height: 100%; width: 0; background: var(--c, var(--accent)); border-radius: 3px; transition: width 1s cubic-bezier(.16,1,.3,1); }
.ax-paso.on .ax-barras .b i { width: var(--w); }
.ax-barras em { font-style: normal; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text); text-align: right; }

/* ---- Rutas comerciales ---- */
.ax-rutas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; margin-top: 3rem; }
.ax-rutas .ax-globo { aspect-ratio: 1; height: auto; max-height: none; }
.ax-flujos { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.3rem; }
.ax-flujos button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.6rem; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 0.5rem 0.65rem; color: var(--text); cursor: pointer; font: inherit; transition: background var(--transition), border-color var(--transition); }
.ax-flujos button:hover, .ax-flujos button.on { background: rgba(255,255,255,0.04); border-color: var(--border); }
.ax-flujos .r { font-size: 0.88rem; }
.ax-flujos .v { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); }
.ax-flujos .b { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.05); }
.ax-flujos .b i { display: block; height: 100%; border-radius: 2px; background: var(--c); }
.ax-flujo-det { min-height: 4.5em; margin-top: 1rem; font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); }

/* ---- Zoom de escala ---- */
.ax-zoom { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.ax-zoom-vis { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; margin: 0 auto; }
.ax-zoom-vis svg { width: 100%; height: 100%; display: block; }
.ax-zoom-nombre { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; }
.ax-zoom-medida { font-family: var(--font-mono); color: var(--accent); font-size: 1.05rem; margin-top: 0.4rem; }
.ax-zoom-txt { color: var(--text-muted); line-height: 1.65; margin-top: 0.9rem; min-height: 5em; }
.ax-rango { width: 100%; margin-top: 1.5rem; accent-color: var(--accent); height: 28px; }
.ax-rango-et { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-subtle); }

/* ---- Proceso paso a paso ---- */
.ax-proc-tabs { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; margin: 2.5rem 0 1.5rem; padding-bottom: 2px; }
.ax-proc-tabs::-webkit-scrollbar { display: none; }
.ax-proc-tabs button { flex: 0 0 auto; }
.ax-proc-tabs b { font-family: var(--font-mono); font-weight: 400; opacity: 0.6; }
.ax-proc { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2.5rem); }
.ax-proc-vis svg { width: 100%; height: auto; display: block; max-width: 380px; margin: 0 auto; }
.ax-proc-vis [data-s] { opacity: 0; transition: opacity .5s; }
.ax-proc-vis [data-s].on { opacity: 1; }
.ax-proc h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.ax-proc p { color: var(--text-read, #a8b2c4); line-height: 1.7; margin-top: 0.8rem; }
.ax-proc-dato { margin-top: 1rem; padding: 0.8rem 1rem; border-left: 2px solid var(--accent); background: var(--accent-dim); border-radius: 0 10px 10px 0; font-size: 0.92rem; color: var(--text); line-height: 1.55; }
.ax-proc-donde { margin-top: 1rem; }
.ax-proc-donde small { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 0.45rem; }
.ax-proc-nav { display: flex; gap: 0.5rem; margin-top: 1.3rem; }

/* ---- Máquina EUV ---- */
.ax-euv-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
.ax-euv-datos div { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; }
.ax-euv-datos b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; line-height: 1.1; color: var(--text); }
.ax-euv-datos span { font-size: 0.84rem; color: var(--text-muted); line-height: 1.45; display: block; margin-top: 0.35rem; }
.ax-sankey { margin-top: 2.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.2rem; }
.ax-sankey svg { display: block; width: 100%; }
/* Alto reservado para lo que se dibuja con JS: así los saltos del índice no caen corridos */
#sankey { min-height: 426px; }
#sonrisa { min-height: 360px; }
#cadena { min-height: 390px; }
#flujos { min-height: 600px; }
.ax-quiz { min-height: 330px; }
@media (max-width: 639px) { #sankey { min-height: 564px; } #sonrisa { min-height: 300px; } }
.ax-sankey .nodo { cursor: pointer; }
.ax-sankey text { font-family: var(--font-body); fill: var(--text); pointer-events: none; }
.ax-sankey .col { font-family: var(--font-mono); fill: var(--text-subtle); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.ax-sankey path.cinta { transition: opacity .3s; }
.ax-sankey-det { margin-top: 0.9rem; padding: 0.9rem 1rem; border-radius: 12px; background: rgba(255,255,255,0.03); font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); min-height: 4.2em; }
.ax-sankey-det b { color: var(--text); }

/* ---- Curva de la sonrisa ---- */
.ax-sonrisa { margin-top: 2.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.2rem 1.2rem 1rem; }
.ax-sonrisa-ctl { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.ax-sonrisa svg { display: block; width: 100%; overflow: visible; }
.ax-sonrisa text { font-family: var(--font-body); }
.ax-sonrisa .pt { cursor: pointer; }
.ax-sonrisa-det { margin-top: 0.6rem; padding: 0.9rem 1rem; border-radius: 12px; background: rgba(255,255,255,0.03); font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); min-height: 5.5em; }
.ax-sonrisa-det b { color: var(--text); }
.ax-sonrisa-det a { color: var(--accent); }

/* ---- Apagá un país ---- */
.ax-sim { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem; align-items: start; }
.ax-sim-paises { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.ax-sim-paises button { justify-content: flex-start; padding: 0.75rem 0.9rem; border-radius: 12px; }
.ax-sim-paises button.on { background: rgba(255,107,107,0.12); border-color: rgba(255,107,107,0.45); color: #ffb4b4; }
.ax-cadena { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.ax-cadena li { display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); transition: background .4s, border-color .4s; }
.ax-cadena .n { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-subtle); }
.ax-cadena .e { font-size: 0.92rem; }
.ax-cadena .e small { display: block; font-size: 0.76rem; color: var(--text-subtle); margin-top: 0.1rem; }
.ax-cadena .s { font-family: var(--font-mono); font-size: 0.72rem; padding: 0.2rem 0.5rem; border-radius: 999px; background: rgba(255,255,255,0.05); color: var(--text-muted); white-space: nowrap; }
.ax-cadena li[data-n="3"] { background: rgba(255,107,107,0.14); border-color: rgba(255,107,107,0.5); }
.ax-cadena li[data-n="3"] .s { background: var(--ax-rojo); color: #1a0606; }
.ax-cadena li[data-n="2"] { background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.4); }
.ax-cadena li[data-n="2"] .s { background: rgba(251,146,60,0.25); color: #fdba74; }
.ax-cadena li[data-n="1"] .s { color: var(--text); }
.ax-sim-res { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(255,107,107,0.06); border: 1px solid rgba(255,107,107,0.25); line-height: 1.6; color: var(--text-muted); font-size: 0.94rem; }
.ax-sim-res b { color: var(--text); }
.ax-sim-res .big { display: block; font-family: var(--font-display); font-size: 1.6rem; color: #ffb4b4; margin-bottom: 0.2rem; }

/* ---- Celular por dentro ---- */
.ax-cel { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 2.5rem; align-items: center; }
.ax-cel-vis svg { width: 100%; max-width: 280px; display: block; margin: 0 auto; }
.ax-cel-vis .hs { cursor: pointer; }
.ax-cel-vis .hs circle.p { transition: r .2s; }
.ax-piezas { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.ax-piezas button { width: 100%; text-align: left; display: grid; grid-template-columns: 1.8rem 1fr auto; gap: 0.6rem; align-items: center; padding: 0.65rem 0.8rem; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font: inherit; cursor: pointer; transition: all var(--transition); }
.ax-piezas button.on { border-color: rgba(74,222,154,0.45); background: rgba(74,222,154,0.06); }
.ax-piezas .k { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.07); font-family: var(--font-mono); font-size: 0.72rem; }
.ax-piezas button.on .k { background: var(--accent); color: #07110c; }
.ax-piezas .c { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }
.ax-pieza-det { margin-top: 0.8rem; padding: 0.9rem 1rem; border-radius: 12px; background: rgba(255,255,255,0.03); font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); min-height: 5em; }
.ax-pieza-det b { color: var(--text); }
.ax-valor { margin-top: 2.5rem; }
.ax-valor-bar { display: flex; height: 44px; border-radius: 12px; overflow: hidden; margin-top: 0.8rem; }
.ax-valor-bar div { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.76rem; color: #0a0c0f; font-weight: 500; white-space: nowrap; overflow: hidden; }
.ax-valor-ley { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.7rem; font-size: 0.84rem; color: var(--text-muted); }
.ax-valor-ley i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 0.35rem; vertical-align: 0; }
.ax-precio { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2rem; }
.ax-precio div { padding: 1.2rem; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border); }
.ax-precio b { font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; display: block; line-height: 1.1; }
.ax-precio span { color: var(--text-muted); font-size: 0.86rem; line-height: 1.5; display: block; margin-top: 0.3rem; }

/* ---- Tarjetas (Latam, capítulos) ---- */
.ax-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.ax-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; }
.ax-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin: 0.4rem 0 0.6rem; }
.ax-card p { color: var(--text-read, #a8b2c4); line-height: 1.65; font-size: 0.95rem; }
.ax-card .tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }

/* ---- Quiz ---- */
.ax-quiz { max-width: 640px; margin: 2.5rem auto 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); text-align: left; }
.ax-quiz-q { font-size: 1.15rem; line-height: 1.45; margin: 0.4rem 0 1rem; }
.ax-quiz-op { display: grid; gap: 0.5rem; }
.ax-quiz-op button { text-align: left; padding: 0.8rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; cursor: pointer; transition: all var(--transition); }
.ax-quiz-op button:hover:not(:disabled) { border-color: rgba(255,255,255,0.2); }
.ax-quiz-op button.ok { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.ax-quiz-op button.mal { border-color: rgba(255,107,107,0.5); background: rgba(255,107,107,0.08); color: #ffb4b4; }
.ax-quiz-exp { margin-top: 0.9rem; font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); min-height: 1.6em; }
.ax-quiz-pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.1rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-subtle); }

/* ---- Cierre y enlaces ---- */
.ax-sigue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.ax-sigue a { display: block; padding: 1.4rem; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); text-decoration: none; color: var(--text); transition: all var(--transition); }
.ax-sigue a:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.ax-sigue small { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }
.ax-sigue b { display: block; font-weight: 500; font-size: 1.05rem; line-height: 1.35; }
.ax-sigue span { display: block; color: var(--text-muted); font-size: 0.88rem; margin-top: 0.4rem; line-height: 1.5; }
.ax-tickers { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.5rem; }
.ax-tickers a { font-family: var(--font-mono); font-size: 0.82rem; }
.ax-fuentes { font-size: 0.82rem; color: var(--text-subtle); line-height: 1.7; }
.ax-fuentes h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--text); margin-bottom: 0.8rem; }
.ax-fuentes ul { padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.ax-fuentes a { color: var(--text-muted); }
.ax-datos-tabla { margin-top: 0.8rem; }
.ax-datos-tabla summary { cursor: pointer; font-size: 0.85rem; color: var(--text-muted); }
.ax-datos-tabla table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.84rem; }
.ax-datos-tabla th, .ax-datos-tabla td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.ax-datos-tabla th { color: var(--text); font-weight: 500; }

/* ---- Portada del Atlas ---- */
.ax-portada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; min-height: calc(88vh - 64px); padding: 3rem 1.5rem; }
.ax-portada h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.6rem, 12vw, 8rem); line-height: 0.95; letter-spacing: -0.03em; }
.ax-portada h1 em { color: var(--accent); }
.ax-portada .ax-globo { aspect-ratio: 1; height: auto; max-height: none; }
.ax-portada-cta { margin-top: 1.6rem; }
.ax-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.5rem; }
.ax-cap { position: relative; display: flex; flex-direction: column; min-height: 360px; padding: 1.6rem; border-radius: 24px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); text-decoration: none; color: var(--text); transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s; isolation: isolate; }
a.ax-cap:hover { transform: translateY(-4px); border-color: rgba(74,222,154,0.35); box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.ax-cap .num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subtle); }
.ax-cap h2 { font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; line-height: 1.05; margin-top: auto; }
.ax-cap p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; margin-top: 0.6rem; }
.ax-cap .ir { margin-top: 1.1rem; font-size: 0.88rem; color: var(--accent); }
.ax-cap .arte { position: absolute; inset: 0; z-index: -1; opacity: 0.9; }
.ax-cap .arte svg { width: 100%; height: 100%; }
.ax-cap.pronto { opacity: 0.75; }
.ax-cap.pronto .ir { color: var(--text-subtle); }
.ax-como { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.ax-como div { padding: 1.2rem 0; border-top: 1px solid var(--border); }
.ax-como b { display: block; font-size: 1rem; margin-bottom: 0.35rem; }
.ax-como span { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }

/* ---- Celular ---- */
@media (max-width: 899px) {
  .ax-wrap { padding: 0 1rem; }
  .ax-viaje-grid { display: block; }
  .ax-paso-card { padding: 1.25rem 1.2rem 1.1rem; background: #11141a; opacity: 1; transform: none; }
  .ax-paso { min-height: 0; padding: 0.6rem 0; }
  /* Con JS: nada de scroll "secuestrado". El globo y la tarjeta van en el flujo normal
     y las paradas se pasan con botones o deslizando la tarjeta. */
  .js-movil .ax-escena { position: relative; top: auto; height: auto; display: block; margin-top: 1.5rem; }
  .js-movil .ax-globo { height: min(54vh, 400px); min-height: 280px; }
  .js-movil .ax-paso-movil { display: block; width: 100%; margin-top: 0.5rem; touch-action: pan-y; }
  .js-movil .ax-paso-movil .ax-paso { min-height: 0; padding: 0; display: block; }
  .js-movil .ax-paso-movil .ax-paso-card { padding: 1rem 1.1rem 0.95rem; min-height: 17.5rem; }
  .js-movil .ax-paso-movil h3 { font-size: 1.32rem; margin: 0.35rem 0 0.45rem; }
  .js-movil .ax-paso-movil p { font-size: 0.92rem; line-height: 1.58; }
  .js-movil .ax-paso-movil .ax-barras { margin-top: 0.7rem; gap: 0.4rem; }
  .js-movil .ax-pasos { display: none; }
  .js-movil .ax-paso-ctl { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; }
  .ax-puntos { display: flex; gap: 6px; }
  .ax-puntos i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.15); transition: background .3s, transform .3s; }
  .ax-puntos i.on { background: var(--accent); transform: scale(1.3); }
  .ax-barras li { grid-template-columns: 6.4rem 1fr 3.2rem; font-size: 0.8rem; }
  .ax-rutas, .ax-zoom, .ax-proc, .ax-sim, .ax-cel, .ax-portada { grid-template-columns: minmax(0, 1fr); }
  .ax-rutas { gap: 1rem; }
  .ax-rutas .ax-globo { max-width: 420px; margin: 0 auto; width: 100%; }
  .ax-proc { gap: 1.25rem; }
  .ax-proc-vis svg { max-width: 240px; }
  .ax-hero-stats, .ax-euv-datos { grid-template-columns: repeat(2, 1fr); }
  .ax-cards, .ax-sigue, .ax-caps, .ax-como { grid-template-columns: minmax(0, 1fr); }
  .ax-cap { min-height: 260px; }
  .ax-portada { min-height: 0; padding: 2rem 1rem 1rem; text-align: center; }
  .ax-portada .ax-lead { margin-left: auto; margin-right: auto; }
  .ax-portada-cta { justify-content: center; }
  .ax-portada .ax-globo { max-width: 380px; margin: 0 auto; width: 100%; }
  .ax-cel-vis svg { max-width: 200px; }
  .ax-precio b { font-size: 1.7rem; }
}
@media (max-width: 420px) {
  .ax-sim-paises { grid-template-columns: repeat(2, 1fr); }
  .ax-cadena li { padding: 0.6rem 0.7rem; gap: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gx .gx-sil .obj .shape { transform: none; transition: none; }
  .ax-scroll::after { animation: none; }
  .ax-paso-card, .ax-barras .b i { transition: none; }
}

/* =====================================================================
   Capítulo GNL (prefijo gx-)
   ===================================================================== */
.gx { --gx-gas: #fb923c; --gx-liq: #22d3ee; --gx-ruta: #60a5fa; }
.gx .ax-hero::before { background: radial-gradient(60% 50% at 50% 35%, rgba(34,211,238,0.10), transparent 70%); }

/* Enfriar el gas */
.gx-frio-vis { position: relative; aspect-ratio: 1; max-width: 400px; width: 100%; margin: 0 auto; }
.gx-frio-vis svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gx-frio-vis .bola { transform-box: fill-box; transform-origin: center; transition: transform 1s cubic-bezier(.16,1,.3,1), fill .6s, stroke .6s; }
.gx-temp { font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: 1; }
.gx-estado { display: inline-block; margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(251,146,60,0.14); color: var(--gx-gas); transition: all .4s; }
.gx-estado.liq { background: rgba(34,211,238,0.14); color: var(--gx-liq); }

/* Siluetas a escala */
.gx-sil { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 2.5rem; align-items: end; }
.gx-sil-svg { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1rem 0.6rem; }
.gx-sil svg { width: 100%; height: min(64vh, 600px); display: block; overflow: visible; }
.gx-sil .obj { cursor: pointer; outline: none; }
.gx-sil .obj .shape { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1.1s cubic-bezier(.16,1,.3,1), opacity .3s; }
.gx-sil.go .obj .shape { transform: none; }
.gx-sil .obj text { transition: opacity .3s; }
.gx-sil .obj.dim .shape { opacity: 0.6; }
.gx-sil .obj.dim text { opacity: 0.7; }
.gx-sil .obj:focus-visible .shape { opacity: 1; }
.gx-sil-num { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 4.6rem); line-height: 1; }
.gx-sil-cap { font-size: 1.1rem; margin-top: 0.5rem; line-height: 1.35; }
.gx-sil-txt { color: var(--text-muted); line-height: 1.6; margin-top: 0.6rem; min-height: 6.4em; }
.gx-sil .ax-chips { margin-top: 0.8rem; }
.gx-sil .ax-chips .ax-btn { padding: 0.4rem 0.8rem; font-size: 0.82rem; }
.gx-barco { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.gx-barco svg { width: 100%; display: block; }
.gx-barco .hs { cursor: pointer; }

/* Cuánto dura un barco */
.gx-dura { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: center; }
.gx-anillo { position: relative; max-width: 340px; width: 100%; margin: 0 auto; aspect-ratio: 1; }
.gx-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gx-anillo .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18%; }
.gx-anillo .in b { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 9vw, 4.4rem); line-height: 1; }
.gx-anillo .in span { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.35rem; line-height: 1.35; }
.gx-anillo .in small { color: var(--gx-liq); font-family: var(--font-mono); font-size: 0.72rem; margin-top: 0.5rem; min-height: 1.2em; }
.gx-paises { display: grid; gap: 0.4rem; }
.gx-paises button { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; width: 100%; text-align: left; padding: 0.7rem 0.95rem; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font: inherit; cursor: pointer; transition: all var(--transition); }
.gx-paises button small { display: block; color: var(--text-subtle); font-size: 0.76rem; }
.gx-paises button em { font-style: normal; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }
.gx-paises button.on { border-color: rgba(34,211,238,0.5); background: rgba(34,211,238,0.07); }

/* Cadena: ícono del paso y reparto del costo */
.gx-icono { display: grid; justify-items: center; gap: 0.6rem; text-align: center; }
.gx-icono .ax-proc-vis { position: relative; width: 120px; height: 120px; }
.gx-icono .ax-proc-vis svg { position: absolute; inset: 0; width: 120px; height: 120px; max-width: none; fill: none; stroke: var(--gx-liq); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gx-costo { margin-top: 2rem; }
.gx-icono > b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1; }
.gx-icono > span { color: var(--text-muted); font-size: 0.9rem; max-width: 22ch; line-height: 1.4; }
.gx-est { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(251,146,60,0.14); color: var(--gx-gas); margin-bottom: 0.6rem; }
.gx-est.liq { background: rgba(34,211,238,0.14); color: var(--gx-liq); }

/* Precios */
.gx-caja { margin-top: 2.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.1rem, 3vw, 2rem); }
.gx-per { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gx-per::-webkit-scrollbar { display: none; }
.gx-per button { flex: 0 0 auto; }
.gx-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: end; height: 260px; margin-top: 1.5rem; border-bottom: 1px solid var(--border); }
.gx-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.gx-col .v { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.1; text-align: center; }
.gx-col .v small { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-subtle); display: block; }
.gx-col .c { width: min(100%, 110px); border-radius: 10px 10px 0 0; margin-top: 0.5rem; height: 0; transition: height .9s cubic-bezier(.16,1,.3,1); }
.gx-cols-et { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; margin-top: 0.6rem; font-size: 0.86rem; }
.gx-cols-et small { display: block; color: var(--text-subtle); font-size: 0.74rem; }
.gx-cols-et b { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 0.8rem; color: var(--accent); margin-top: 0.3rem; }

/* Ormuz */
.gx-ormuz { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem; align-items: start; }
.gx-tl { display: grid; gap: 0.35rem; }
.gx-tl button { display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.7rem; text-align: left; padding: 0.7rem 0.85rem; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); font: inherit; font-size: 0.9rem; line-height: 1.45; cursor: pointer; transition: all var(--transition); }
.gx-tl button b { font-family: var(--font-mono); font-weight: 400; font-size: 0.76rem; color: var(--text-subtle); padding-top: 0.1rem; }
.gx-tl button.on { border-color: rgba(255,107,107,0.5); background: rgba(255,107,107,0.07); color: var(--text); }
.gx-tl button.on b { color: #ffb4b4; }
.gx-flete { position: sticky; top: 130px; padding: 1.5rem; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); }
.gx-flete small { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); }
.gx-flete b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1.05; margin: 0.4rem 0 0.2rem; color: #ffb4b4; }
.gx-flete span { color: var(--text-muted); font-size: 0.88rem; }
.gx-paso-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.07); margin-top: 1.2rem; overflow: hidden; }
.gx-paso-bar i { display: block; height: 100%; background: var(--gx-liq); border-radius: 4px; transition: width .8s cubic-bezier(.16,1,.3,1); }
.gx-paso-et { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.4rem; }

/* Barras horizontales (paradoja, márgenes, emisiones) */
.gx-hbar { display: grid; gap: 0.55rem; margin-top: 1.5rem; }
.gx-hbar > * { display: grid; grid-template-columns: 9rem 1fr; gap: 0.8rem; align-items: center; background: none; border: 0; color: var(--text); font: inherit; text-align: left; padding: 0; width: 100%; }
.gx-hbar button { cursor: pointer; border-radius: 10px; padding: 0.25rem 0.4rem; margin: 0 -0.4rem; width: calc(100% + 0.8rem); transition: background var(--transition); }
.gx-hbar button:hover, .gx-hbar button.on { background: rgba(255,255,255,0.05); }
.gx-hbar .n { font-size: 0.9rem; line-height: 1.25; }
.gx-hbar .n small { display: block; color: var(--text-subtle); font-size: 0.74rem; }
.gx-hbar .t { height: 28px; border-radius: 6px; background: rgba(255,255,255,0.04); position: relative; }
.gx-hbar .t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; width: 0; transition: width 1s cubic-bezier(.16,1,.3,1), background .4s; }
.gx-hbar .t span { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 0.74rem; white-space: nowrap; text-shadow: 0 0 6px #0a0c0f, 0 0 6px #0a0c0f; }
.gx-hbar .t i.var { background: repeating-linear-gradient(135deg, rgba(167,139,250,0.55) 0 6px, rgba(167,139,250,0.2) 6px 12px) !important; }
.gx-det { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 12px; background: rgba(255,255,255,0.03); font-size: 0.92rem; line-height: 1.6; color: var(--text-muted); min-height: 4.5em; }
.gx-det b { color: var(--text); }
.gx-det a { color: var(--accent); }

/* Argentina */
.gx-arg { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.gx-arg .ax-globo { aspect-ratio: 1; height: auto; max-height: none; }
.gx-hitos { display: grid; gap: 0.5rem; }
.gx-hitos div { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.8rem; padding: 0.75rem 0.9rem; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); font-size: 0.92rem; line-height: 1.5; color: var(--text-muted); }
.gx-hitos b { font-family: var(--font-mono); font-weight: 400; font-size: 0.76rem; color: var(--accent); padding-top: 0.15rem; }
.gx-hitos strong { color: var(--text); font-weight: 500; }
.gx-tabla { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: 0.9rem; }
.gx-tabla th, .gx-tabla td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: top; }
.gx-tabla th { font-family: var(--font-mono); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.gx-tabla td:first-child { color: var(--text-subtle); font-size: 0.82rem; }
.gx-tabla td b { color: var(--text); font-weight: 500; }

/* Clima */
.gx-fuga { margin-top: 1.5rem; display: grid; gap: 0.4rem; }
.gx-fuga label { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--text-muted); }
.gx-fuga label b { color: var(--text); font-family: var(--font-mono); font-weight: 400; }

/* Alto reservado para lo que arma el JS */
#gx-lista { min-height: 420px; }
.ax-flujos button.paso { grid-template-columns: 1fr; padding: 0.65rem 0.7rem; }
.ax-flujos button.paso .v b { color: #ffb4b4; font-weight: 400; font-size: 0.9rem; }
.ax-flujos button.paso.on { border-color: rgba(255,107,107,0.45); background: rgba(255,107,107,0.07); }
#gx-per-cols { min-height: 260px; }

@media (max-width: 899px) {
  .gx-barco, .gx-dura, .gx-ormuz, .gx-arg { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .gx-sil { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .gx-sil-svg { padding: 0.75rem 0.5rem 0.4rem; }
  .gx-sil svg { height: auto; }
  .gx-sil-txt { min-height: 5.4em; }
  .gx-hbar > * { grid-template-columns: 6.8rem 1fr; gap: 0.6rem; }
  .gx-hbar .n { font-size: 0.82rem; }
  .gx-hbar .t span { font-size: 0.68rem; left: 0.4rem; }
  /* En el celular el precio del flete queda pegado arriba mientras se recorre la cronología */
  .gx-flete { position: sticky; top: 108px; z-index: 3; order: -1; padding: 0.9rem 1.1rem; box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
  .gx-flete b { font-size: 2.2rem; margin: 0.2rem 0 0; }
  .gx-paso-bar { margin-top: 0.7rem; }
  .gx .ax-precio { grid-template-columns: minmax(0, 1fr); }
  .gx-cols { height: 210px; gap: 0.5rem; }
  #gx-per-cols { min-height: 210px; }
  .gx-cols-et { gap: 0.5rem; font-size: 0.8rem; }
  .gx-anillo { max-width: 260px; }
  .gx-arg .ax-globo { max-width: 400px; margin: 0 auto; width: 100%; }
  .gx-tabla { font-size: 0.82rem; }
  .gx-tabla th, .gx-tabla td { padding: 0.55rem 0.35rem; }
  .gx-hitos div { grid-template-columns: 4.4rem 1fr; gap: 0.6rem; }
}