/* «Órbita» (prototype, 19 Oct 2026): the home screen the owner chose among three. The Earth fills
   the window and turns; the nine doors sit on one ring, at the same distance from it; every cut
   GUARDIANA makes is drawn on the planet as it happens. Measurements only (/api/por-dentro); when
   the page runs without the panel it says «Demostración» and nothing it draws is a measurement. */
@font-face { font-family: 'Schibsted Grotesk'; font-weight: 400 900; font-display: swap; src: url(fonts/SchibstedGrotesk-var.woff) format('woff'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 100 900; font-display: swap; src: url(fonts/HankenGrotesk-var.woff) format('woff'); }
@font-face { font-family: 'Instrument Serif'; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/InstrumentSerif-Regular.woff) format('woff'); } /* the website's display face (OFL, licence beside it) */
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexMono-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexMono-500-latin.woff2) format('woff2'); }

html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden; }
body { font-family: var(--texto); -webkit-font-smoothing: antialiased; }
/* One unit for the whole geometry: the ring, the doors and the globe (orbita.js reads the same). */
:root { --u: min(1vh, .62vw); --anillo: calc(var(--u) * 41); }

#escena { position: fixed; inset: 0; }
#escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 22 Oct 2026, 21:42 (owner): the usual arrow on the planet; the hand only over something with a card (body.mano, set by capas.js);
   the closed hand only while actually dragging */
#tierra { cursor: default; touch-action: none; }
body.mano #tierra, body.mano #rutas { cursor: pointer; }
#tierra.arrastra, body.mano #tierra.arrastra { cursor: grabbing; }
#rutas { pointer-events: none; }

/* The intro: the planet arrives, then the ring draws itself, then the doors. */
#escena { opacity: 0; transform: scale(.94); transition: opacity 1.6s cubic-bezier(.2,.7,.2,1), transform 2.4s cubic-bezier(.2,.7,.2,1); }
.listo #escena { opacity: 1; transform: none; }

.geo { position: fixed; left: 50%; top: 50%; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); }
#anillo { width: calc(var(--anillo) * 2); height: calc(var(--anillo) * 2); }
#anillo circle { fill: none; stroke: rgba(156,195,228,.26); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s cubic-bezier(.6,0,.2,1) .6s; }
.listo #anillo circle { stroke-dashoffset: 0; }
#anillo2 { width: calc(var(--u) * 96); height: calc(var(--u) * 96); border: 1px dashed rgba(156,195,228,.07); opacity: 0; transition: opacity 2s 1.4s; }
.listo #anillo2 { opacity: 1; }
#pulso { width: calc(var(--anillo) * 2); height: calc(var(--anillo) * 2); border: 1px solid rgba(224,122,108,0); }
#pulso.va { animation: pulso 1.6s cubic-bezier(.2,.7,.2,1); }
@keyframes pulso { 0% { border-color: rgba(224,122,108,.55); transform: translate(-50%,-50%) scale(.985); } 100% { border-color: rgba(224,122,108,0); transform: translate(-50%,-50%) scale(1.09); } }
.cruz { position: fixed; background: rgba(156,195,228,.07); pointer-events: none; }
.cruz.v { left: 50%; top: 5vh; bottom: 5vh; width: 1px; }
.cruz.h { top: 50%; left: 5vw; right: 5vw; height: 1px; }

/* The nine doors */
#puertas { position: fixed; inset: 0; pointer-events: none; }
.puerta { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity .8s; }
.listo .puerta { opacity: 1; }
.puerta button { pointer-events: auto; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.puerta button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.puerta .p { width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--accent); transition: background .2s, box-shadow .3s, transform .2s; }
.puerta button:hover .p { background: var(--accent); box-shadow: 0 0 0 6px rgba(156,195,228,.14); }
.puerta.on .p { background: var(--accent); box-shadow: 0 0 0 7px rgba(156,195,228,.18), 0 0 26px rgba(156,195,228,.7); }
.puerta.late .p { animation: late 1.2s ease-out; }
@keyframes late { 0% { box-shadow: 0 0 0 0 rgba(224,122,108,.9); border-color: var(--alerta); } 100% { box-shadow: 0 0 0 16px rgba(224,122,108,0); } }
.puerta .et { position: absolute; white-space: nowrap; font: 500 13px/1.2 var(--texto); color: #C4CCD5; cursor: pointer; letter-spacing: .01em; transition: color .2s; padding: 4px 0; }
.puerta button:hover .et { color: var(--fg); }
.puerta button:hover .et small { color: #A9B3BE; }
.puerta.on .et { color: var(--fg); }
.puerta .et small { display: block; font: 400 11px/1.3 var(--mono); color: #8A95A2; margin-top: 3px; letter-spacing: .04em; text-transform: uppercase; }
.puerta .et small.desarrollo { color: var(--aviso); }

/* Top bar */
header { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 40px; flex-wrap: wrap; opacity: 0; transition: opacity 1.2s .9s; }
.listo header { opacity: 1; }
.marca { font: 700 15px/1 var(--display); letter-spacing: .32em; }
#estado { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(12,17,24,.72); backdrop-filter: blur(12px); font: 500 13px/1.2 var(--texto); }
#estado .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: respira 3s ease-in-out infinite; }
@keyframes respira { 50% { opacity: .45; } }
#estado .sep { color: #8A95A2; }
#estado b { font: 500 13px/1 var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }
.demo { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--aviso); border: 1px solid #4A3C22; border-radius: 999px; padding: 5px 9px; }
.derecha { display: flex; align-items: center; gap: 16px; font: 400 12px/1 var(--mono); color: #8A95A2; letter-spacing: .06em; }

/* The selected door */
/* The door under the pointer: an instrument's reading, not a card. A hairline with a steel tick,
   the door's number, its name and one line. */
#ficha { position: fixed; left: 40px; bottom: 36px; width: 268px; box-sizing: border-box; display: flex; align-items: flex-end; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: opacity 1s 1.8s, transform 1s 1.8s; }
#ficha::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 1px; background: var(--accent); }
.listo #ficha { opacity: 1; transform: none; }
#ficha .k { display: flex; align-items: baseline; gap: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8A95A2; }
#ficha .k #ficha-n { color: var(--accent); }
#ficha .k .de { margin-left: -4px; }
#ficha .t { font: 600 15px/1.25 var(--display); margin-top: 9px; letter-spacing: .005em; }
#ficha .d { font: 400 12.5px/1.45 var(--texto); color: var(--muted); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ficha .abrir { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #2A3442; color: var(--fg); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s, color .15s; }
#ficha .abrir:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
#ficha .abrir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Live: what was just cut */
#directo { position: fixed; right: 40px; bottom: 36px; width: 290px; opacity: 0; transition: opacity 1s 2.2s; }
.listo #directo { opacity: 1; }
#directo h2 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .14em; color: #8A95A2; font-weight: 500; }
#directo h2::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--alerta); animation: respira 1.6s ease-in-out infinite; }
#lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#lista li button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; animation: entra .6s cubic-bezier(.2,.7,.2,1); }
#lista li button:hover, #lista li button:focus-visible { background: rgba(16,22,30,.85); }
#lista .q { font: 600 13px/1.3 var(--texto); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lista .q i { font-style: normal; color: var(--alerta); font: 500 10px/1 var(--mono); letter-spacing: .12em; margin-right: 6px; }
#lista .q i.pasa { color: var(--accent); }
#lista .h { font: 400 11px/1.3 var(--mono); color: #8A95A2; text-align: right; }
#lista .w { grid-column: 1 / -1; font: 400 12px/1.3 var(--texto); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lista li:nth-child(n+4) { opacity: .55; }
#lista li:nth-child(n+5) { opacity: .3; }
#espera { font: 400 12px/1.5 var(--texto); color: #8A95A2; padding: 0 12px; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

#ficha .cuerpo { flex: 1; min-width: 0; }
.izq { display: flex; align-items: center; gap: 18px; }
.donde { font: 500 11px/1 var(--mono); letter-spacing: .16em; color: #8A95A2; text-transform: uppercase; }

/* Where this computer is (19 Oct 2026): a chip in the bar, and one calm card over the planet. */
.lugar-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); font: 500 12px/1 var(--texto); letter-spacing: 0; color: var(--muted); }
.lugar-btn:hover { border-color: #3A4656; color: var(--fg); }
.lugar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lugar-btn.falta { color: var(--aviso); border-color: #4A3C22; }
.lugar { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6,8,12,.55); backdrop-filter: blur(3px); z-index: 5; }
.lugar[hidden] { display: none; }
.lugar-caja { width: min(460px, 100%); box-sizing: border-box; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: rgba(10,14,20,.94); box-shadow: 0 40px 120px -30px rgba(0,0,0,.9); }
.lugar-caja .k { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--accent); }
.lugar-caja h2 { margin: 12px 0 8px; font: 600 22px/1.2 var(--display); }
.lugar-caja p { margin: 0; font: 400 14px/1.5 var(--texto); color: var(--muted); }
.lugar-caja .hallado { margin-top: 18px; padding: 16px 18px; border: 1px solid #2A3442; border-radius: 14px; background: var(--campo); }
.lugar-caja .hallado .ciudad { font: 600 20px/1.2 var(--display); }
.lugar-caja .hallado .dato { margin-top: 6px; font: 400 12px/1.4 var(--mono); color: #8A95A2; }
.lugar-caja .buscar { margin-top: 18px; }
.lugar-caja label { display: block; font: 500 12px/1 var(--texto); color: var(--muted); margin-bottom: 8px; }
.lugar-caja input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 14px; border-radius: var(--r-campo); border: 1px solid #2A3442; background: var(--campo); color: var(--fg); font: 400 15px/1 var(--texto); }
.lugar-caja input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.lugar-caja .res { margin-top: 8px; max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.lugar-caja .res button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; font: 500 14px/1.3 var(--texto); }
.lugar-caja .res button small { color: #8A95A2; font: 400 12px/1.3 var(--texto); white-space: nowrap; }
.lugar-caja .res button:hover, .lugar-caja .res button:focus-visible { background: #141B25; }
.lugar-caja .res p { margin: 8px 4px; font-size: 13px; }
.lugar-caja .acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* A door opened: the planet steps back behind glass, still turning and still cutting; the section
   comes forward. Esc, «Órbita» or the system's Back bring the planet home. */
body.dentro #escena { transform: scale(.62); opacity: .85; transition: transform 1.1s cubic-bezier(.7,0,.2,1), opacity 1.1s; }
body.dentro #anillo, body.dentro #anillo2, body.dentro .cruz, body.dentro #puertas, body.dentro #ficha, body.dentro #directo, body.dentro #pulso { opacity: 0; pointer-events: none; transition: opacity .45s; }
#anillo, #anillo2, .cruz, #puertas, #ficha, #directo { transition-property: opacity, transform; }
#seccion { position: fixed; left: 40px; right: 40px; top: 88px; bottom: 32px; border: 1px solid var(--line); border-radius: 20px; background: rgba(6,8,12,.5); backdrop-filter: blur(10px) saturate(1.1); box-shadow: 0 40px 120px -40px rgba(0,0,0,.9); overflow: hidden; opacity: 0; transform: translateY(28px) scale(.985); transition: opacity .45s, transform .6s, visibility 0s .6s; }
body.dentro #seccion { opacity: 1; transform: none; transition: opacity .7s .35s, transform .9s cubic-bezier(.2,.7,.2,1) .3s, visibility 0s; }
#seccion { visibility: hidden; }
body.dentro #seccion { visibility: visible; }
#marco { width: 100%; height: 100%; border: 0; background: transparent; display: block; }
.sin-pagina { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; }
.sin-pagina .k { font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--accent); }
.sin-pagina .k.desarrollo { color: var(--aviso); }
.sin-pagina h1 { font: 600 40px/1.15 var(--display); margin: 16px 0 10px; }
.sin-pagina p { font: 400 16px/1.55 var(--texto); color: var(--muted); max-width: 520px; margin: 0; }
.sin-pagina[hidden] { display: none; }

/* A narrow window (orbita.js decides, by measuring): «En directo» becomes one line under the
   status, the door's reading goes under the ring, and the ring shrinks to leave them room. Nothing
   ever sits on a door. */
body.estrecho #directo { left: 50%; right: auto; top: 84px; bottom: auto; width: min(460px, calc(100% - 32px)); transform: translateX(-50%); }
body.estrecho #directo h2 { display: none; }
body.estrecho #lista li:nth-child(n+2) { display: none; }
body.estrecho #lista li button { background: rgba(12,17,24,.72); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; grid-template-columns: 1fr auto; }
body.estrecho #lista .w { display: none; }
body.estrecho #espera { text-align: center; }
body.estrecho #ficha { left: 50%; bottom: 16px; width: min(420px, calc(100% - 32px)); transform: translate(-50%, 8px); }
body.estrecho.listo #ficha { transform: translateX(-50%); }
@media (max-width: 860px) {
  header { padding: 18px 20px; }
  #seccion { left: 12px; right: 12px; top: 72px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #escena, header, #ficha, #directo, .puerta, #anillo circle { transition: none; }
}

/* ---------- The common section (all nine doors) ---------- */
body.dentro #estado { opacity: 0; pointer-events: none; }
body.dentro .donde { position: fixed; left: 50%; top: 40px; transform: translate(-50%, -50%); font: 600 15px/1 var(--display); letter-spacing: .32em; color: var(--fg); }
.plantilla { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 15fr) minmax(0, 70fr) minmax(0, 15fr); grid-template-rows: minmax(0, 1fr) auto; }
.plantilla[hidden] { display: none; }
.plantilla .zona { padding: 28px 22px; min-width: 0; }
.plantilla .zona-der { text-align: right; }
.plantilla .k { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; color: #8A95A2; text-transform: uppercase; }
.plantilla dl { margin: 18px 0 0; display: flex; flex-direction: column; gap: 18px; }
.plantilla dt { font: 400 12px/1.3 var(--texto); color: var(--muted); }
.plantilla dd { margin: 4px 0 0; font: 600 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.plantilla dd.rojo { color: var(--alerta); }
.plantilla ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plantilla li { animation: entra .6s cubic-bezier(.2,.7,.2,1); }
.plantilla li b { display: block; font: 600 13px/1.3 var(--texto); }
.plantilla li span { display: block; font: 400 11.5px/1.4 var(--texto); color: var(--muted); }
.plantilla li i { font: 500 9.5px/1 var(--mono); letter-spacing: .12em; color: var(--alerta); font-style: normal; }
.plantilla li:nth-child(n+6) { opacity: .45; }
.plantilla .escenario { position: relative; min-width: 0; border-left: 1px solid rgba(30,38,49,.7); border-right: 1px solid rgba(30,38,49,.7); }
.plantilla canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plantilla .vacio { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 32px; color: var(--muted); font: 400 15px/1.5 var(--texto); }
.plantilla .pie { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 14px 22px; border-top: 1px solid rgba(30,38,49,.7); }
.plantilla .pie-der { text-align: right; }
.plantilla .modos { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(12,17,24,.7); }
.plantilla .modos button { all: unset; cursor: pointer; padding: 8px 16px; border-radius: 999px; font: 500 13px/1 var(--texto); color: var(--muted); }
.plantilla .modos button[aria-selected="true"] { background: var(--accent-suave); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(156,195,228,.35); }
.plantilla .modos button:focus-visible { outline: 2px solid var(--accent); }
body.dentro #seccion .plantilla:not([hidden]) .escenario { animation: escenario .9s cubic-bezier(.2,.7,.2,1) .25s both; }
@keyframes escenario { from { opacity: 0; transform: scale(.94); } }
@media (max-width: 980px) { .plantilla { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } .plantilla .zona { display: none; } }

/* ZERO: the browser inside the section */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.busca-web { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); width: min(720px, calc(100% - 48px)); height: 52px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 18px; border-radius: 999px; background: rgba(16,22,30,.92); border: 1px solid #2A3442; box-shadow: 0 20px 60px -20px rgba(0,0,0,.8); z-index: 2; transition: top .6s cubic-bezier(.2,.7,.2,1), width .6s cubic-bezier(.2,.7,.2,1); }
.busca-web[hidden] { display: none; }
.busca-web.centro { top: calc(50% - 26px); }
.busca-web:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(156,195,228,.18), 0 20px 60px -20px rgba(0,0,0,.8); }
.busca-web .ico { color: var(--muted); display: inline-flex; }
.busca-web input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg); font: 400 16px/1 var(--texto); }
.busca-web input::placeholder { color: #8A95A2; }
.nav-web { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); margin-left: -8px; }
.nav-web:hover { background: #141B25; color: var(--fg); }
.nav-web[hidden] { display: none; }
.escudo-web { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(224,122,108,.45); color: var(--alerta); font: 500 12px/1 var(--mono); }
.escudo-web b { font-weight: 500; color: var(--fg); }
.escudo-web.late { animation: lateEscudo .5s ease-out; }
@keyframes lateEscudo { 0% { box-shadow: 0 0 0 0 rgba(224,122,108,.6); } 100% { box-shadow: 0 0 0 10px rgba(224,122,108,0); } }
.escudo-web[hidden] { display: none; }
.visor { position: absolute; left: 24px; right: 24px; top: 92px; bottom: 20px; border-radius: 14px; overflow: hidden; border: 1px solid #2A3442; background: #fff; box-shadow: 0 40px 100px -40px rgba(0,0,0,.9); animation: visor .7s cubic-bezier(.2,.7,.2,1); }
.visor[hidden] { display: none; }
@keyframes visor { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.visor iframe { width: 100%; height: 100%; border: 0; display: block; }
.visor .carga { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--accent); box-shadow: 0 0 10px var(--accent); z-index: 2; transition: width .4s ease, opacity .6s; }
.visor .filo { position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(transparent, rgba(224,122,108,0), transparent); }
.visor .filo.late { animation: filo .9s ease-out; }
@keyframes filo { 0% { background: linear-gradient(transparent, rgba(224,122,108,.9) 50%, transparent); box-shadow: -6px 0 18px rgba(224,122,108,.45); } 100% { background: linear-gradient(transparent, rgba(224,122,108,0) 50%, transparent); box-shadow: none; } }
.plantilla.navegando canvas { opacity: .0; transition: opacity .6s; }
.plantilla.navegando .modos { visibility: hidden; }

/* ZERO open (20 Oct 2026, owner): the browser fills the whole screen, no planet behind and no
   Órbita bar over it; ZERO's own «‹» (or Esc on its home screen) brings Órbita back. */
body.pantalla #seccion { left: 0; right: 0; top: 0; bottom: 0; border: 0; border-radius: 0; background: #06080C; backdrop-filter: none; box-shadow: none; }
body.pantalla header, body.pantalla #escena { opacity: 0; pointer-events: none; transition: opacity .5s; }
body.pantalla #marco { background: #06080C; }
/* 22 Oct 2026, 22:24 (owner: «una pequeña pantalla durante un segundo con el navegador como de lado»): ZERO arrives as one
   clean fade over the whole screen — no slide, no scale, and Órbita's own bar leaves at once instead of crossing ZERO's. */
body.pantalla #seccion { transform: none; transition: opacity .45s .12s, visibility 0s; }
body.pantalla header, body.pantalla #escena { transition: opacity .2s; }

/* 20 Oct 2026 (owner): no door reading at the bottom left; the planet and the doors say enough. */
#ficha { display: none; }

/* 20 Oct 2026 (owner): nothing has been cut yet, so no live list and no cut counter. */
body.sin-cortes #directo, body.sin-cortes #estado { display: none; }

/* 20–22 Oct 2026 (owner): the languages, next to «Precisar ubicación»; «todos los idiomas, minimizado, muy elegante»:
   one small pill with the current code, and a folded list of the 42 languages in their own names. */
.idiomas { position: relative; display: inline-flex; }
.idiomas .idioma-actual { all: unset; cursor: pointer; font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--fg); padding: 8px 12px 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: rgba(12,17,24,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: inline-flex; align-items: center; gap: 7px; transition: border-color .2s, background .2s; }
.idiomas .idioma-actual::after { content: ''; width: 5px; height: 5px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(-1px) rotate(45deg); opacity: .7; transition: transform .2s; }
.idiomas .idioma-actual:hover, .idiomas .idioma-actual[aria-expanded="true"] { border-color: rgba(156,195,228,.5); background: rgba(156,195,228,.12); }
.idiomas .idioma-actual[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.idiomas .idioma-actual:focus-visible, .idioma-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.idioma-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 40; width: min(560px, calc(100vw - 32px)); max-height: min(62vh, 520px); overflow: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 8px; border-radius: 16px; border: 1px solid var(--line); background: rgba(10,14,20,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,.45); scrollbar-width: thin; }
.idioma-menu[hidden] { display: none; }
.idioma-menu button { all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--muted); font: 400 12.5px/1.2 var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s, background .15s; }
.idioma-menu button .cod { font: 500 10px/1 var(--mono); letter-spacing: .08em; color: #8A95A2; min-width: 28px; }
.idioma-menu button .nom { overflow: hidden; text-overflow: ellipsis; }
.idioma-menu button:hover { color: var(--fg); background: rgba(156,195,228,.1); }
.idioma-menu button[aria-pressed="true"] { color: var(--fg); background: rgba(156,195,228,.18); }
.idioma-menu button[aria-pressed="true"] .cod { color: #9CC3E4; }
@media (max-width: 760px) { .idioma-menu { grid-template-columns: 1fr 1fr; width: min(420px, calc(100vw - 24px)); position: fixed; top: auto; bottom: 16px; left: 12px; right: 12px; } }
/* right-to-left languages: the page mirrors; the planet, the codes and the figures keep their direction */
[dir="rtl"] .idiomas .idioma-actual, [dir="rtl"] .idioma-menu .cod, [dir="rtl"] #zoom, [dir="rtl"] .ms { direction: ltr; }

/* 20 Oct 2026 (owner): the doors leave the ring for a centred dock at the bottom, so the planet's layers
   (cables, satellites) have the sky to themselves. Comunicaciones · ZERO · Radiografías. */
body.dock #anillo, body.dock .cruz { opacity: 0; }
body.dock #anillo2 { opacity: 0; transition: opacity .8s; }
body.dock.ver-sat #anillo2 { opacity: 1; border-color: rgba(156,195,228,.14); }
body.dock #puertas { position: fixed; inset: auto 0 calc(26px + env(safe-area-inset-bottom, 0px)) 0; display: flex; justify-content: center; gap: 12px; pointer-events: none; }
body.dock .puerta { position: static !important; width: auto; height: auto; }
body.dock .puerta:nth-child(1) { order: 2; } body.dock .puerta:nth-child(2) { order: 3; } body.dock .puerta:nth-child(3) { order: 1; }
body.dock .puerta button { position: relative; left: auto; top: auto; width: auto; height: auto; display: flex; align-items: center; gap: 12px; padding: 11px 20px 11px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(12,17,24,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .2s, background .2s; }
body.dock .puerta .et { position: static !important; transform: none !important; text-align: left !important; padding: 0; }
body.dock .puerta button:hover, body.dock .puerta.on button { border-color: rgba(156,195,228,.45); background: rgba(16,24,34,.85); }
body.dock .puerta:nth-child(1) button { padding: 13px 26px 13px 18px; border-color: rgba(156,195,228,.4); }
body.dock .puerta:nth-child(1) .et { font-size: 15px; }
body.dock #puertas { transition: opacity .45s; }
/* the three layers, in the middle of the header */
.capas { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); display: flex; gap: 6px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(12,17,24,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.capas button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; border-radius: 999px; font: 500 12px/1 var(--texto); color: var(--muted); white-space: nowrap; transition: color .2s, background .2s; }
.capas button i { width: 7px; height: 7px; border-radius: 50%; border: 1.3px solid currentColor; transition: background .2s, box-shadow .2s; }
.capas button:hover { color: var(--fg); }
.capas button[aria-pressed="true"] { color: var(--fg); background: rgba(156,195,228,.16); }
.capas button[aria-pressed="true"] i { background: #9CC3E4; border-color: #9CC3E4; box-shadow: 0 0 8px rgba(156,195,228,.8); }
.capas button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.dentro .capas, body.dentro .capa-nota, body.dentro .sat-ficha { opacity: 0; pointer-events: none; }
.capa-nota { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); margin: 0; max-width: calc(100vw - 48px); text-align: center; font: 400 11px/1.5 var(--mono); letter-spacing: .04em; color: #8A95A2; transition: opacity .45s; }
.sat-ficha { position: fixed; z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(156,195,228,.35); background: rgba(8,11,16,.9); font: 400 11px/1.3 var(--mono); color: #A9B3BE; }
.sat-ficha b { font: 600 12.5px/1.2 var(--texto); color: var(--fg); }
.sat-ficha span { white-space: pre-line; max-width: 300px; line-height: 1.45; }
@media (max-width: 1100px) {
  .capas { position: static; transform: none; order: 3; width: 100%; justify-content: center; flex-wrap: wrap; }
  body.dock .puerta button { padding: 9px 14px 9px 12px; }
}
.sat-ficha[hidden], .capa-nota[hidden] { display: none; }

/* The doors, on the left, top to bottom (owner, 20 Oct 2026): ZERO first, then Comunicaciones and
   Radiografías; all the same width, the column centred in height, nothing under the planet. */
body.dock #puertas { inset: 0 auto 0 calc(32px + env(safe-area-inset-left, 0px)); flex-direction: column; justify-content: center; align-items: stretch; gap: 12px; width: 232px; }
body.dock .puerta:nth-child(1) { order: 1; } body.dock .puerta:nth-child(2) { order: 2; } body.dock .puerta:nth-child(3) { order: 3; }
body.dock .puerta button, body.dock .puerta:nth-child(1) button { width: 100%; box-sizing: border-box; padding: 14px 18px; }
.capa-nota { bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
/* phones: no room beside the planet, so the doors go back to a row along the bottom */
@media (max-width: 760px) {
  body.dock #puertas { inset: auto 0 calc(20px + env(safe-area-inset-bottom, 0px)) 0; flex-direction: row; justify-content: center; width: auto; gap: 8px; }
  body.dock .puerta button, body.dock .puerta:nth-child(1) button { width: auto; padding: 9px 12px; }
  .capa-nota { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* Doors, second design (owner, 20 Oct 2026: "too big"): a thin rail on the left, no boxes.
   One steel line, a dot per door, the name beside it and the state in small mono. */
body.dock #puertas { inset: 0 auto 0 calc(40px + env(safe-area-inset-left, 0px)); width: 200px; gap: 0; }
body.dock #puertas::before { content: ""; position: absolute; left: 4px; top: 50%; height: 104px; transform: translateY(-50%); width: 1px; background: linear-gradient(transparent, rgba(156,195,228,.32) 18%, rgba(156,195,228,.32) 82%, transparent); }
body.dock .puerta button, body.dock .puerta:nth-child(1) button { width: 100%; justify-content: flex-start; padding: 9px 0; gap: 14px; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.dock .puerta button:hover, body.dock .puerta.on button { background: none; }
body.dock .puerta .p { flex: none; width: 9px; height: 9px; }
body.dock .puerta .et, body.dock .puerta:nth-child(1) .et { font-size: 13px; color: #AEB8C3; }
body.dock .puerta .et small { font-size: 9.5px; margin-top: 2px; letter-spacing: .08em; }
body.dock .puerta button:hover .et, body.dock .puerta.on .et { color: var(--fg); }
/* GUARDIANA OS (23 Oct 2026): not a door into the web but a download, so it stands apart, under the rail of the three,
   with a hollow dot; the three keep their place and their rail. Phones: not shown (it is a system for computers). */
body.dock .puerta.aparte { position: absolute !important; left: 0 !important; right: 0 !important; top: calc(50% + 74px) !important; padding-top: 12px; }
body.dock .puerta.aparte::before { content: ""; position: absolute; left: 0; top: 0; width: 120px; height: 1px; background: linear-gradient(90deg, rgba(156,195,228,.28), transparent); }
body.dock .puerta.aparte .p { background: none; border: 1px solid rgba(156,195,228,.5); box-shadow: none; }
body.dock .puerta.aparte.on .p { background: rgba(156,195,228,.35); }
body.dock .puerta.aparte .et { color: #96A1AD; }
@media (max-width: 760px) {
  body.dock .puerta.aparte { display: none; }
}
@media (max-width: 760px) {
  body.dock #puertas { inset: auto 0 calc(22px + env(safe-area-inset-bottom, 0px)) 0; width: auto; gap: 22px; }
  body.dock #puertas::before { display: none; }
  body.dock .puerta button, body.dock .puerta:nth-child(1) button { width: auto; padding: 6px 0; gap: 8px; }
  body.dock .puerta .et small { display: none; }
}

/* Zoom (20 Oct 2026): a thin rail on the right, mirroring the doors on the left. */
.zoom { position: fixed; right: calc(40px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; z-index: 4; opacity: 0; transition: opacity .8s 1.6s; }
.listo .zoom { opacity: 1; }
.zoom button { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(12,17,24,.6); color: #C4CCD5; cursor: pointer; padding: 0; transition: border-color .2s, color .2s, opacity .2s; }
.zoom button:hover:not(:disabled) { border-color: rgba(156,195,228,.5); color: var(--fg); }
.zoom button:disabled { opacity: .3; cursor: default; }
.zoom button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zoom .nivel { font: 500 11px/1 var(--mono); color: #8A95A2; letter-spacing: .04em; padding: 6px 0; min-width: 34px; text-align: center; }
.zoom .base { margin-top: 8px; }
.zoom .base[hidden] { display: none; }
body.dentro .zoom { opacity: 0; pointer-events: none; transition: opacity .45s; }
/* closer in: the ring and the cross step back so the planet reads on its own */
body.cerca #anillo, body.cerca #anillo2, body.cerca .cruz, body.cerca #pulso { opacity: 0 !important; transition: opacity .4s; }
@media (max-width: 760px) { .zoom { right: calc(14px + env(safe-area-inset-right, 0px)); } .zoom button { width: 32px; height: 32px; } }
body.cerca .capa-nota { background: rgba(6,8,12,.78); padding: 6px 14px; border-radius: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Closer in, the doors step back with the zoom (owner, 20 Oct 2026) and come back as it returns;
   they wake up again under the pointer. */
body:not(.dentro) #puertas { opacity: calc(1 - var(--cerca, 0) * .88); transition: opacity .25s; }
body:not(.dentro) #puertas:hover, body:not(.dentro) #puertas:focus-within { opacity: 1; }
/* 22 Oct 2026, 21:51 (owner): while exploring (past ×3) the doors are not needed; they return when the zoom comes back */
body.explorando:not(.dentro) #puertas { opacity: 0 !important; pointer-events: none; transition: opacity .35s; }
/* 22 Oct 2026, 22:00 (owner: «capacidad no publicada no me lo deja apagar»): the section doors sat on top of the class cards and took
   their clicks. While a class card is open the doors step aside, and the cards always sit above everything on the planet. */
body.tarjeta:not(.dentro) #puertas { opacity: 0 !important; pointer-events: none !important; transition: opacity .25s; }
.sat-vista, .capa-vista { z-index: 60; }
.capa-vista .orb button .d, .sat-vista .orb button .d { display: none; } /* names and counts only; the sentence is the button's tooltip (owner, 22 Oct 2026, 22:09) */
.capa-vista .orb button, .sat-vista .orb button { padding: 7px 10px; }
header { z-index: 50; }
/* 21 Oct 2026 (owner): the top bar steps back with the zoom too, so the planet is seen whole; it wakes under the pointer. */
body.listo:not(.dentro) header > :not(.sat-vista):not(#sat-fase) { opacity: calc(1 - var(--cerca, 0) * .85); transition: opacity .25s; }
body.listo:not(.dentro) header:hover > *, body.listo:not(.dentro) header:focus-within > * { opacity: 1; }
/* 22 Oct 2026 (owner: «ya no se pueden clasificar los satélites»): the orbit filter stays readable at any zoom,
   on a darker glass so it reads over the bright day side too */
body.listo:not(.dentro).cerca .sat-vista { background: rgba(8,11,16,.84); border-color: rgba(156,195,228,.28); }
body.listo:not(.dentro) header:hover, body.listo:not(.dentro) header:focus-within, body.listo:not(.dentro) .sat-vista:hover, body.listo:not(.dentro) .sat-vista:focus-within { opacity: 1; }

/* Which satellites (owner + agency, 20 Oct 2026): a quiet second row under the layers, only with satellites on. */
/* 22 Oct 2026 (owner: «un desplegable con las tres fases para clicar cada una»): a folded card under the «Satélites»
   button, one row per orbit (a lit dot when it is on), and the view below. */
.sat-vista { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); width: 340px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: rgba(10,14,20,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,.45); z-index: 30; }
.sat-vista[hidden] { display: none; }
.sat-vista .titulo { display: flex; justify-content: space-between; align-items: center; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8A95A2; padding: 4px 10px 8px; }
.sat-vista .plegar { all: unset; cursor: pointer; color: #8A95A2; padding: 0 4px; font: 500 12px/1 var(--mono); } .sat-vista .plegar:hover { color: var(--fg); }
.sat-vista .orb { display: flex; flex-direction: column; gap: 2px; }
.sat-vista .orb button { all: unset; cursor: pointer; display: grid; grid-template-columns: 14px 1fr; column-gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; transition: background .15s; }
.sat-vista .orb button i { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; border: 1.3px solid #5F6873; transition: background .2s, box-shadow .2s, border-color .2s; }
.sat-vista .orb button .n { font: 500 13px/1.3 var(--texto); color: var(--fg); }
.sat-vista .orb button .n b { font: 400 10.5px/1 var(--mono); color: #8A95A2; margin-left: 6px; letter-spacing: .02em; }
.sat-vista .orb button .d { grid-column: 2; font: 400 11.5px/1.35 var(--texto); color: var(--muted); margin-top: 2px; }
.sat-vista .orb button:hover { background: rgba(156,195,228,.08); }
.sat-vista .orb button[aria-pressed="true"] i { background: #9CC3E4; border-color: #9CC3E4; box-shadow: 0 0 8px rgba(156,195,228,.8); }
.sat-vista .orb button[aria-pressed="false"] .n { color: var(--muted); }
.sat-vista .seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.sat-vista .seg button { all: unset; cursor: pointer; flex: 1; text-align: center; padding: 6px 10px; border-radius: 999px; font: 500 11px/1 var(--texto); color: var(--muted); white-space: nowrap; transition: color .2s, background .2s; }
.sat-vista .seg button:hover:not(:disabled) { color: var(--fg); }
.sat-vista .seg [aria-checked="true"] { color: var(--fg); background: rgba(156,195,228,.16); }
.sat-vista button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sat-vista .orb [aria-pressed="false"] b { color: #5F6873; }
.sat-vista button:disabled { opacity: .35; cursor: default; }
.sat-vista button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.dentro .sat-vista { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .sat-vista { position: static; transform: none; order: 4; width: 100%; justify-content: center; flex-wrap: wrap; border-radius: 16px; } }
@media (max-width: 760px) { .sat-vista .sep { display: none; } .zoom { display: none; } }

/* «Ahora mismo» (owner, 22 Oct 2026): one true fact at a time, bottom right (static/datos-curiosos.js). */
.dato { box-sizing: border-box; width: 100%; margin-bottom: 14px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(10,14,20,.74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; transition: border-color .2s; }
.dato:hover { border-color: rgba(156,195,228,.45); }
.dato[hidden] { display: none; }
.dato.entra { animation: datoEntra .5s cubic-bezier(.2,.7,.2,1); }
@keyframes datoEntra { from { opacity: 0; transform: translateY(6px); } }
.dato .dk { display: flex; justify-content: space-between; align-items: center; font: 500 10px/1 var(--mono); letter-spacing: .16em; color: #8A95A2; }
.dato .de { color: var(--aviso); border: 1px solid #4A3C22; border-radius: 999px; padding: 3px 7px; font-size: 9px; letter-spacing: .12em; }
.dato .de[hidden] { display: none; }
.dato .dv { margin-top: 10px; font: 300 30px/1.05 var(--display); color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dato .dt { margin: 6px 0 0; font: 400 13px/1.45 var(--texto); color: #C4CCD5; }
.dato .dpie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.dato .dpie small { font: 400 10px/1.4 var(--mono); color: #6F7B88; letter-spacing: .02em; }
.dato .dpuntos { display: inline-flex; align-items: center; gap: 5px; padding: 6px 4px; margin: -6px -4px; cursor: pointer; }
.dato .dpuntos b { font: 500 13px/1 var(--mono); color: var(--accent); padding: 0 3px; }
.dato .dpuntos .dfijo { font-size: 10px; color: #8A95A2; }
.dato.fijo { border-color: rgba(156,195,228,.55); }
.dato .dpuntos { display: flex; gap: 4px; flex: none; }
.dato .dpuntos i { width: 4px; height: 4px; border-radius: 50%; background: rgba(156,195,228,.25); }
.dato .dpuntos i.on { background: var(--accent); }
body.sin-cortes #directo { display: block; }
body.sin-cortes #directo h2, body.sin-cortes #lista, body.sin-cortes #espera { display: none; }
body.estrecho .dato { display: none; }
@media (prefers-reduced-motion: reduce) { .dato.entra { animation: none; } }
/* 22 Oct 2026 (owner: «más información de cada satélite, siempre real»): the satellite card, label and value in two columns */
.sat-ficha.sat { width: min(360px, calc(100vw - 32px)); padding: 12px 14px; gap: 6px; }
.sat-ficha.sat b { font-size: 14px; letter-spacing: .01em; }
.sat-ficha.sat span { max-width: none; white-space: normal; }
.sat-dl { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; margin: 4px 0 0; }
.sat-dl dt { color: var(--muted); font: 400 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.sat-dl dd { margin: 0; color: var(--fg); font: 400 12px/1.4 var(--texto); font-variant-numeric: tabular-nums; }
.sat-ficha.sat small { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(156,195,228,.18); color: var(--muted); font: 400 10px/1.4 var(--mono); }
/* 22 Oct 2026: one orbit at a time, and a line on what that orbit is (measured on the satellites shown) */
.sat-fase { position: absolute; left: 50%; top: 116px; transform: translateX(-50%); width: max-content; max-width: min(640px, calc(100vw - 32px)); padding: 7px 16px; border-radius: 14px; border: 1px solid rgba(156,195,228,.22); background: rgba(8,11,16,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font: 400 11px/1.4 var(--mono); color: var(--muted); letter-spacing: .02em; text-align: center; text-wrap: balance; }
.sat-fase[hidden] { display: none; }
body.dentro .sat-fase { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .sat-fase { position: static; transform: none; order: 5; width: 100%; white-space: normal; border-radius: 14px; } }

/* «Mi conexión» (22 Oct 2026): your world, in a card on the right; two labels say where certainty ends */
.conexion-btn[aria-pressed="true"] { color: var(--fg); border-color: #3A4656; background: rgba(156,195,228,.1); }
.conexion { position: fixed; top: 74px; right: 40px; width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 100px); overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(10,14,20,.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,.45); z-index: 31; scrollbar-width: thin; }
.conexion[hidden] { display: none; }
.conexion .titulo { display: flex; justify-content: space-between; align-items: center; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8A95A2; padding: 2px 0 6px; }
.conexion .acciones { display: flex; gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid var(--line); text-transform: none; letter-spacing: 0; }
.conexion .acciones button { all: unset; cursor: pointer; padding: 4px 10px; border-radius: 999px; font: 500 11px/1 var(--texto); color: var(--muted); }
.conexion .acciones button[aria-pressed="true"] { color: var(--fg); background: rgba(156,195,228,.16); }
.conexion .bloque { padding: 8px 0 10px; border-top: 1px solid var(--line); }
.conexion .bloque:first-child { border-top: 0; }
.conexion h3 { margin: 0 0 6px; font: 600 13px/1.3 var(--texto); color: var(--fg); }
.conexion .sat-dl { grid-template-columns: minmax(96px, max-content) 1fr; }
.conexion .sat-dl dd { color: var(--fg); }
.conexion .et { font: 500 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; padding: 2px 5px; border-radius: 4px; vertical-align: 1px; white-space: nowrap; }
.conexion .et.medido, .conexion .et.verificado { color: #9CC3E4; background: rgba(156,195,228,.12); }
.conexion .et.estimado { color: var(--aviso); background: var(--aviso-suave); }
.conexion .nota { margin: 6px 0 0; font: 400 11.5px/1.4 var(--texto); color: var(--muted); }
.conexion .medir { all: unset; cursor: pointer; display: inline-block; margin-top: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font: 600 12px/1 var(--texto); }
.conexion .medir:hover:not(:disabled) { background: var(--accent); color: var(--accent-fg); }
.conexion .medir:disabled { opacity: .5; cursor: default; }
.conexion .pie { margin: 4px 0 0; font: 400 10.5px/1.4 var(--mono); color: #8A95A2; }
.conexion button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.dentro .conexion { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .conexion { top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-width: none; max-height: 70vh; border-radius: 16px 16px 0 0; } }
/* while «Mi conexión» is open the planet is empty of everything that is not the visitor's: the layer buttons rest */
body.solo-tu #capas, body.solo-tu #sat-vista, body.solo-tu #sat-fase, body.solo-tu #capa-nota, body.solo-tu #directo { opacity: .25 !important; pointer-events: none; }
/* the small list of data centres under a crowded spot (22 Oct 2026) */
.lista-cerca { position: fixed; z-index: 33; width: 300px; max-width: calc(100vw - 16px); max-height: min(60vh, 460px); display: flex; flex-direction: column; padding: 10px 12px 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(10,14,20,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.lista-cerca .titulo { font: 600 13px/1.3 var(--texto); color: var(--fg); padding-right: 22px; }
.lista-cerca .pista { margin: 2px 0 6px; font: 400 11px/1.4 var(--texto); color: var(--muted); }
.lista-cerca .filas { overflow: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 1px; margin: 0 -6px; }
.lista-cerca .filas button { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 1px; padding: 7px 8px; border-radius: 8px; }
.lista-cerca .filas button b { font: 500 12.5px/1.25 var(--texto); color: var(--fg); }
.lista-cerca .filas button span { font: 400 10.5px/1.2 var(--mono); color: #8A95A2; }
.lista-cerca .filas button:hover, .lista-cerca .filas button:focus-visible { background: rgba(156,195,228,.12); outline: none; }
.lista-cerca .cerrar { all: unset; cursor: pointer; position: absolute; top: 6px; right: 10px; font: 400 18px/1 var(--texto); color: #8A95A2; padding: 2px 4px; }
.lista-cerca .cerrar:hover { color: var(--fg); }
/* altitude gauge beside the zoom rail (22 Oct 2026) */
.altura { position: fixed; right: calc(64px + env(safe-area-inset-right, 0px)); top: max(124px, calc(50% - 300px)); width: 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 4; opacity: 0; transition: opacity .8s 1.6s; pointer-events: none; }
body.listo .altura { opacity: 1; }
.altura .k { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8A95A2; }
.altura .barra { position: relative; width: 2px; height: 140px; margin: 4px 0; background: linear-gradient(#2A3442, #3A4656); border-radius: 2px; }
.altura .barra b { position: absolute; left: 10px; font: 400 9.5px/1 var(--mono); color: #7A8591; white-space: nowrap; }
.altura .barra b:first-child { top: 1px; } .altura .barra b:last-of-type { bottom: 1px; }
.altura .barra i { position: absolute; left: -4px; top: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #9CC3E4; box-shadow: 0 0 8px rgba(156,195,228,.8); transition: top .15s linear; }
.altura .v { display: none; } /* 22 Oct 2026, 22:07 (owner): no fixed «≈ 40.000 km» under the bar; the height travels beside the dot */
.altura .barra i .vv { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 500 11px/1 var(--mono); color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 0 6px rgba(6,8,12,.9); pointer-events: none; }
body.dentro .altura { opacity: 0; pointer-events: none; transition: opacity .3s; } /* 22 Oct 2026, 22:24: gone at once when a door opens (it lingered 2 s over ZERO) */
@media (max-width: 760px) { .altura { display: none; } }

/* 22 Oct 2026, 13:54 (owner): «cuando entramos dentro del planeta, los botoneros de arriba que no se vean» — from ×8 the
   layer buttons and the satellite filter disappear; they come back as you zoom out. */
/* 22 Oct 2026, 21:35 (owner): deep in, the layer buttons do not go away any more — they stay, faint, and light up under
   the pointer, so the layers can be switched at any zoom («tiene que estar en todo momento difuminada») */
body.hondo:not(.dentro) #capas, body.hondo:not(.dentro) #sat-vista, body.hondo:not(.dentro) #sat-fase { opacity: .16; transition: opacity .3s; }
body.hondo:not(.dentro) header:hover #capas, body.hondo:not(.dentro) header:focus-within #capas, body.hondo:not(.dentro) header:hover #sat-vista, body.hondo:not(.dentro) header:focus-within #sat-vista, body.hondo:not(.dentro) header:hover #sat-fase, body.hondo:not(.dentro) header:focus-within #sat-fase, body.hondo:not(.dentro) #sat-vista:hover, body.hondo:not(.dentro) #sat-fase:hover { opacity: 1; }

/* «Por dónde viajan tus datos» (22 Oct 2026): the measured list is long; keep it tight and let the labels wrap */
.conexion .rutas .sat-dl { grid-template-columns: minmax(118px, max-content) 1fr; row-gap: 3px; }
.conexion .rutas .sat-dl dd { font-variant-numeric: tabular-nums; }

/* ---------- Ficha completa (22 Oct 2026): the panel that opens on click, with sections that unfold ---------- */
.ficha-panel { position: fixed; top: 74px; right: 40px; width: 400px; max-width: calc(100vw - 32px); max-height: calc(100vh - 100px); overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(10,14,20,.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,.45); z-index: 32; scrollbar-width: thin; color: var(--fg); }
.ficha-panel[hidden] { display: none; }
.ficha-panel.suelto { right: auto; }
body.con-conexion .ficha-panel.suelto, .conexion:not([hidden]) ~ .ficha-panel.suelto { right: auto; }
body.con-conexion .ficha-panel, .conexion:not([hidden]) ~ .ficha-panel { right: 420px; }
.ficha-panel .asa { display: none; }
.ficha-panel .cab { display: flex; justify-content: space-between; align-items: center; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8A95A2; }
.ficha-panel .botones button { all: unset; cursor: pointer; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--muted); font: 500 16px/1 var(--texto); }
.ficha-panel .botones button:hover { color: var(--fg); background: rgba(156,195,228,.12); }
.ficha-panel .botones button[hidden] { display: none; }
.ficha-panel .tit { margin: 2px 0 0; font: 600 17px/1.25 var(--texto); color: var(--fg); text-wrap: balance; }
.ficha-panel .sub { margin: 0 0 4px; font: 400 12px/1.4 var(--texto); color: var(--muted); }
.ficha-panel .sub[hidden] { display: none; }
.ficha-panel .sat-dl { grid-template-columns: minmax(104px, max-content) 1fr; row-gap: 4px; }
.ficha-panel .sat-dl dd { color: var(--fg); }
.ficha-panel .sat-dl dd.ancho { grid-column: 1 / -1; }
.ficha-panel .sat-dl dt:empty { display: none; }
.ficha-panel .secs { display: flex; flex-direction: column; margin-top: 4px; border-top: 1px solid var(--line); }
.ficha-panel details { border-bottom: 1px solid var(--line); }
.ficha-panel summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font: 600 12.5px/1.3 var(--texto); color: var(--fg); }
.ficha-panel summary::-webkit-details-marker { display: none; }
.ficha-panel summary::after { content: '+'; color: var(--muted); font: 400 15px/1 var(--mono); }
.ficha-panel details[open] summary::after { content: '−'; }
.ficha-panel details > .sat-dl, .ficha-panel details > .texto { padding: 0 0 10px; }
.ficha-panel .texto { margin: 0; font: 400 12.5px/1.5 var(--texto); color: var(--fg); }
.ficha-panel .acciones { display: flex; gap: 8px; margin-top: 8px; }
.ficha-panel .acciones button { all: unset; cursor: pointer; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font: 600 12px/1 var(--texto); }
.ficha-panel .acciones button:hover { background: var(--accent); color: var(--accent-fg); }
.ficha-panel .acciones button:focus-visible, .ficha-panel .botones button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ficha-panel .pie { margin: 6px 0 0; font: 400 10.5px/1.4 var(--mono); color: #8A95A2; }
body.dentro .ficha-panel { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .ficha-panel { top: auto; bottom: 0; left: 0; right: 0 !important; width: 100%; max-width: none; height: 46vh; max-height: 90vh; border-radius: 16px 16px 0 0; padding-top: 6px; transition: height .25s; }
  .ficha-panel.alta { height: 88vh; }
  .ficha-panel .asa { display: block; width: 44px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: rgba(156,195,228,.4); cursor: pointer; }
}
@media print {
  body.imprime-ficha > *:not(#ficha-panel) { display: none !important; }
  body.imprime-ficha { background: #fff; }
  body.imprime-ficha #ficha-panel { position: static; width: auto; max-width: none; max-height: none; overflow: visible; border: 0; box-shadow: none; background: #fff; color: #000; backdrop-filter: none; }
  body.imprime-ficha #ficha-panel .tit, body.imprime-ficha #ficha-panel .texto, body.imprime-ficha #ficha-panel .sat-dl dd, body.imprime-ficha #ficha-panel summary { color: #000; }
  body.imprime-ficha #ficha-panel .acciones, body.imprime-ficha #ficha-panel .botones, body.imprime-ficha #ficha-panel .asa { display: none; }
  body.imprime-ficha #ficha-panel summary::after { content: ''; }
}

/* ---------- El viaje de tus datos (22 Oct 2026): the HUD over the planet, and the report ---------- */
body.viaje header, body.viaje #capas, body.viaje #puertas, body.viaje #directo, body.viaje .zoom, body.viaje .altura, body.viaje .conexion, body.viaje .ficha-panel, body.viaje .sat-ficha, body.viaje #capa-nota, body.viaje #sat-vista { opacity: 0 !important; pointer-events: none !important; transition: opacity .4s; }
#viaje { position: fixed; inset: 0; z-index: 40; pointer-events: none; font-family: var(--texto); color: var(--fg); }
#viaje[hidden] { display: none; }
/* 23 Oct 2026, 10:43 (owner): at the journey's summary the planet is the person's again: turn it, zoom it; the zoom rail and the altitude come back */
body.viaje:not(.viaje-fin) #escena { pointer-events: none; } /* during the show the camera leads; the HUD rules now hang from #viaje, not from any .viaje (body.viaje took them and the whole page stopped answering the pointer) */
body.viaje.viaje-fin .zoom { opacity: 1 !important; pointer-events: auto !important; transition-delay: 0s; }
body.viaje.viaje-fin .altura { opacity: 1 !important; transition-delay: 0s; }
/* 23 Oct 2026: the counters stay legible over bright land when the camera is close: a soft dark band behind them, as in a film's lower third */
#viaje::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 290px; background: linear-gradient(to top, rgba(6,8,12,.86) 0%, rgba(6,8,12,.55) 48%, rgba(6,8,12,0) 100%); pointer-events: none; }
#viaje .destino, #viaje .cifras b, #viaje .luz, #viaje .fin .t, #viaje .fin .d, #viaje .sub { text-shadow: 0 0 2px rgba(6,8,12,.9), 0 1px 14px rgba(6,8,12,.85); }
#viaje .arriba { position: absolute; left: 28px; top: 22px; }
#viaje .k { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
#viaje .sub { margin: 6px 0 0; font: 400 11px/1.4 var(--mono); color: #A9B3BE; }
#viaje .centro { position: absolute; left: 0; right: 0; bottom: 70px; text-align: center; transition: opacity .5s; }
#viaje .destino { margin: 0 0 6px; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; color: #A9B3BE; }
#viaje .cifras { display: flex; justify-content: center; gap: 48px; }
#viaje .cifras b { display: block; font: 600 46px/1 var(--texto); color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
#viaje .cifras span { display: block; margin-top: 4px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8A95A2; }
#viaje .luz { margin: 12px 0 0; font: 500 12px/1.4 var(--mono); color: var(--accent); transition: opacity .6s; }
#viaje .abajo { position: absolute; right: 28px; bottom: 24px; display: flex; gap: 8px; pointer-events: auto; }
#viaje button { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: #C4CCD5; font: 500 12px/1 var(--texto); background: rgba(12,17,24,.6); }
#viaje button:hover { color: var(--fg); border-color: rgba(156,195,228,.5); }
#viaje .fin { position: absolute; left: 0; right: 0; bottom: 70px; text-align: center; pointer-events: auto; }
#viaje .fin[hidden] { display: none; }
#viaje .fin .t { margin: 0; font: 600 30px/1.2 var(--texto); color: var(--fg); }
#viaje .fin .d { margin: 8px 0 16px; font: 400 12px/1.5 var(--mono); color: #A9B3BE; }
#viaje .fin .botones { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
#viaje .fin .informe, #viaje .fin .video { border-color: var(--accent); color: var(--accent); }
#viaje .fin .informe:hover, #viaje .fin .video:hover { background: var(--accent); color: var(--accent-fg); }
#viaje .fin .video[hidden] { display: none; }
.informe { position: fixed; inset: 0; z-index: 45; overflow: auto; background: #06080C; color: var(--fg); padding: 32px max(24px, 6vw) 48px; font-family: var(--texto); scrollbar-width: thin; }
.informe .cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.informe .cab .k { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--accent); }
.informe .cab .t { margin: 8px 0 6px; font: 600 38px/1.1 var(--texto); letter-spacing: -.01em; }
.informe .cab .s { margin: 0; font: 400 12px/1.5 var(--mono); color: #A9B3BE; max-width: 70ch; }
.informe .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.informe .acciones small { flex-basis: 100%; font: 400 10.5px/1.4 var(--mono); color: #8A95A2; }
.informe .acciones button { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font: 600 12px/1 var(--texto); }
.informe .acciones button:hover { background: var(--accent); color: var(--accent-fg); }
.informe figure { margin: 0 0 22px; }
.informe figure canvas { display: block; border-radius: 14px; border: 1px solid var(--line); }
.informe figcaption { margin-top: 8px; font: 400 11px/1.5 var(--mono); color: #8A95A2; }
.informe .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 22px; }
.informe .cifras div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(12,17,24,.6); }
.informe .cifras b { display: block; font: 600 30px/1.1 var(--texto); color: var(--fg); font-variant-numeric: tabular-nums; }
.informe .cifras span { display: block; margin-top: 6px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8A95A2; }
.informe .dos { display: grid; grid-template-columns: minmax(280px, 460px) minmax(300px, 1fr); gap: 28px; align-items: start; margin-bottom: 22px; }
.informe .texto h2 { margin: 0 0 8px; font: 600 15px/1.3 var(--texto); }
.informe .texto p { margin: 0 0 14px; font: 400 13.5px/1.6 var(--texto); color: var(--fg); max-width: 62ch; }
.informe table { width: 100%; border-collapse: collapse; font: 400 12px/1.4 var(--mono); margin-bottom: 22px; }
.informe th, .informe td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.informe th { font-weight: 500; color: #8A95A2; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }
.informe .pie { margin: 0; font: 400 10.5px/1.5 var(--mono); color: #8A95A2; }
@media (max-width: 1000px) { .informe .dos { grid-template-columns: 1fr; } .informe .cab .t { font-size: 28px; } }
#viaje.final .abajo { display: none; }
@media print {
  body.imprime-informe > *:not(#informe) { display: none !important; }
  body.imprime-informe { background: #06080C; }
  body.imprime-informe #informe { position: static; overflow: visible; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.imprime-informe #informe .acciones { display: none; }
  body.imprime-informe #informe figure, body.imprime-informe #informe .cifras, body.imprime-informe #informe table { break-inside: avoid; }
  @page { background: #06080C; margin: 12mm; }
}

/* 22 Oct 2026, 22:21 (owner: «un check verde-rojo… de la máxima calidad… que se vea cómo se activa y cómo se desactiva,
   sutil y bonito»): every on/off in the layer bar and in its cards is a small switch. On: green, the knob to the right with
   a tick. Off: red, the knob to the left with a cross. Tinted glass tracks, so it stays quiet on the dark header. */
:root { --si: 95,203,147; --no: 224,122,108; }
.capas button i, .sat-vista .orb button i { --w: 26px; --h: 15px; --k: 11px; position: relative; flex: none; box-sizing: border-box; width: var(--w); height: var(--h); margin: 0; align-self: center; border-radius: 999px; border: 1px solid rgba(var(--no),.5); background: rgba(var(--no),.12); box-shadow: none; transition: background .25s, border-color .25s, box-shadow .25s; }
.capas button i { --w: 23px; --h: 13px; --k: 9px; }
.capas button i::before, .sat-vista .orb button i::before { content: ""; position: absolute; top: 1px; left: 1px; width: var(--k); height: var(--k); border-radius: 50%; background: rgb(var(--no)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2.5 2.5l3 3M5.5 2.5l-3 3' fill='none' stroke='%2306080C' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / 78% no-repeat; box-shadow: 0 1px 2px rgba(0,0,0,.4); transition: transform .28s cubic-bezier(.3,.75,.25,1), background-color .25s; }
.capas button[aria-pressed="true"] i, .sat-vista .orb button[aria-pressed="true"] i { border-color: rgba(var(--si),.62); background: rgba(var(--si),.16); box-shadow: 0 0 10px rgba(var(--si),.16); }
.capas button[aria-pressed="true"] i::before, .sat-vista .orb button[aria-pressed="true"] i::before { transform: translateX(calc(var(--w) - var(--k) - 4px)); background: rgb(var(--si)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.7 4.2l1.5 1.5 3.1-3.4' fill='none' stroke='%2306080C' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat; }
.capas button:hover i, .sat-vista .orb button:hover i { border-color: rgba(var(--no),.75); }
.capas button[aria-pressed="true"]:hover i, .sat-vista .orb button[aria-pressed="true"]:hover i { border-color: rgba(var(--si),.85); }
.sat-vista .orb button { grid-template-columns: 26px 1fr; align-items: center; }
@media (prefers-reduced-motion: reduce) { .capas button i::before, .sat-vista .orb button i::before { transition: none; } }
.sat-vista .orb button:disabled { opacity: .38; cursor: default; } /* 22 Oct 2026, 22:48: a refinement whose class is off (Compañías pequeñas without Centros de datos) */
.sat-vista .orb button:disabled:hover { background: none; }

/* «Mi conexión» (23 Oct 2026, owner + agency): the journey heads the panel; a quiet close instead of «Ver / No ver» */
.conexion .titulo .cerrar { all: unset; cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px; margin: -6px -6px -6px 0; border-radius: 999px; color: #8A95A2; transition: color .15s, background .15s; }
.conexion .titulo .cerrar:hover { color: var(--fg); background: rgba(156,195,228,.1); }
.conexion .bloque.viaje-cta { padding: 12px 14px 14px; margin: 2px 0 6px; border: 1px solid rgba(156,195,228,.28); border-radius: 12px; background: linear-gradient(180deg, rgba(156,195,228,.11), rgba(156,195,228,.03)); }
.conexion .viaje-cta .k { display: block; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.conexion .viaje-cta .nota { margin-top: 7px; color: #C4CCD6; }
.conexion .viaje-cta .nota.aviso { color: var(--aviso); }
.conexion .viaje-cta .fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 11px; }
.conexion .viaje-cta .medir { margin-top: 0; }
.conexion .medir.principal { background: var(--accent); color: var(--accent-fg); }
.conexion .medir.principal:hover:not(:disabled) { background: var(--accent); color: var(--accent-fg); filter: brightness(1.08); }
.conexion .medir.principal:disabled { opacity: .75; font-variant-numeric: tabular-nums; }
.conexion .medir.secundario { border-color: var(--line); color: var(--fg); }
.conexion .medir.secundario:hover { background: rgba(156,195,228,.1); color: var(--fg); border-color: var(--accent); }

/* the info card can be dragged on a computer (23 Oct 2026, owner) */
@media (pointer: fine) and (min-width: 760px) {
  .ficha-panel { cursor: grab; }
  .ficha-panel.moviendo, .ficha-panel.moviendo * { cursor: grabbing !important; user-select: none; }
  .ficha-panel.moviendo { box-shadow: 0 18px 50px rgba(0,0,0,.55); transition: none; }
}

/* «¿Sabías que…?» (23 Oct 2026, owner): one dot per card that shows it under the pointer; 13:20: «una flecha a la derecha
   y otra a la izquierda, de diseño, bien bonita» with the hand on hover: two round glass buttons at the ends, a thin
   chevron that leans the way it goes, the dots between them */
.dato .dpie { flex-wrap: wrap; row-gap: 10px; }
.dato .dpuntos { width: 100%; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; flex: 1 1 100%; cursor: default; }
.dato .dpts { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 2px; }
.dato .dflecha { all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: var(--accent); border: 1px solid rgba(156,195,228,.32); background: linear-gradient(180deg, rgba(156,195,228,.13), rgba(156,195,228,.03)); box-shadow: inset 0 1px 0 rgba(244,246,248,.08), 0 6px 16px rgba(0,0,0,.35); transition: color .2s, border-color .2s, background .2s, box-shadow .25s, transform .12s; -webkit-tap-highlight-color: transparent; }
.dato .dflecha svg { width: 15px; height: 15px; display: block; pointer-events: none; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.dato .dflecha:hover { color: #F4F6F8; border-color: rgba(156,195,228,.78); background: linear-gradient(180deg, rgba(156,195,228,.28), rgba(156,195,228,.10)); box-shadow: inset 0 1px 0 rgba(244,246,248,.14), 0 0 0 4px rgba(156,195,228,.10), 0 0 22px rgba(156,195,228,.30); }
.dato .datras:hover svg { transform: translateX(-2px); }
.dato .dsig:hover svg { transform: translateX(2px); }
.dato .dflecha:active { transform: scale(.92); }
.dato .dflecha:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[dir="rtl"] .dato .dflecha svg { transform: scaleX(-1); }
[dir="rtl"] .dato .datras:hover svg { transform: scaleX(-1) translateX(-2px); }
[dir="rtl"] .dato .dsig:hover svg { transform: scaleX(-1) translateX(2px); }
/* the dots share the space between the arrows on one line (they narrow rather than wrap); the current card is a short
   lit bar */
.dato .dpts { flex-wrap: nowrap; }
.dato .dpts i, .dato .dpts i.on { flex: 0 1 9px; min-width: 5px; width: auto; height: 16px; padding: 0; border-radius: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.dato .dpts i::before { content: ""; width: 4px; height: 4px; border-radius: 2px; background: rgba(156,195,228,.28); transition: width .3s cubic-bezier(.2,.7,.2,1), background .2s, transform .15s, box-shadow .3s; }
.dato .dpts i:hover::before { transform: scale(1.5); background: rgba(156,195,228,.65); }
.dato .dpts i.on { flex-basis: 18px; min-width: 14px; }
.dato .dpts i.on::before { width: 12px; background: var(--accent); box-shadow: 0 0 8px rgba(156,195,228,.55); }
.dato .dpts i.on:hover::before { transform: none; }
@media (prefers-reduced-motion: reduce) { .dato .dflecha, .dato .dflecha svg { transition: color .2s, border-color .2s, background .2s; } .dato .datras:hover svg, .dato .dsig:hover svg { transform: none; } [dir="rtl"] .dato .datras:hover svg, [dir="rtl"] .dato .dsig:hover svg { transform: scaleX(-1); } }

/* layer cards: a clear «Minimizar» instead of the bare dash (23 Oct 2026, owner) */
.sat-vista .orb .titulo .plegar, .sat-vista .titulo .plegar { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; margin: -4px -6px -4px 8px; border: 1px solid var(--line); border-radius: 999px; color: #A9B4C0; font: 500 10.5px/1 var(--texto); letter-spacing: 0; text-transform: none; transition: color .15s, border-color .15s, background .15s; }
.sat-vista .orb .titulo .plegar:hover, .sat-vista .titulo .plegar:hover { color: var(--fg); border-color: rgba(156,195,228,.5); background: rgba(156,195,228,.1); }
.sat-vista .orb .titulo .plegar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ESPEJO, «Con / Sin GUARDIANA» (owner, 23 Oct 2026): two buttons under the planet; pressing one turns the planet into
   the measurement of eleven sports and news sites. Left: what was measured; bottom: the choice; right, on demand: the list. */
.espejo-modo { position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transition: opacity .8s 1.9s; }
.listo .espejo-modo { opacity: 1; }
.espejo-modo .pre { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8A95A2; white-space: nowrap; transition: opacity .3s; }
body.en-espejo .espejo-modo .pre { opacity: 0; height: 0; margin-top: -8px; overflow: hidden; }
.espejo-modo .seg { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(12,17,24,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.espejo-modo [data-modo] { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px 10px 14px; border-radius: 999px; font: 600 13px/1 var(--texto); color: var(--muted); white-space: nowrap; transition: color .2s, background .2s, box-shadow .2s; }
.espejo-modo [data-modo] i { width: 8px; height: 8px; border-radius: 50%; border: 1.4px solid currentColor; transition: background .2s, box-shadow .2s; }
.espejo-modo [data-modo]:hover { color: var(--fg); background: rgba(156,195,228,.08); }
.espejo-modo [data-modo="sin"][aria-checked="true"] { color: var(--fg); background: rgba(156,195,228,.16); }
.espejo-modo [data-modo="sin"][aria-checked="true"] i { background: #9CC3E4; border-color: #9CC3E4; box-shadow: 0 0 10px rgba(156,195,228,.9); }
.espejo-modo [data-modo="con"][aria-checked="true"] { color: var(--accent-fg); background: var(--accent); }
.espejo-modo [data-modo="con"][aria-checked="true"] i { background: var(--accent-fg); border-color: var(--accent-fg); }
.espejo-modo [data-modo]:focus-visible, .espejo-modo .salir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.espejo-modo .salir { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 2px; border-radius: 50%; color: var(--muted); border: 1px solid transparent; }
.espejo-modo .salir:hover { color: var(--fg); border-color: var(--line); }
.espejo-modo .salir[hidden] { display: none; }
body.dentro .espejo-modo, body.viaje .espejo-modo, body.con-informe .espejo-modo { opacity: 0 !important; pointer-events: none; }
/* 23 Oct 2026, 15:05 (owner): the mirror lives in Radiografías › «Una web»; the front page's bottom is left to the person's
   own data, and «Sin / Con» only shows while the mirror is open (hidden, so nothing below the planet counts it either) */
body:not(.en-espejo) .espejo-modo { opacity: 0 !important; visibility: hidden; pointer-events: none; }
body.en-espejo .espejo-modo { transition: opacity .35s .1s; } /* the arrival's long delay is for the first visit, not for opening the mirror */
body.solo-tu:not(.espejo-hud) .espejo-modo .pre { opacity: .35; }
/* the layer note moves up while the two buttons sit at the bottom */
.capa-nota { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }

/* the mirror open: a clean planet and its own instruments */
body.en-espejo #directo, body.en-espejo #puertas, body.en-espejo #capas, body.en-espejo #sat-vista, body.en-espejo #sat-fase, body.en-espejo #capa-nota, body.en-espejo #ficha, body.en-espejo .sat-ficha, body.en-espejo .ficha-panel, body.en-espejo .altura { opacity: 0 !important; pointer-events: none !important; transition: opacity .4s; }
body.en-espejo #estado { opacity: .35; }
.espejo-hud { position: fixed; left: calc(40px + env(safe-area-inset-left, 0px)); top: max(104px, calc(50% - 330px)); width: 300px; max-height: calc(100vh - 140px); overflow: auto; z-index: 20; display: flex; flex-direction: column; gap: 12px; scrollbar-width: none; animation: espejo-entra .6s cubic-bezier(.2,.7,.2,1); }
.espejo-hud::-webkit-scrollbar { display: none; }
.espejo-hud[hidden] { display: none; }
@keyframes espejo-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.espejo-hud .k { display: flex; gap: 8px; align-items: center; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8A95A2; }
.espejo-hud .k .sep { color: #4A5664; }
.espejo-hud .t { margin: 0; font: 650 30px/1.05 var(--texto); letter-spacing: -.01em; color: var(--fg); text-shadow: 0 2px 18px rgba(6,8,12,.9); text-wrap: balance; }
.espejo-hud.con .t { color: var(--accent); }
.espejo-hud .d2 { display: none; }
.espejo-hud .d { margin: 0; font: 400 13px/1.5 var(--texto); color: #B4BEC9; text-shadow: 0 1px 10px rgba(6,8,12,.95); max-width: 34ch; }
.espejo-hud .cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.espejo-hud .cifras div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.espejo-hud .cifras b { font: 650 28px/1 var(--texto); font-variant-numeric: tabular-nums; color: var(--fg); letter-spacing: -.01em; }
.espejo-hud .cifras .rojo b { color: var(--alerta); }
.espejo-hud .cifras span { font: 500 9.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8A95A2; }
.espejo-hud .sitios { display: flex; flex-wrap: wrap; gap: 5px; }
.espejo-hud .sitios button { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(12,17,24,.6); font: 500 11.5px/1 var(--texto); color: var(--muted); white-space: nowrap; transition: color .2s, border-color .2s, background .2s; }
.espejo-hud .sitios button small { font: 500 9px/1 var(--mono); letter-spacing: .06em; color: #6F7B88; }
.espejo-hud .sitios button:hover { color: var(--fg); border-color: #3A4656; }
.espejo-hud .sitios button[aria-checked="true"] { color: var(--fg); border-color: rgba(156,195,228,.6); background: rgba(156,195,228,.14); }
.espejo-hud .sitios button:focus-visible, .espejo-hud .ver:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.espejo-hud .paises .k2 { font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8A95A2; margin-bottom: 8px; }
.espejo-hud .paises ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.espejo-hud .paises li { display: grid; grid-template-columns: 112px 1fr 52px; align-items: center; gap: 10px; font: 500 12px/1.2 var(--texto); color: #C4CCD5; }
.espejo-hud .paises .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.espejo-hud .paises .barra { position: relative; display: flex; height: 6px; border-radius: 3px; background: rgba(30,38,49,.8); overflow: hidden; }
.espejo-hud .paises .barra i { display: block; height: 100%; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.espejo-hud .paises .barra .q { background: var(--accent); }
.espejo-hud .paises .barra .k { background: var(--alerta); opacity: .85; }
.espejo-hud .paises .v { text-align: right; font: 500 11px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.espejo-hud .ver { all: unset; cursor: pointer; align-self: flex-start; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font: 600 12px/1 var(--texto); }
.espejo-hud .ver:hover { background: var(--accent); color: var(--accent-fg); }
.espejo-hud .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.espejo-hud .met { margin: 0; font: 400 10.5px/1.5 var(--mono); color: #7C8794; }
/* «Descargar» (owner, 23 Oct 2026, 15:50): one small button on each panel that shows measurements, and its menu */
.descargar { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font: 500 12px/1 var(--texto); letter-spacing: 0; text-transform: none; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.descargar:hover, .descargar[aria-expanded="true"] { color: var(--fg); border-color: #3A4656; background: rgba(156,195,228,.1); }
.descargar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.descargar svg { flex: none; }
.descargar-menu { position: fixed; z-index: 80; width: 232px; padding: 6px; display: flex; flex-direction: column; gap: 2px; border-radius: 14px; border: 1px solid var(--line); background: rgba(10,14,20,.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,.5); animation: descargar-entra .16s ease-out; }
.descargar-menu button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 10px; }
.descargar-menu button b { font: 600 12.5px/1.2 var(--texto); color: var(--fg); }
.descargar-menu button small { font: 400 11px/1.3 var(--texto); color: var(--muted); }
.descargar-menu button:hover, .descargar-menu button:focus-visible { background: rgba(156,195,228,.12); }
.descargar-menu button:focus-visible { outline: 1px solid rgba(156,195,228,.6); outline-offset: -1px; }
.descargar-menu button:disabled { opacity: .5; cursor: progress; }
.descargar-menu p { margin: 4px 0 0; padding: 8px 11px 4px; border-top: 1px solid var(--line); font: 400 10px/1.4 var(--mono); color: #7C8794; }
@keyframes descargar-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .descargar-menu { animation: none; } }
.conexion .titulo .descargar { margin-left: auto; margin-right: 8px; padding: 5px 10px; font-size: 11px; }
.espejo-hud .met b { font-weight: 500; color: var(--accent); white-space: nowrap; }
.espejo-lista { position: fixed; top: 96px; right: calc(96px + env(safe-area-inset-right, 0px)); width: 340px; max-width: calc(100vw - 32px); max-height: calc(100vh - 230px); overflow: auto; z-index: 31; display: flex; flex-direction: column; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(10,14,20,.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,.45); scrollbar-width: thin; }
.espejo-lista[hidden] { display: none; }
.espejo-lista .titulo { position: sticky; top: -12px; display: flex; justify-content: space-between; align-items: center; margin: -12px -14px 4px; padding: 12px 14px 8px; background: rgba(10,14,20,.96); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8A95A2; }
.espejo-lista .cerrar { all: unset; cursor: pointer; display: inline-flex; padding: 4px; border-radius: 6px; color: var(--muted); }
.espejo-lista .cerrar:hover { color: var(--fg); background: rgba(156,195,228,.1); }
.espejo-lista .grupo { padding: 8px 0; border-top: 1px solid var(--line); }
.espejo-lista h3 { display: flex; justify-content: space-between; margin: 0 0 6px; font: 600 13px/1.3 var(--texto); color: var(--fg); }
.espejo-lista h3 span { font: 500 11px/1.3 var(--mono); color: var(--muted); }
.espejo-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.espejo-lista li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.espejo-lista li b { font: 500 12.5px/1.3 var(--texto); color: #DDE3EA; }
.espejo-lista li .cats { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.espejo-lista li .cats i, .espejo-lista li .cats em { font: 500 9px/1 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: 3px 5px; border-radius: 4px; color: #8A95A2; background: rgba(30,38,49,.8); white-space: nowrap; }
.espejo-lista li .cats i.corta { color: #C9A9A3; }
.espejo-lista li .cats em.corte { color: var(--alerta); background: var(--alerta-suave); }
.espejo-lista li .cats em.parte { color: #E0B66A; background: rgba(224,182,106,.1); }
.espejo-lista li .cats em.queda { color: var(--accent); background: rgba(156,195,228,.1); }
.espejo-lista li small { grid-column: 1 / -1; font: 400 10px/1.4 var(--mono); color: #6F7B88; overflow-wrap: anywhere; }
.espejo-lista .met { margin: 10px 0 2px; padding-top: 10px; border-top: 1px solid var(--line); font: 400 10px/1.5 var(--mono); color: #7C8794; }
.espejo-lista .met b { font-weight: 500; color: var(--accent); }
.espejo-lista li.cortada b { color: #8A95A2; text-decoration: line-through; text-decoration-color: rgba(224,122,108,.7); }
@media (max-width: 1100px) { .espejo-hud { width: 268px; } .espejo-hud .t { font-size: 26px; } .espejo-hud .cifras b { font-size: 24px; } }
/* short windows: the bars by country give way (the planet already labels each country), so the method and «Datos verificados» stay in view */
@media (max-height: 860px) and (min-width: 961px) { .espejo-hud .paises { display: none; } }
/* when the planet leaves no room on its left, the instruments become one compact card at the top */
@media (max-width: 960px) {
  .espejo-hud { left: 12px; right: 12px; top: calc(74px + env(safe-area-inset-top, 0px)); width: auto; max-width: 640px; margin: 0 auto; max-height: 40vh; gap: 8px; padding: 10px 12px 12px; border-radius: 16px; background: rgba(8,11,16,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .espejo-hud .t { font-size: 21px; } .espejo-hud .d, .espejo-hud .met, .espejo-hud .paises { display: none; } .espejo-hud .d2 { display: block; margin: -4px 0 0; font: 400 11.5px/1.35 var(--texto); color: #B4BEC9; }
  .espejo-hud .ver { padding: 7px 12px; font-size: 11.5px; }
  .espejo-hud .cifras { padding: 7px 0; gap: 6px; } .espejo-hud .cifras b { font-size: 20px; } .espejo-hud .cifras span { font-size: 8.5px; }
  .espejo-hud .sitios { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .espejo-hud .sitios::-webkit-scrollbar { display: none; }
  .espejo-lista { top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-width: none; max-height: 70vh; border-radius: 16px 16px 0 0; }
}
@media (max-width: 760px) {
  .espejo-modo { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .espejo-modo .pre { font-size: 9px; }
  .espejo-modo [data-modo] { padding: 9px 13px 9px 11px; font-size: 12px; }
  .capa-nota { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  body.en-espejo .espejo-modo { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .espejo-hud { top: calc(108px + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .espejo-hud { animation: none; } .espejo-hud .paises .barra i { transition: none; } }

/* The phrase under the planet (owner, 23 Oct 2026): once per visit, word by word, lit like the website's titles. */
.frase { position: fixed; left: 50%; top: 76%; transform: translate(-50%, 6px); z-index: 6; margin: 0; padding: 0 16px; width: max-content; max-width: min(92vw, 820px); box-sizing: border-box; text-align: center; font: 400 clamp(23px, 2.5vw, 34px)/1.15 'Instrument Serif', Georgia, 'Times New Roman', serif; letter-spacing: -.01em; color: rgba(232,238,245,.13); pointer-events: none; opacity: 0; transition: opacity .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); text-wrap: balance; }
.frase.entra { opacity: 1; transform: translate(-50%, 0); }
.frase.fuera { transition-duration: 1.3s, 1.3s; }
.frase.fuera { opacity: 0; transform: translate(-50%, -4px); }
.frase .fs { display: inline-block; white-space: nowrap; } /* a line breaks only between the two sentences */
.frase.parte .fs { display: inline; white-space: normal; }
.frase .bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; } /* baseline marks for the optical centring */
.frase .fw { transition: color .4s ease, text-shadow .55s ease; }
.frase .fw.m { color: #FFFFFF; text-shadow: 0 0 .32em rgba(156,195,228,.75), 0 0 .9em rgba(156,195,228,.35); }
.frase .fw.on { color: #F4F6F8; text-shadow: 0 0 .5em rgba(6,8,12,.9); }
body.con-frase .espejo-modo .pre { opacity: 0; }
@media (max-width: 760px) { .frase { font-size: 22px; } }
/* the website's own fallbacks where Instrument Serif has no letters */
:lang(ru) .frase, :lang(uk) .frase, :lang(bg) .frase, :lang(el) .frase, :lang(vi) .frase { font-family: 'Times New Roman', Times, 'Liberation Serif', serif; }
:lang(zh-Hans) .frase { font-family: 'Songti SC', 'STSong', 'Noto Serif SC', 'Noto Serif CJK SC', 'Source Han Serif SC', 'SimSun', serif; }
:lang(zh-Hant) .frase { font-family: 'Songti TC', 'Noto Serif TC', 'Noto Serif CJK TC', 'Source Han Serif TC', 'PMingLiU', serif; }
:lang(ja) .frase { font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', 'Noto Serif CJK JP', 'Source Han Serif JP', serif; }
@media (prefers-reduced-motion: reduce) { .frase, .frase .fw { transition: opacity .6s ease; } }

/* ---------- Radiografías (23 Oct 2026, 13:40, owner: its own door, the first one; «Empezar» leads here) ----------
   The panel opens where the doors are and the planet stays in view: on a computer a column on the left, on a phone a
   sheet from the bottom. Three ways of looking: «Tú», «Una web», «Tus aparatos» (the last one not built yet). */
/* «Empezar»: after the phrase, in the middle of the same gap under the planet */
.empezar { all: unset; box-sizing: border-box; position: fixed; left: 50%; top: 80%; z-index: 6; transform: translate(-50%, 8px); opacity: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px 13px 24px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font: 600 14px/1 var(--texto); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 0 0 1px rgba(156,195,228,.35), 0 8px 26px rgba(156,195,228,.20); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .25s, filter .2s; }
.empezar[hidden] { display: none; }
.empezar.entra { opacity: 1; transform: translate(-50%, 0); }
.empezar svg { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.empezar:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(156,195,228,.6), 0 0 0 6px rgba(156,195,228,.12), 0 10px 32px rgba(156,195,228,.34); }
.empezar:hover svg { transform: translateX(3px); }
.empezar.entra:active { transform: translate(-50%, 0) scale(.96); }
.empezar:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
body.con-frase .empezar, body.en-radio .empezar { opacity: 0 !important; pointer-events: none; }
[dir="rtl"] .empezar svg { transform: scaleX(-1); }
[dir="rtl"] .empezar:hover svg { transform: scaleX(-1) translateX(3px); }

.radio-panel { position: fixed; left: calc(40px + env(safe-area-inset-left, 0px)); top: max(96px, calc(50% - 310px)); width: 340px; max-height: calc(100vh - max(96px, 50vh - 310px) - 28px); overflow: auto; z-index: 25; display: flex; flex-direction: column; gap: 12px; padding: 2px; scrollbar-width: none; animation: radio-entra .55s cubic-bezier(.2,.7,.2,1); }
.radio-panel::-webkit-scrollbar { display: none; }
.radio-panel[hidden] { display: none; }
.radio-panel.sale { animation: radio-sale .26s ease forwards; }
@keyframes radio-entra { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes radio-sale { to { opacity: 0; transform: translateX(-8px); } }
.radio-panel .cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.radio-panel .k { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8A95A2; }
.radio-panel .cerrar { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); border: 1px solid transparent; transition: color .2s, border-color .2s, background .2s; }
.radio-panel .cerrar:hover { color: var(--fg); border-color: var(--line); background: rgba(156,195,228,.08); }
.radio-panel .cerrar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.radio-panel .t { margin: 0; font: 400 36px/1.02 'Instrument Serif', Georgia, 'Times New Roman', serif; letter-spacing: -.01em; color: var(--fg); text-shadow: 0 2px 18px rgba(6,8,12,.9); text-wrap: balance; }
.radio-panel .d { margin: -2px 0 2px; font: 400 13px/1.5 var(--texto); color: #B4BEC9; text-shadow: 0 1px 10px rgba(6,8,12,.95); max-width: 34ch; }
.radio-panel .tarjeta { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(10,14,20,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.radio-panel .tarjeta .tk { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.radio-panel .tarjeta .pronto { color: var(--aviso); border: 1px solid #4A3C22; border-radius: 999px; padding: 3px 7px; font-size: 9px; letter-spacing: .12em; }
.radio-panel .tarjeta h3 { margin: 0; font: 600 16px/1.25 var(--texto); color: var(--fg); letter-spacing: -.005em; text-wrap: balance; }
.radio-panel .tarjeta p { margin: 0; font: 400 12.5px/1.5 var(--texto); color: #B4BEC9; }
.radio-panel .tarjeta .nota { font: 400 10.5px/1.5 var(--mono); color: #7C8794; }
.radio-panel .accion { all: unset; cursor: pointer; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font: 600 12px/1 var(--texto); transition: background .2s, color .2s, box-shadow .25s; }
.radio-panel .accion svg { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.radio-panel .accion:hover { background: var(--accent); color: var(--accent-fg); box-shadow: 0 0 0 4px rgba(156,195,228,.12); }
.radio-panel .accion:hover svg { transform: translateX(2px); }
.radio-panel .accion:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.radio-panel .sitios { display: flex; flex-wrap: wrap; gap: 5px; }
.radio-panel .sitios button { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(12,17,24,.6); font: 500 11.5px/1 var(--texto); color: #C4CCD5; white-space: nowrap; transition: color .2s, border-color .2s, background .2s; }
.radio-panel .sitios button small { font: 500 9px/1 var(--mono); letter-spacing: .06em; color: #6F7B88; }
.radio-panel .sitios button:hover { color: var(--fg); border-color: rgba(156,195,228,.6); background: rgba(156,195,228,.12); }
.radio-panel .sitios button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.radio-panel .pendiente h3, .radio-panel .pendiente p { opacity: .8; }
.radio-panel .sitios button.todas { color: var(--fg); border-color: rgba(156,195,228,.42); }
[dir="rtl"] .radio-panel { left: auto; right: calc(40px + env(safe-area-inset-right, 0px)); }
[dir="rtl"] .radio-panel .accion svg { transform: scaleX(-1); }
/* the panel takes the doors' place; the planet and the rest stay */
body.en-radio #puertas, body.en-radio #ficha { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s; }
@media (max-width: 760px) {
  .radio-panel { z-index: 60; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 86vh; gap: 10px; padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; background: rgba(8,11,16,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation-name: radio-sube; }
  .radio-panel.sale { animation-name: radio-baja; }
  .radio-panel .t { font-size: 30px; }
  [dir="rtl"] .radio-panel { right: 0; }
  body.en-radio .espejo-modo, body.en-radio #directo { opacity: 0 !important; pointer-events: none !important; }
}
@keyframes radio-sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes radio-baja { to { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .radio-panel, .radio-panel.sale { animation-duration: .01ms; } .empezar svg, .radio-panel .accion svg { transition: none; } }
/* the layer bar on its own line when the centred bar would run into the header's buttons (orbita.js measures it) */
body.capas-abajo .capas { position: static; transform: none; order: 3; width: max-content; max-width: 100%; margin: 0 auto; justify-content: center; flex-wrap: wrap; }
/* «Conocer GUARDIANA»: the presentation, now behind Órbita (23 Oct 2026, 13:40) */
.izq .conocer { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8A95A2; text-decoration: none; padding: 6px 0 5px; border-bottom: 1px solid rgba(156,195,228,.18); transition: color .2s, border-color .2s; white-space: nowrap; }
.izq .conocer:hover { color: var(--fg); border-color: rgba(156,195,228,.6); }
.izq .conocer:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
body.dentro .izq .conocer { display: none; }
@media (max-width: 420px) { .izq .conocer { letter-spacing: .1em; } }