/* Portada v9 · I4-T2: v8's navigable map with a painted handoff during cold loading. */
/* Portada v6 · I2 · Gran constelación (portada-v4 I, evolved with Marco's notes of 2026-09-29). The page as
   a night sky of constellations, like Skyrim's skill trees: every part of the page is a constellation
   with a name, its stars carry the notes (the site's texts, no boxes) and faint stars complete each
   figure. With i.js (.en-cielo) a camera shows the whole sky, flies into each constellation and from star
   to star, and pulls back to move to the next one. Default: a vertical list of stars under each
   constellation's name (no JS, reduced motion, a small screen or a note too tall for it). */
:root{--astro:#FFEED6;--ancho-nota:min(520px,84vw)}

/* ================= the vertical chart (default) ================= */
.mapa{position:relative;background:var(--void);color:var(--text)}
/* Reloading deep in the map (Marco 2026-09-30): until comun/i.js has measured the map and put the page
   back on its star, the page sits at its top, on the hero. html.vuelve-al-mapa, set before the first
   paint by index.html, shows .cortina-mapa over it instead: the map's cached photo, perspective and
   star snapshot when available. i.js fades it out (html.cortina-fuera) once the map is in place underneath;
   if the map never starts, the animation clears it on its own. Below the case index (45) and nav (50). */
.cortina-mapa{display:none}
html.vuelve-al-mapa .cortina-mapa{display:block;position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden;
  background:#14121a;animation:cortina-sola .5s ease 8s forwards}
html.vuelve-al-mapa .cortina-mapa::before{content:'';position:absolute;inset:-12%;
  background-image:var(--cielo-foto-recarga,url("hero/hero-cielo.webp"));background-position:center bottom;background-size:cover;opacity:.65;
  transform:var(--cielo-recarga,none);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 8%,#000 26%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent 8%,#000 26%,#000 100%)}
html.vuelve-al-mapa .cortina-mapa::after{content:'';position:absolute;inset:0;
  background-image:var(--estrellas-recarga,none);background-position:center;background-size:100% 100%}
html.cortina-fuera .cortina-mapa{opacity:0;transition:opacity .5s var(--ease)}
@keyframes cortina-sola{to{opacity:0;visibility:hidden}}
.cielo-mapa,.trazos,.rumbo{display:none}
.mundo{position:relative;max-width:820px;margin:0 auto;padding:104px 28px 64px}
.mundo::before{content:'';position:absolute;left:34px;top:112px;bottom:96px;width:1px;
  background:repeating-linear-gradient(rgba(255,255,255,.2) 0 4px,transparent 4px 11px)}
.estrella{position:relative;padding:0 0 80px 44px}
.astro{position:absolute;left:0;top:4px;width:13px;height:13px;border-radius:50%;background:var(--astro);
  box-shadow:0 0 0 4px rgba(255,238,214,.08),0 0 18px 4px rgba(255,238,214,.45)}
/* a constellation's name: a heading over its stars in the list, a label in the sky */
.nombre-constelacion{position:relative;margin:0 0 34px 44px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--astro)}
.nombre-constelacion:not(:first-of-type){margin-top:24px}

/* ---------- the annotations: plain text beside the star ---------- */
.anotacion h2{margin:0 0 16px;font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:500;letter-spacing:-.035em;line-height:1.08;
  text-wrap:balance;color:var(--text);max-width:none}
.anotacion p{margin:0}
.anotacion .proyecto-foto{aspect-ratio:16/9;max-height:26vh;background:var(--foto) center/cover;border-radius:3px;margin:0 0 16px}
.anotacion .numero{margin:0 0 8px;color:var(--text-3)}
.anotacion .etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.anotacion .etiqueta-proyecto,.anotacion .etiqueta-en-preparacion{margin:0;white-space:normal}
.anotacion .desc{font-size:15.5px;line-height:1.65;color:var(--text-2)}
.anotacion .tags{justify-content:flex-start;margin-top:14px}
.anotacion .perfil-texto p{font-size:15px;line-height:1.65;color:var(--text-2);margin:0 0 .8em}
.anotacion .perfil-texto p:first-child{color:var(--text)}
#caso1,#caso2{background:none}
.anotacion .caso2-img,.anotacion .caso02-foto{display:block;width:140px;height:175px;object-fit:cover;border-radius:3px;margin:0 0 14px}
.anotacion .caso-rotulo{margin:0 0 12px;font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--accent-soft)}
.anotacion .caso-nota-evidencia{font-family:inherit;font-size:14px;line-height:1.6;letter-spacing:0;color:var(--text-3)}
.anotacion .etapas{margin:18px 0 14px}
.anotacion .etapa{background:rgba(255,255,255,.07);color:var(--text-2)}
.anotacion .etapa[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}
.anotacion .panel-caso{border-left:1px solid rgba(255,255,255,.14);padding:0 0 0 16px;background:none}
.anotacion .panel-caso h3{font-size:17px;margin:0 0 6px;color:var(--text)}
.anotacion .panel-caso p{font-size:14.5px;line-height:1.6;color:var(--text-2)}
.anotacion .panel-caso .meta{margin-top:10px;color:var(--text-3)}
.anotacion .acciones{justify-content:flex-start;margin-top:18px}
.btn-caso-completo{box-shadow:none}
.rol .badge-categoria{display:inline-block;margin:0 10px 0 0;padding:0;border:0;background:none;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase}
/* The first role's star keeps the old home's id (#experiencia) for the menu anchor, so diseno-v1.css's
   #experiencia .badge-categoria margins reached it and glued the field to its period (audit 2026-10-12). */
#experiencia .rol .badge-categoria{margin:0 10px 0 0}
.rol .badge-categoria.tecnologia{color:var(--accent-soft)}
.rol .badge-categoria.otra-area{color:var(--text-3)}
.rol .periodo{display:inline;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-3)}
.rol h3{margin:10px 0 8px;font-size:clamp(1.25rem,2vw,1.6rem);font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--text)}
.rol .desc{font-size:15px;line-height:1.65;color:var(--text-2)}
.anotacion .subtitulo{margin:0 0 10px;font-size:15px;font-weight:600;color:var(--text)}
.anotacion .subtitulo+*{margin-top:0}
.formacion-item,.idiomas-texto{font-size:14.5px;line-height:1.55;color:var(--text-2);margin:0 0 8px !important}
#formacion .formacion-item{font-size:15px;line-height:1.6;color:var(--text)}
#formacion .formacion-item:nth-of-type(-n+2){font-weight:500}
.anotacion .formacion-item:last-of-type{margin-bottom:22px !important}
.idiomas-texto strong{color:var(--text);font-weight:500}
.mapa #stack .stack-grupos{display:block;margin:0}
.mapa #stack .stack-grupo{margin:0 0 14px}
.mapa #stack .stack-grupo h3{margin:0 0 6px;font-family:inherit;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text)}
.mapa #stack .stack-items{display:block;font-size:14px;line-height:1.7}
.mapa #stack .stack-items span{display:inline;padding:0;border:0;background:none;font-family:inherit;font-size:inherit;letter-spacing:0;white-space:nowrap}
.mapa #stack .stack-items span:not(:last-child)::after{content:' · ';white-space:normal;color:var(--text-3)}
.mapa #stack .grupo-1 .stack-items span{color:var(--text)}
.mapa #stack .grupo-2 .stack-items span{color:var(--text-2)}
.mapa #stack .grupo-3 .stack-items span{color:var(--text-3)}
.mapa #stack .stack-nota{margin:10px 0 0;font-family:inherit;font-style:normal;font-size:14px;color:var(--text-2)}
/* the lab's stars: the live QR constellation and the galaxy field, inside their notes */
.estrella-lab .anotacion p{font-size:15px;line-height:1.65;color:var(--text-2)}
.estrella-lab .constelacion-stage{height:min(60vh,520px);margin-top:20px;border-radius:4px;overflow:hidden}
.anotacion .galaxia-preview{grid-template-columns:1fr;margin:0}
.anotacion .galaxia-preview-eyebrow{font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.08em}

/* ================= the sky of constellations (i.js adds .en-cielo) =================
   The sky itself (field, figures, the journey's line, stars, names) is drawn by i.js on a canvas at the
   camera's exact scale; the notes are HTML, translated only. Scaling the whole world with CSS made the
   browser raster an immense surface whenever the camera pulled back. */
/* Match the hero's last tone at the section boundary; the two short gradients meet at the same colour.
   The map's veil scrolls away, so the full sky keeps its original contrast. */
.dibujo-cielo{display:none}
.presentacion:has(+ .mapa.en-cielo)::after{content:'';position:absolute;inset:auto 0 0;height:160px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,#14121a)}
.mapa.en-cielo::before{content:'';position:absolute;z-index:2;inset:0 0 auto;height:220px;pointer-events:none;
  background:linear-gradient(to bottom,#14121a 0%,rgba(20,18,26,.86) 22%,transparent 100%)}
.mapa.en-cielo .camara-mapa{position:sticky;top:0;height:100svh;overflow:clip}
/* hero/hero-cielo.webp: byte-identical to assets/hero-cielo.webp, but the file the hero has already
   downloaded; the other path was fetched again, last of all images, only once the map started. */
.en-cielo .cielo-mapa{display:block;position:absolute;inset:-12%;background:url("hero/hero-cielo.webp") center bottom/cover;opacity:.65;
  will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 8%,#000 26%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent 8%,#000 26%,#000 100%)}
.en-cielo .dibujo-cielo{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.en-cielo .mundo{position:absolute;left:0;top:0;width:0;height:0;max-width:none;margin:0;padding:0;will-change:transform}
.en-cielo .mundo::before{display:none}
.en-cielo .trazos,.en-cielo .astro{display:none}
.en-cielo .estrella{position:absolute;padding:0;width:0;height:0}
/* the names are drawn in the sky; the headings stay for screen readers */
.en-cielo .nombre-constelacion{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* only the star being read shows its note; the rest of the sky stays clean */
.en-cielo .anotacion{position:absolute;left:40px;top:-18px;width:var(--ancho-nota);opacity:0;transition:opacity .8s var(--ease)}
.en-cielo .estrella.aqui .anotacion{opacity:1}
.en-cielo .estrella:not(.aqui) .anotacion{transition:none}
.en-cielo .estrella:not(.aqui) .anotacion *{pointer-events:none}
.en-cielo .estrella-lab .anotacion{width:min(760px,86vw)}
.en-cielo .estrella-lab .constelacion-stage{height:min(44vh,400px)}
/* the live piece sleeps while the camera is far from it (i.js) */
.estrella-lab.dormida .constelacion-stage iframe{display:none}
/* Over the sky photo the base greys fall below AA: measured 2026-10-12, --text-2 ≈ 4.3:1 and --text-3
   ≈ 2.8:1 (median of the real background behind the text). Inside the sky and the case index that floats
   over it they take lighter values (≥ 5.1:1 and ≥ 4.8:1 on the lightest 2 % of that background). */
.mapa.en-cielo,.fichero-casos{--text-2:#B4AEC0;--text-3:#AFA9BB}
.en-cielo .rumbo{display:block;position:absolute;z-index:3;left:clamp(16px,4vw,56px);bottom:26px;margin:0;font-size:13px;color:var(--text-2)}
.en-cielo .rumbo b{color:var(--astro);font-weight:500}

@media (min-width:700px) and (min-height:520px) and (prefers-reduced-motion:no-preference){
  .mapa:not(.mapa-lista){background:#14121a}
  .presentacion:has(+ .mapa:not(.mapa-lista))::after{content:'';position:absolute;inset:auto 0 0;height:160px;pointer-events:none;
    background:linear-gradient(to bottom,transparent,#14121a)}
}

/* ================= I4: the navigable map =================
   On the whole sky every star is a button (i.js places it on its star); its note's title shows on hover and
   focus. «Ver el mapa» takes the camera back to the whole sky from anywhere in the journey. */
.mapa-navegable{display:none}
.en-cielo .mapa-navegable{display:block;position:absolute;inset:0;z-index:4;pointer-events:none}
.mapa-estrellas{margin:0;padding:0;list-style:none}
.ir-estrella{position:absolute;left:-22px;top:-22px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;
  pointer-events:none;opacity:0}
.mapa-navegable.en-mapa .ir-estrella{pointer-events:auto;opacity:1}
.ir-estrella:focus-visible{outline:2px solid var(--astro);outline-offset:2px}
.ir-rotulo{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);max-width:260px;width:max-content;padding:6px 10px;border-radius:6px;
  font:500 13px/1.35 'Instrument Sans',system-ui,sans-serif;color:var(--text);background:rgba(8,8,10,.86);border:1px solid rgba(255,238,214,.22);
  text-align:center;opacity:0;transition:opacity .25s var(--ease);pointer-events:none}
.ir-estrella:hover .ir-rotulo,.ir-estrella:focus-visible .ir-rotulo{opacity:1}
/* The hint and return control share a 40px gap below the 64px nav; they never show together (i.js). */
.ver-mapa{position:absolute;top:104px;right:clamp(16px,4vw,56px);pointer-events:auto;
  font:500 13px/1 'Instrument Sans',system-ui,sans-serif;color:var(--accent-soft);cursor:pointer;
  background:rgba(167,139,250,.08);border:1px solid rgba(196,174,255,.28);border-radius:var(--radius-pill);padding:12px 16px;min-height:44px;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.ver-mapa:hover{border-color:rgba(196,174,255,.58);background:rgba(167,139,250,.16);color:var(--text)}
.ver-mapa:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}
.ver-mapa[hidden]{display:none}
.pista-mapa{display:none}
.mapa-navegable.en-mapa .pista-mapa{display:block;position:absolute;left:50%;top:104px;transform:translateX(-50%);
  margin:0;padding:10px 18px;max-width:min(460px,74vw);font:500 12.5px/1.4 'Instrument Sans',system-ui,sans-serif;
  letter-spacing:.01em;color:#bdb5c7;text-align:center;animation:pista-respira 4s ease-in-out infinite}
@keyframes pista-respira{0%,100%{opacity:.78}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){ .pista-mapa{animation:none;opacity:1} }
@media(max-width:900px){ .ver-mapa{font-size:12px;padding:9px 13px} }

/* the live QR constellation inside its note falls into the night at its edges, as in D2 and G2, instead
   of reading as a black box (the bottom only in its last 4 %: the piece writes its hint there) */
.en-cielo .estrella-lab .constelacion-stage{border-radius:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 96%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 96%,transparent 100%);
  mask-composite:intersect}