/* Visuales compartidos de «Aprende» (nacieron en V1, Emilio los pidió en las 4 · 29-sep-2026):
   · .apv-earth-box  → la Tierra como campana (cavidad suelo–ionosfera, onda estacionaria, rayos)
   · .apv-spec       → espectrograma ilustrativo de la resonancia Schumann (canvas + etiquetas en Hz)
   Cada versión puede ajustar los tokens --apv-* en su propio styles.css. */
:root {
  --apv-violet: #A070D0;
  --apv-orange: #EA580C;
  --apv-orange-l: #FDBA74;
  --apv-deep: #0A0712;
  --apv-frame-bg: rgba(10, 7, 18, .6);
  --apv-frame-line: rgba(245, 241, 234, .12);
  --apv-radius: 18px;
}

/* ---------- La Tierra, una campana eléctrica ---------- */
.apv-earth-box {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, #1c1430 0%, var(--apv-deep) 70%);
}
.apv-earth-box::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 7, 18, 0) 70%, rgba(10, 7, 18, .5));
}
.apv-fig { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Blindaje: cada versión trae reglas propias para sus figuras (padding, svg al 84 %, max-width…) */
.apv-earth-box { width: 100% !important; padding: 0 !important; display: block !important; }
.apv-earth-box > svg.apv-fig {
  position: absolute !important; inset: 0 !important; z-index: 0;
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  overflow: hidden !important; margin: 0 !important;
}
.apv-earth__iono { fill: none; stroke: var(--apv-violet); stroke-width: 1.1; stroke-dasharray: 2 5; opacity: .9; }
.apv-earth__iono2 { fill: none; stroke: rgba(160, 112, 208, .25); stroke-width: 1; }
.apv-earth__ground { stroke: rgba(253, 186, 116, .7); stroke-width: 1.2; }
.apv-earth__wave { fill: none; stroke: var(--apv-orange-l); stroke-width: 1.6; stroke-linejoin: round; }
.apv-earth__glow { fill: none; stroke: rgba(234, 88, 12, .45); stroke-width: 5; stroke-linejoin: round; filter: blur(3px); }
.apv-earth__nodes circle { fill: var(--apv-violet); }
.apv-earth__bolt {
  fill: none; stroke: #FFE7C9; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(253, 186, 116, .9));
  opacity: .1;
  animation: apvBolt 4.2s linear infinite; animation-delay: calc(var(--i) * 1.37s);
}
@keyframes apvBolt { 0%, 86%, 100% { opacity: .1; } 88% { opacity: 1; } 90% { opacity: .25; } 92% { opacity: .95; } 95% { opacity: .1; } }

/* ---------- Espectrograma de la resonancia Schumann ---------- */
.apv-spec {
  position: relative; padding: 12px;
  border: 1px solid var(--apv-frame-line); border-radius: var(--apv-radius);
  background: var(--apv-frame-bg);
}
.apv-spec::before, .apv-spec::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: solid var(--apv-orange-l); opacity: .8;
}
.apv-spec::before { right: 12px; top: 12px; border-width: 1px 1px 0 0; }
.apv-spec::after { left: 12px; bottom: 12px; border-width: 0 0 1px 1px; }
.apv-spec__screen {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px;
  background:
    linear-gradient(0deg, transparent 17.5%, rgba(253, 186, 116, .55) 19.5%, transparent 21.5%),
    linear-gradient(0deg, transparent 34%, rgba(234, 120, 60, .4) 35.75%, transparent 37.5%),
    linear-gradient(0deg, transparent 50.4%, rgba(190, 100, 150, .38) 52%, transparent 53.6%),
    linear-gradient(0deg, transparent 66.8%, rgba(160, 112, 208, .34) 68.25%, transparent 69.7%),
    linear-gradient(0deg, transparent 83.2%, rgba(160, 112, 208, .26) 84.5%, transparent 85.8%),
    linear-gradient(0deg, rgba(96, 48, 144, .35), var(--apv-deep) 22%);
}
@media (max-width: 959px) { .apv-spec__screen { aspect-ratio: 16 / 9; } }
.apv-spec__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(245, 241, 234, .05) 0 1px, transparent 1px 12.5%),
    linear-gradient(90deg, rgba(10, 7, 18, .55), transparent 18%, transparent 82%, rgba(10, 7, 18, .35));
}
.apv-spec canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.apv-spec__axis { list-style: none; margin: 0; padding: 0; }
.apv-spec__axis li {
  position: absolute; z-index: 1; left: 0; right: 0;
  top: calc((1 - var(--f) / 40) * 100%);
  display: flex; align-items: center; justify-content: flex-end;
  transform: translateY(-50%); pointer-events: none;
}
.apv-spec__axis li::before { content: ""; flex: 1; height: 0; border-top: 1px dashed rgba(245, 241, 234, .1); margin-right: 10px; }
.apv-spec__axis span {
  padding: .22rem .45rem; margin-right: 8px; border-radius: 4px;
  font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  font-size: .58rem; letter-spacing: .08em; line-height: 1; color: rgba(245, 241, 234, .82);
  background: rgba(10, 7, 18, .72); border: 1px solid rgba(245, 241, 234, .1);
}
.apv-spec__axis li:first-child span { color: var(--apv-orange-l); border-color: rgba(253, 186, 116, .35); }

/* Preguntas frecuentes a dos columnas (espectrograma fijo a la izquierda) */
@media (min-width: 960px) {
  .apv-faq-2col { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
  .apv-faq-2col > .apv-faq-side { position: sticky; top: 110px; }
}
.apv-faq-side .apv-spec { margin-top: 1.6rem; }
@media (max-width: 959px) { .apv-faq-side { margin-bottom: 2rem; } }

@media (prefers-reduced-motion: reduce) {
  .apv-earth__bolt { animation: none !important; opacity: .55; }
}