/* ══════════════════════════════════════════════════════════════════
   ██  styles.css
   ██  Portfolio · Iván Batista Herrero · Analista SOC L1
   ══════════════════════════════════════════════════════════════════
   Paleta oscura (#0a0a0f) con acento neón #00ffcc.
   Orden de capas:
     01 · Tokens de diseño (:root)
     02 · Reset + tipografía base
     03 · Fondos — gradientes, grid, sol, rayos, canvas
     04 · Nav + progreso lateral
     05 · Hero — terminal, globo Three.js, CTA
     06 · About — tarjeta 3D holográfica
     07 · Skills — grid hexagonal generado por JS
     08 · Projects · Education · Contact
     09 · Proyector holográfico — overlay FLIP + animaciones
     10 · Footer + Responsive (900 → 420 px)
   ══════════════════════════════════════════════════════════════════ */

  /* ── 01 · TOKENS DE DISEÑO ──────────────────────────────────── */
  :root {
    /* fondos */
    --bg:     #0a0a0f;   /* negro profundo — fondo principal */
    --bg-2:   #0d0d18;   /* variante oscura para capas de fondo */
    --card:   #1a1a2e;   /* superficie de tarjeta */
    --card-2: #15152a;   /* tarjeta variante — hover / inset */

    /* acento neón */
    --grid:  #00ffcc;             /* verde neón — color de marca */
    --glow:  #00ffcc;             /* alias de --grid para box-shadow/filter */
    --alert: #ff003c;             /* rojo alerta — amenazas y errores */
    --soft:  rgba(0,255,204,.55); /* acento semi-opaco — badges, bordes */
    --hair:  rgba(0,255,204,.18); /* trazo muy fino — separadores, grid */

    /* tipografía */
    --text: #e8f4ff;  /* blanco frío — texto principal */
    --dim:  #6f7a8a;  /* gris apagado — metadata, texto secundario */
    --mono: 'JetBrains Mono', ui-monospace, monospace;  /* código / terminal */
    --sans: 'Space Grotesk', system-ui, sans-serif;     /* UI / cuerpo */
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
    cursor: default;
    min-height: 100vh;
  }

  ::selection { background: rgba(0,255,204,.3); color: #fff; }

  /* ── 03 · FONDOS ────────────────────────────────────────────── */
  /* Capas fijas apiladas por z-index: gradiente base → grid → rayos
     de sol cónicos → disco solar → niebla de calor (bg-heat).
     El grid usa mask-image para desvanecer los bordes. */
  /* ── fondos · gradientes y grid ── */
  .bg-stack {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      /* warm sun glow — top right */
      radial-gradient(circle 380px at 96% -3%,
        rgba(255,228,180, 0.32) 0%,
        rgba(255,200,140, 0.14) 22%,
        rgba(255,180,120, 0.05) 45%,
        transparent 70%),
      /* cool ambient */
      radial-gradient(1200px 800px at 18% 25%, rgba(0,255,204,.05), transparent 60%),
      /* warm fill */
      radial-gradient(900px 700px at 85% 80%, rgba(255,140,80,.04), transparent 60%),
      linear-gradient(180deg, #08080d 0%, #0a0a12 50%, #07070c 100%);
  }
  /* god-ray streaks emanating from the sun */
  .bg-rays {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background:
      /* layer A — sharp thin rays */
      conic-gradient(from 175deg at 96% -3%,
        transparent 0deg,
        rgba(255,225,170, 0.22) 4deg,
        transparent 9deg,
        transparent 16deg,
        rgba(255,225,170, 0.14) 21deg,
        transparent 27deg,
        transparent 35deg,
        rgba(255,225,170, 0.18) 40deg,
        transparent 47deg,
        transparent 55deg,
        rgba(255,225,170, 0.10) 60deg,
        transparent 67deg,
        transparent 78deg,
        rgba(255,225,170, 0.15) 83deg,
        transparent 90deg,
        transparent 100deg);
    mix-blend-mode: screen;
    opacity: 1;
    animation: rayShimmer 9s ease-in-out infinite;
  }
  /* second layer: wider, softer light shafts */
  .bg-rays-soft {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background:
      conic-gradient(from 180deg at 96% -3%,
        transparent 0deg,
        rgba(255,210,150, 0.10) 12deg,
        transparent 28deg,
        transparent 42deg,
        rgba(255,210,150, 0.12) 58deg,
        transparent 75deg,
        transparent 90deg);
    filter: blur(18px);
    mix-blend-mode: screen;
    opacity: 0.9;
    animation: rayShimmer 13s ease-in-out infinite reverse;
  }
  @keyframes rayShimmer {
    0%, 100% { opacity: .75; transform: rotate(0deg); }
    50%      { opacity: 1;   transform: rotate(1.2deg); }
  }
  /* the sun's "disc" — tiny bright core, mostly off-screen */
  .bg-sun-core {
    position: fixed; top: -90px; right: -90px;
    width: 260px; height: 260px; z-index: 1; pointer-events: none;
    background: radial-gradient(circle at center,
      rgba(255,250,235, 0.92) 0%,
      rgba(255,230,180, 0.55) 22%,
      rgba(255,200,140, 0.20) 50%,
      transparent 75%);
    filter: blur(2px);
    mix-blend-mode: screen;
    animation: sunPulse 5s ease-in-out infinite;
  }
  @keyframes sunPulse {
    0%, 100% { opacity: .9; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.06); }
  }
  .bg-grid {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background-image:
      linear-gradient(rgba(0,255,204,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,255,204,.07) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
    animation: gridPulse 4.4s ease-in-out infinite;
  }
  .bg-grid::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(rgba(0,255,204,.18) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,255,204,.18) 1px, transparent 1px);
    background-size: 280px 280px;
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
    animation: gridPulse 4.4s ease-in-out infinite;
  }
  @keyframes gridPulse {
    0%, 100% { opacity: .35; }
    50% { opacity: .85; }
  }

  /* scanlines */
  .scanlines {
    position: fixed; inset: 0; z-index: 60; pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,255,204,.02) 0px,
      rgba(0,255,204,.02) 1px,
      transparent 1px,
      transparent 3px
    );
    mix-blend-mode: overlay;
    opacity: .6;
  }
  .vignette {
    position: fixed; inset: 0; z-index: 61; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%);
  }

  /* bubble canvas */
  #bubbles {
    position: fixed; inset: 0; z-index: 2; pointer-events: auto;
  }

  /* ── 04 · NAV + PROGRESO LATERAL ───────────────────────────── */
  /* ── nav · barra superior ── */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 32px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(8,8,14,.7), rgba(8,8,14,.0));
    border-bottom: 1px solid var(--hair);
  }
  .brand {
    font-family: var(--mono); font-weight: 700; letter-spacing: .02em;
    color: var(--text); font-size: 14px; display: flex; align-items: center; gap: 10px;
  }
  .brand .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--glow); box-shadow: 0 0 10px var(--glow);
    animation: blink 1.6s infinite;
  }
  @keyframes blink { 50% { opacity: .25; } }
  .brand .slash { color: var(--glow); }
  .brand .name { color: var(--text); }
  .brand .tag { color: var(--dim); }

  .navlinks {
    display: flex; gap: 4px; font-family: var(--mono); font-size: 13px;
  }
  .navlinks a {
    color: var(--dim); text-decoration: none;
    padding: 8px 14px; border-radius: 4px;
    transition: color .2s, background .2s, text-shadow .2s;
    position: relative;
  }
  .navlinks a:hover { color: var(--glow); text-shadow: 0 0 8px rgba(0,255,204,.6); }
  .navlinks a .num { color: var(--alert); margin-right: 6px; opacity: .8; }

  .status {
    font-family: var(--mono); font-size: 12px; color: var(--dim);
    display: flex; align-items: center; gap: 8px;
  }
  .status .pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: #00ff88; box-shadow: 0 0 8px #00ff88;
    animation: blink 1.4s infinite;
  }

  /* ── nav · progreso lateral (dots) ── */
  .side-progress {
    position: fixed; right: 24px; top: 50%; transform: translateY(-50%);
    z-index: 40; display: flex; flex-direction: column; gap: 14px; align-items: flex-end;
  }
  .side-progress .step {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11px; color: var(--dim);
    cursor: pointer; transition: color .2s;
    text-decoration: none;
  }
  .side-progress .step .bar {
    width: 28px; height: 2px; background: rgba(0,255,204,.2);
    transition: width .35s ease, background .35s, box-shadow .35s;
  }
  .side-progress .step.active { color: var(--text); }
  .side-progress .step.active .bar {
    width: 56px; background: var(--glow); box-shadow: 0 0 10px var(--glow);
  }
  .side-progress .step:hover { color: var(--glow); }

  /* ── 05 · HERO + LAYOUT BASE ───────────────────────────────── */
  /* ── layout base · secciones y containers ── */
  main { position: relative; z-index: 10; }
  section {
    position: relative;
    padding: 140px 8vw 120px;
    max-width: 1400px;
    margin: 0 auto;
  }
  .section-label {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
    color: var(--glow); text-transform: uppercase;
    margin-bottom: 28px;
  }
  .section-label::before {
    content: ""; width: 38px; height: 1px; background: var(--glow); box-shadow: 0 0 8px var(--glow);
  }
  .section-label .num { color: var(--alert); }

  .reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s, transform .8s; }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* ── hero · terminal, globo Three.js y CTA ── */
  #hero {
    min-height: 100vh; padding-top: 120px; padding-bottom: 0;
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px;
    align-items: center;
  }
  .hero-left { position: relative; z-index: 3; }
  .term-line {
    font-family: var(--mono); font-size: 13px; color: var(--dim);
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 10px;
  }
  .term-line .prompt { color: var(--glow); }
  .term-line .caret {
    display: inline-block; width: 8px; height: 14px; background: var(--glow);
    margin-left: 2px; animation: caret .9s steps(1) infinite;
    vertical-align: -2px;
  }
  @keyframes caret { 50% { opacity: 0; } }

  .hero-title {
    font-family: var(--sans);
    font-weight: 700; font-size: clamp(48px, 8vw, 112px);
    line-height: .95; letter-spacing: -.03em;
    margin: 8px 0 0;
    position: relative;
    color: var(--text);
  }
  .hero-title .accent { color: var(--glow); text-shadow: 0 0 30px rgba(0,255,204,.5); }

  .glitch {
    position: relative;
    display: inline-block;
  }
  .glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute; inset: 0;
    pointer-events: none;
  }
  .glitch::before {
    color: var(--alert);
    transform: translate(-2px, 0);
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    animation: glitchA 3.6s infinite linear alternate-reverse;
    mix-blend-mode: screen;
  }
  .glitch::after {
    color: var(--glow);
    transform: translate(2px, 0);
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    animation: glitchB 2.8s infinite linear alternate-reverse;
    mix-blend-mode: screen;
  }
  @keyframes glitchA {
    0%, 92%, 100% { transform: translate(0,0); }
    93% { transform: translate(-3px,1px); }
    95% { transform: translate(2px,-1px); }
    97% { transform: translate(-1px,2px); }
  }
  @keyframes glitchB {
    0%, 90%, 100% { transform: translate(0,0); }
    91% { transform: translate(2px,-1px); }
    94% { transform: translate(-2px,1px); }
    96% { transform: translate(1px,2px); }
  }

  .hero-sub {
    font-family: var(--sans); font-size: 16px; color: var(--dim);
    max-width: 100%; margin-top: 24px;
    text-align: justify;
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
  }
  .hero-sub-pfx {
    display: block;
    font-family: var(--mono); color: var(--glow);
    margin-bottom: 6px;
  }
  .hero-sub .hi { color: var(--glow); font-family: var(--mono); }

  .hero-meta {
    display: flex; gap: 28px; margin-top: 40px;
    font-family: var(--mono); font-size: 12px; color: var(--dim);
    flex-wrap: wrap;
  }
  .hero-meta .k { color: var(--alert); }
  .hero-meta .v { color: var(--text); }
  .hero-meta > div { display: flex; flex-direction: column; gap: 4px; }

  .hero-actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 13px; font-weight: 500;
    padding: 12px 20px; border-radius: 4px;
    border: 1px solid var(--glow); color: var(--glow);
    background: rgba(0,255,204,.06);
    text-decoration: none; cursor: pointer;
    transition: all .25s;
    position: relative; overflow: hidden;
  }
  .btn:hover { background: var(--glow); color: #001; box-shadow: 0 0 20px rgba(0,255,204,.5); }
  .btn.ghost { border-color: var(--hair); color: var(--dim); background: transparent; }
  .btn.ghost:hover { border-color: var(--text); color: var(--text); background: rgba(255,255,255,.04); box-shadow: none; }
  .btn .arrow { transition: transform .25s; }
  .btn:hover .arrow { transform: translateX(4px); }

  .hero-right {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%; max-width: 560px;
    justify-self: end;
    z-index: 3;  /* sit above #bubbles (z:2) so the globe stays visible */
  }
  #globe {
    position: absolute;
    /* intermediate size — fits centered inside the L-corner frame with slack
       on every side so the globe can bounce around like a DVD logo without
       crossing the corner brackets */
    width: 70%; height: 70%;
    top: 50%; left: 50%;
    display: block;
    /* slow DVD-style drift — travels edge-to-edge in a continuous loop. The
       base translate(-50%,-50%) keeps it centered; the keyframes ADD pixel
       offsets that reach the frame's inner edge then bounce back. */
    animation: heroGlobeBounce 34s linear infinite;
    will-change: transform;
  }
  /* waypoints chosen so the globe visits all 4 corners + a couple of edges,
     in a path that never repeats segments back-to-back (more DVD-feeling).
     Linear easing gives that constant-velocity-then-bounce read; the ±42px
     range keeps the 70%-sized canvas fully inside the parent box (slack is
     ~47px per side) so the sphere never overshoots the L-corner frame. */
  @keyframes heroGlobeBounce {
    0%   { transform: translate(calc(-50% +   0px), calc(-50% +   0px)); }
    13%  { transform: translate(calc(-50% +  42px), calc(-50% +  32px)); }
    27%  { transform: translate(calc(-50% -  40px), calc(-50% +  42px)); }
    40%  { transform: translate(calc(-50% -  42px), calc(-50% -  28px)); }
    54%  { transform: translate(calc(-50% +  34px), calc(-50% -  42px)); }
    68%  { transform: translate(calc(-50% +  42px), calc(-50% +  14px)); }
    81%  { transform: translate(calc(-50% -  22px), calc(-50% +  42px)); }
    93%  { transform: translate(calc(-50% -  42px), calc(-50% +   0px)); }
    100% { transform: translate(calc(-50% +   0px), calc(-50% +   0px)); }
  }
  @media (prefers-reduced-motion: reduce) {
    #globe { animation: none; transform: translate(-50%, -50%); }
  }
  .globe-frame {
    position: absolute; inset: -20px; pointer-events: none;
  }
  .globe-frame .corner {
    position: absolute; width: 28px; height: 28px;
    border: 2px solid var(--glow);
  }
  .globe-frame .corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
  .globe-frame .corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
  .globe-frame .corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
  .globe-frame .corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }
  .globe-readout {
    position: absolute; bottom: -36px; left: 0; right: 0;
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 10px; color: var(--dim);
    letter-spacing: .1em;
  }
  .globe-readout .blink { color: var(--glow); animation: blink 1.6s infinite; }

  /* ── 06 · ABOUT — tarjeta 3D holográfica ───────────────────── */
  /* ── about · layout y texto matrix-rain ── */
  #about { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
  .about-text h2 {
    font-family: var(--sans); font-weight: 700; font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.05; letter-spacing: -.02em; margin: 0 0 24px;
  }
  .about-text h2 .accent { color: var(--glow); }
  .matrix-text {
    font-family: var(--mono); color: var(--text);
    font-size: 15px; line-height: 1.75;
    margin-bottom: 18px;
    text-align: justify;
    hyphens: none;
    -webkit-hyphens: none;
    /* normal block: respects parent column width and word-wrap */
    overflow-wrap: break-word;
  }
  /* wrap each WORD as a non-breakable inline-block so lines only break
     between words, never inside one */
  .matrix-text .word {
    display: inline-block;
    white-space: nowrap;
  }
  .matrix-text .ch {
    /* keep chars inline so they don't create internal break opportunities */
    display: inline;
    transition: color .25s, text-shadow .25s;
  }
  .matrix-text .ch.scrambling {
    color: var(--glow);
    text-shadow: 0 0 6px var(--glow);
  }

  .stat-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
    margin-top: 32px;
  }
  .stat {
    border: 1px solid var(--hair); padding: 16px 18px;
    background: linear-gradient(180deg, rgba(0,255,204,.04), rgba(0,255,204,0));
  }
  .stat .num {
    font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--glow);
    text-shadow: 0 0 10px rgba(0,255,204,.4);
  }
  .stat .lab { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }

  /* ── about · tarjeta 3D holográfica (tilt + shine) ──
     Las vars --ry/--rx/--mx/--my las escribe JS en cada frame
     para que el transform y el gradiente de brillo sigan al cursor. */
  .id-card-3d {
    position: relative;
    width: 100%;
    max-width: 460px;
    justify-self: end;
    perspective: 1600px;
    isolation: isolate;
    --rx: 6deg;   /* updated by JS */
    --ry: -10deg; /* updated by JS */
    --mx: 50%;
    --my: 50%;
  }
  /* outer ambient glow that follows the cursor */
  .id-card-3d .idc-halo {
    position: absolute;
    inset: -40px;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(
      circle 260px at var(--mx) var(--my),
      rgba(0,255,204,.22),
      rgba(0,255,204,.08) 38%,
      transparent 72%
    );
    filter: blur(28px);
    opacity: .9;
    transition: opacity .4s;
  }

  .id-card-3d .idc-stage {
    position: relative;
    aspect-ratio: 4 / 5;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    /* JS handles smoothing — no CSS transition or it fights the per-frame updates */
    will-change: transform;
  }
  .id-card-3d.is-active .idc-stage {
    /* no transition needed; JS lerp already smooths */
  }

  /* shared layer rules */
  .id-card-3d .idc-layer {
    position: absolute; inset: 0;
    pointer-events: none;
  }

  /* deep grid layer */
  .idc-grid-bg {
    transform: translateZ(-60px);
    background-image:
      linear-gradient(rgba(0,255,204,.18) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,255,204,.18) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
            mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
    opacity: .55;
  }
  /* scanlines layer */
  .idc-scanlines {
    transform: translateZ(-22px);
    background: repeating-linear-gradient(
      180deg, transparent 0 2px, rgba(0,255,204,.05) 2px 3px
    );
    opacity: .55;
  }
  /* edge frame ring */
  .idc-frame {
    transform: translateZ(2px);
    border: 1px solid rgba(0,255,204,.4);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.5) inset,
      0 0 24px rgba(0,255,204,.18) inset,
      0 30px 50px -10px rgba(0,0,0,.55);
  }

  /* card body — sits at z=0 */
  .idc-body {
    position: absolute; inset: 0;
    transform: translateZ(0);
    padding: 26px 26px 22px;
    background:
      linear-gradient(160deg, rgba(26,26,46,.96) 0%, rgba(15,15,30,.98) 100%);
    border: 1px solid var(--hair);
    display: flex; flex-direction: column; gap: 14px;
    overflow: hidden;
  }
  .idc-body::before {
    /* embossed inner gradient */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%);
    pointer-events: none;
  }

  /* holographic shine — cursor follows */
  .idc-shine {
    position: absolute; inset: 0;
    transform: translateZ(1px);
    background:
      radial-gradient(
        circle 180px at var(--mx) var(--my),
        rgba(255,255,255,.10),
        rgba(0,255,204,.06) 30%,
        transparent 60%
      ),
      conic-gradient(
        from 220deg at var(--mx) var(--my),
        rgba(0,200,255,.0) 0deg,
        rgba(0,255,204,.10) 80deg,
        rgba(255,150,255,.10) 160deg,
        rgba(0,200,255,.08) 240deg,
        rgba(0,255,204,.0) 340deg
      );
    mix-blend-mode: screen;
    opacity: .85;
    pointer-events: none;
    z-index: 4;
  }

  /* header */
  .idc-header {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--mono); font-size: 11px; color: var(--glow);
    letter-spacing: .15em;
    transform: translateZ(28px);
  }
  .idc-header .idc-badge {
    border: 1px solid var(--glow);
    background: rgba(0,255,204,.08);
    padding: 3px 8px;
    color: var(--glow);
    text-shadow: 0 0 6px rgba(0,255,204,.6);
  }

  /* portrait container — parallax block */
  .idc-portrait {
    position: relative;
    aspect-ratio: 1/1;
    width: 100%;
    border: 1px solid var(--hair);
    background:
      repeating-linear-gradient(45deg, rgba(0,255,204,.06) 0 8px, transparent 8px 16px),
      radial-gradient(circle at 50% 42%, rgba(0,255,204,.18), transparent 60%),
      linear-gradient(180deg, #11132a, #0a0a18);
    overflow: hidden;
    display: grid; place-items: center;
    transform: translateZ(10px);
  }
  .idc-portrait::after {
    content: "// IBH-2026 · ENC-AES-256";
    position: absolute; bottom: 10px; left: 10px;
    font-family: var(--mono); font-size: 9px; color: var(--soft); letter-spacing: .12em;
  }
  .idc-portrait::before {
    content: "▮ REC";
    position: absolute; top: 10px; right: 10px;
    font-family: var(--mono); font-size: 9px; color: var(--alert);
    letter-spacing: .15em;
    text-shadow: 0 0 6px var(--alert);
    animation: idcRec 1.4s steps(2) infinite;
  }
  @keyframes idcRec { 50% { opacity: .25; } }

  /* concentric rings around glyph */
  .idc-rings {
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    border: 1px dashed rgba(0,255,204,.35);
    transform: translateZ(18px);
    animation: idcRingSpin 24s linear infinite;
  }
  .idc-rings::before, .idc-rings::after {
    content: ""; position: absolute;
    inset: -10%;
    border: 1px solid rgba(0,255,204,.18);
    border-radius: 50%;
  }
  .idc-rings::after {
    inset: -22%; border-style: dashed; border-color: rgba(0,255,204,.12);
    animation: idcRingSpin 38s linear infinite reverse;
  }
  @keyframes idcRingSpin { to { transform: translateZ(18px) rotate(360deg); } }

  /* the IBH glyph */
  .idc-glyph {
    position: relative;
    z-index: 2;
    font-family: var(--mono);
    font-size: clamp(40px, 7vw, 60px);
    font-weight: 700;
    color: var(--glow);
    letter-spacing: -.04em;
    text-shadow:
      0 0 18px rgba(0,255,204,.7),
      0 0 42px rgba(0,255,204,.3);
    transform: translateZ(34px);
    animation: idcGlyphPulse 3.6s ease-in-out infinite;
  }
  @keyframes idcGlyphPulse {
    0%, 100% { text-shadow: 0 0 18px rgba(0,255,204,.7), 0 0 42px rgba(0,255,204,.3); }
    50%      { text-shadow: 0 0 28px rgba(0,255,204,1), 0 0 66px rgba(0,255,204,.55); }
  }
  /* glitch slice overlays (rendered via pseudos on the IBH glyph) */
  .idc-glyph::before, .idc-glyph::after {
    content: attr(data-text);
    position: absolute; left: 0; top: 0;
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .idc-glyph::before {
    color: rgba(255,0,90,.7);
    transform: translateX(-2px);
    clip-path: polygon(0 0, 100% 0, 100% 36%, 0 36%);
    animation: idcGlitchA 4.1s steps(1) infinite;
  }
  .idc-glyph::after {
    color: rgba(0,200,255,.7);
    transform: translateX(2px);
    clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
    animation: idcGlitchB 4.1s steps(1) infinite;
  }
  @keyframes idcGlitchA {
    0%, 88%, 100% { transform: translateX(-2px); opacity: 0; }
    89%, 92%       { transform: translateX(-6px); opacity: 1; }
    93%, 96%       { transform: translateX(3px);  opacity: 1; }
  }
  @keyframes idcGlitchB {
    0%, 88%, 100% { transform: translateX(2px); opacity: 0; }
    89%, 92%       { transform: translateX(6px); opacity: 1; }
    93%, 96%       { transform: translateX(-3px); opacity: 1; }
  }

  /* data rows */
  .idc-data {
    font-family: var(--mono); font-size: 11px; color: var(--dim);
    display: grid; gap: 5px;
    transform: translateZ(24px);
    margin-top: 2px;
  }
  .idc-data .row {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(0,255,204,.08);
  }
  .idc-data .row:last-child { border-bottom: none; }
  .idc-data .row .k { color: var(--dim); }
  .idc-data .row .v { color: var(--text); text-align: right; }

  /* corner brackets (4) — high translateZ */
  .idc-corner {
    position: absolute;
    width: 20px; height: 20px;
    border: 1.5px solid var(--glow);
    box-shadow: 0 0 8px rgba(0,255,204,.6);
    transform: translateZ(42px);
    pointer-events: none;
  }
  .idc-corner.tl { top: -3px; left: -3px; border-right: none; border-bottom: none; }
  .idc-corner.tr { top: -3px; right: -3px; border-left: none; border-bottom: none; }
  .idc-corner.bl { bottom: -3px; left: -3px; border-right: none; border-top: none; }
  .idc-corner.br { bottom: -3px; right: -3px; border-left: none; border-top: none; }

  /* embossed chip mark */
  .idc-chip {
    position: absolute;
    top: 24px; left: 50%;
    width: 44px; height: 32px;
    transform: translate(-50%, 0) translateZ(38px);
    border: 1px solid rgba(0,255,204,.55);
    background:
      linear-gradient(135deg, rgba(0,255,204,.28), rgba(0,255,204,.05));
    box-shadow: 0 0 10px rgba(0,255,204,.4);
    display: none; /* keep header room — toggle on if needed */
  }

  /* scanner line that sweeps top→bottom */
  .idc-scanner {
    position: absolute;
    left: 4%; right: 4%;
    height: 2px;
    top: 0;
    background: linear-gradient(90deg, transparent, rgba(0,255,204,.95), transparent);
    box-shadow: 0 0 14px rgba(0,255,204,.8);
    transform: translateZ(20px);
    animation: idcScan 5.2s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes idcScan {
    0%        { top: 0%;   opacity: 0; }
    8%, 92%   { opacity: 1; }
    50%       { top: 100%; }
    100%      { top: 0%;   opacity: 0; }
  }

  /* reveal */
  .id-card-3d.is-ready .idc-stage > * { animation: idcReveal 1.1s cubic-bezier(.2,.7,.2,1) both; }
  .id-card-3d.is-ready .idc-grid-bg    { animation-delay: 0s; }
  .id-card-3d.is-ready .idc-scanlines  { animation-delay: .05s; }
  .id-card-3d.is-ready .idc-frame      { animation-delay: .1s; }
  .id-card-3d.is-ready .idc-body       { animation-delay: .15s; }
  .id-card-3d.is-ready .idc-corner.tl  { animation-delay: .35s; }
  .id-card-3d.is-ready .idc-corner.tr  { animation-delay: .4s; }
  .id-card-3d.is-ready .idc-corner.bl  { animation-delay: .4s; }
  .id-card-3d.is-ready .idc-corner.br  { animation-delay: .45s; }
  .id-card-3d.is-ready .idc-scanner    { animation: idcScan 5.2s ease-in-out infinite .6s; }
  @keyframes idcReveal {
    0%   { opacity: 0; filter: blur(8px) brightness(2.2); clip-path: inset(45% 0 45% 0); }
    55%  { opacity: 1; filter: blur(0)  brightness(1.4); clip-path: inset(0 0 0 0); }
    100% { opacity: 1; filter: blur(0)  brightness(1);   clip-path: inset(0 0 0 0); }
  }

  /* ── 07 · SKILLS — grid hexagonal ──────────────────────────── */
  /* ── skills · contenedor y cards hex generados por JS ── */
  #skills .skills-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 50px; }
  #skills h2 {
    font-family: var(--sans); font-weight: 700; font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.05; letter-spacing: -.02em; margin: 0;
    max-width: 720px;
  }
  #skills h2 .accent { color: var(--glow); }

  /* 2 x 2 symmetric grid of categories */
  .skill-cats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 56px;
  }

  /* category panel — framed console block */
  .skill-cat {
    position: relative;
    border: 1px solid var(--hair);
    background:
      linear-gradient(180deg, rgba(0,255,204,.025), transparent 60%),
      linear-gradient(160deg, rgba(26,26,46,.55), rgba(15,15,30,.55));
    padding: 22px 22px 22px;
    display: flex; flex-direction: column;
    transition: border-color .35s, box-shadow .35s;
  }
  .skill-cat:hover { border-color: rgba(0,255,204,.45); box-shadow: 0 0 0 1px rgba(0,255,204,.05), 0 20px 50px -20px rgba(0,255,204,.18); }

  /* corner brackets — appear on hover */
  .skill-cat .sc-corner {
    position: absolute; width: 12px; height: 12px;
    border: 1.5px solid var(--glow); opacity: .35;
    transition: opacity .3s;
  }
  .skill-cat:hover .sc-corner { opacity: 1; }
  .skill-cat .sc-corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .skill-cat .sc-corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
  .skill-cat .sc-corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
  .skill-cat .sc-corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

  /* header row: just the title (count badge removed to keep all 4 headers perfectly symmetric) */
  .cat-head {
    display: flex; align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--hair);
  }
  .skill-cat .cat-title {
    font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
    color: var(--alert); text-transform: uppercase;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
  }
  .skill-cat .cat-title .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .skill-cat .cat-title .pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--glow); box-shadow: 0 0 6px var(--glow);
    animation: blink 1.6s infinite;
    flex: 0 0 auto;
  }
  .skill-cat .cat-title .num { color: var(--dim); }
  .skill-cat .cat-title .name { color: var(--text); }
  .skill-cat .cat-meta {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
    color: var(--soft);
  }
  .skill-cat .cat-meta .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--glow); box-shadow: 0 0 6px var(--glow);
    animation: blink 1.6s infinite;
  }

  /* honeycomb grid — 7-col anchor, each hex spans 2 cols.
     Row 1 (cols 1/3/5) interlocks with row 2 (cols 2/4/6); col 7 is the slack
     that lets row 2 shift half a hex right WITHOUT overflowing the panel.    */
  .hex-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 6px;
    row-gap: 0;
    padding-top: 0;
    overflow: hidden;          /* belt-and-suspenders: anything that strays gets clipped */
  }
  .hex-grid .hex { grid-column: span 2; margin-bottom: -22px; }
  .hex-grid .hex:nth-child(1) { grid-column: 1 / span 2; }
  .hex-grid .hex:nth-child(2) { grid-column: 3 / span 2; }
  .hex-grid .hex:nth-child(3) { grid-column: 5 / span 2; }
  .hex-grid .hex:nth-child(4) { grid-column: 2 / span 2; }
  .hex-grid .hex:nth-child(5) { grid-column: 4 / span 2; }
  .hex-grid .hex:nth-child(6) { grid-column: 6 / span 2; }
  .hex-grid::after {
    content: ""; display: block; height: 22px; grid-column: 1 / -1;
  }
  .hex {
    position: relative;
    aspect-ratio: 1 / 1.1547;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(160deg, var(--card), var(--card-2));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; cursor: pointer;
    transition: filter .25s, transform .25s;
    padding: 0 10px;
  }
  .hex::before {
    content: ""; position: absolute; inset: 1px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(160deg, var(--card), var(--card-2));
    z-index: 0;
  }
  .hex > * { position: relative; z-index: 1; }
  .hex .ic {
    font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--glow);
    transition: text-shadow .25s, color .25s;
    letter-spacing: -.02em;
    line-height: 1;
  }
  .hex .lab {
    font-family: var(--mono); font-size: 11px; color: var(--text);
    letter-spacing: .03em; text-align: center;
    line-height: 1.15;
  }
  .hex .lvl {
    font-family: var(--mono); font-size: 8.5px; color: var(--dim);
    letter-spacing: .18em;
    margin-top: 1px;
  }
  /* proficiency dots — 5 segments, n filled */
  .hex .dots {
    display: flex; gap: 3px; margin-top: 3px;
  }
  .hex .dots i {
    display: block;
    width: 5px; height: 5px;
    background: rgba(0,255,204,.18);
    border-radius: 50%;
  }
  .hex .dots i.on {
    background: var(--glow);
    box-shadow: 0 0 5px var(--glow);
  }
  .hex:hover {
    filter: drop-shadow(0 0 18px rgba(0,255,204,.55));
    transform: translateY(-3px);
  }
  .hex:hover .ic { color: var(--glow); text-shadow: 0 0 12px var(--glow); }
  .hex:hover .lab { color: var(--glow); }
  .hex .hex-border {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    /* over-extend so the conic's bright wedge reaches the hex points even at extreme angles.
       parent .hex's clip-path already clips this to the hex shape — no need to clip here.   */
    margin: -10%;
    background: conic-gradient(from 0deg, transparent 0deg, var(--glow) 30deg, transparent 60deg, transparent 360deg);
    opacity: 0;
    animation: spin 4s linear infinite;
    transition: opacity .3s;
  }
  .hex:hover .hex-border { opacity: .6; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* skill tags row underneath each category */
  .skill-tags {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed var(--hair);
  }
  .skill-tags .tag-lead {
    font-family: var(--mono); font-size: 10px;
    color: var(--dim); letter-spacing: .12em;
    margin-right: 4px;
    align-self: center;
  }
  .skill-tags .tag {
    font-family: var(--mono); font-size: 10px;
    border: 1px solid var(--hair); color: var(--soft);
    padding: 3px 8px; letter-spacing: .05em;
    transition: border-color .2s, color .2s;
  }
  .skill-tags .tag:hover { border-color: var(--glow); color: var(--glow); }

  /* ── 08 · PROJECTS · EDUCATION · CONTACT ───────────────────── */
  /* ── projects · tarjetas de proyecto ── */
  #projects .proj-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 50px; }
  #projects h2 {
    font-family: var(--sans); font-weight: 700; font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.05; letter-spacing: -.02em; margin: 0;
    max-width: 720px;
  }
  #projects h2 .accent { color: var(--glow); }

  .proj-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
  }
  .proj-card {
    position: relative;
    border: 1px solid var(--hair);
    background: linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
    padding: 28px;
    overflow: hidden;
    transform-style: preserve-3d;
    min-height: 360px;
    display: flex; flex-direction: column;
    transition: border-color .3s;
  }
  .proj-card:hover { border-color: rgba(0,255,204,.5); }
  .proj-card[data-repo-key] { cursor: pointer; }
  .proj-card[data-repo-key]:focus-visible { outline: 1px solid var(--glow); outline-offset: 4px; }
  .proj-card[data-repo-key].is-clickable:hover { border-color: var(--glow); box-shadow: 0 0 0 1px rgba(0,255,204,.25), 0 20px 40px -20px rgba(0,255,204,.25); }

  /* GitHub repo badge — top right of meta line */
  .proj-card .proj-repo {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
    color: var(--soft);
    border: 1px solid var(--hair);
    background: rgba(0,255,204,.03);
    padding: 4px 8px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .2s, border-color .2s, background .2s, transform .2s;
    z-index: 3;
  }
  .proj-card .proj-repo .arr { transition: transform .25s; }
  .proj-card.is-clickable .proj-repo { color: var(--glow); border-color: var(--glow); }
  .proj-card.is-clickable:hover .proj-repo { background: rgba(0,255,204,.12); }
  .proj-card.is-clickable:hover .proj-repo .arr { transform: translate(2px, -2px); }
  /* disabled state (when no URL configured) */
  .proj-card:not(.is-clickable) { cursor: default; }
  .proj-card:not(.is-clickable) .proj-repo { opacity: .45; }
  .proj-card:not(.is-clickable) .proj-repo .arr { opacity: .5; }
  .proj-card::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(115deg, transparent 30%, rgba(0,255,204,.08) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .8s ease;
  }
  .proj-card:hover::before { transform: translateX(100%); }
  .proj-card .scan {
    position: absolute; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,255,204,.7), transparent);
    box-shadow: 0 0 8px rgba(0,255,204,.6);
    opacity: 0; top: 0; pointer-events: none;
  }
  .proj-card:hover .scan {
    opacity: 1;
    animation: scanY 2.4s linear infinite;
  }
  @keyframes scanY {
    0% { top: 0%; } 100% { top: 100%; }
  }
  .proj-card .corner-dot {
    position: absolute; width: 6px; height: 6px;
    background: var(--glow); box-shadow: 0 0 8px var(--glow);
  }
  .proj-card .corner-dot.tl { top: -3px; left: -3px; }
  .proj-card .corner-dot.tr { top: -3px; right: -3px; }
  .proj-card .corner-dot.bl { bottom: -3px; left: -3px; }
  .proj-card .corner-dot.br { bottom: -3px; right: -3px; }

  .proj-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: 11px; color: var(--dim);
    letter-spacing: .12em; margin-bottom: 14px;
    transform: translateZ(20px);
    flex-wrap: wrap; gap: 8px;
  }
  .proj-meta .id { color: var(--alert); }
  .proj-meta .status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--hair); padding: 3px 8px;
    color: var(--glow);
  }
  .proj-meta .status-pill .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--glow); box-shadow: 0 0 6px var(--glow);
  }
  .proj-card h3 {
    font-family: var(--sans); font-weight: 700;
    font-size: 24px; letter-spacing: -.01em; margin: 0 0 8px;
    transform: translateZ(30px);
  }
  .proj-card .org {
    font-family: var(--mono); font-size: 11px; color: var(--soft);
    margin-bottom: 14px; letter-spacing: .04em;
    transform: translateZ(25px);
  }
  .proj-card .blurb {
    font-family: var(--sans); font-size: 13px; line-height: 1.65; color: var(--dim);
    margin: 0 0 18px;
    transform: translateZ(15px);
    text-align: justify;
    hyphens: none;
    -webkit-hyphens: none;
  }
  .proj-card .ascii {
    font-family: var(--mono); font-size: 10px; line-height: 1.2; color: var(--soft);
    white-space: pre; opacity: .7; margin-top: auto;
    border-top: 1px dashed var(--hair); padding-top: 14px;
    transform: translateZ(10px);
    overflow-x: auto;
  }
  .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; transform: translateZ(25px); }
  .badge {
    font-family: var(--mono); font-size: 10px; padding: 3px 8px;
    border: 1px solid var(--hair); color: var(--soft); letter-spacing: .08em;
    border-radius: 2px;
  }

  /* ── education · timeline vertical ── */
  .edu-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin-top: 28px;
  }
  .edu-item {
    border: 1px solid var(--hair);
    background: linear-gradient(180deg, rgba(0,255,204,.03), rgba(0,255,204,0));
    padding: 22px;
    position: relative;
  }
  .edu-item .year {
    font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
    color: var(--alert); margin-bottom: 10px;
  }
  .edu-item h4 {
    font-family: var(--sans); font-weight: 700; font-size: 18px;
    margin: 0 0 6px; color: var(--text);
  }
  .edu-item .org {
    font-family: var(--mono); font-size: 11px; color: var(--glow);
    margin-bottom: 10px; letter-spacing: .04em;
  }
  .edu-item .desc {
    font-family: var(--mono); font-size: 12px; color: var(--dim); line-height: 1.6;
  }
  .edu-item::before {
    content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 2px;
    background: var(--glow); box-shadow: 0 0 8px var(--glow);
  }

  /* ── contact · CTA y download CV ── */
  #contact { padding-bottom: 80px; }
  #contact .contact-h2 {
    font-family: var(--sans); font-weight: 700; font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.05; letter-spacing: -.02em; margin: 0 0 16px;
    max-width: 820px;
  }
  #contact .contact-h2 .accent { color: var(--glow); }
  #contact .contact-intro {
    font-family: var(--mono); color: var(--dim); font-size: 14px;
    margin: 0 0 40px; max-width: 720px;
    border-left: 2px solid var(--glow); padding-left: 14px;
  }

  .contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(280px, auto);
    gap: 20px;
  }
  .contact-card.lg { grid-column: span 2; grid-row: span 1; }

  .contact-card {
    position: relative;
    border: 1px solid var(--hair);
    background: linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
    padding: 24px 26px;
    display: flex; flex-direction: column; gap: 6px;
    overflow: hidden;
    transition: border-color .35s, transform .35s, box-shadow .35s;
  }
  .contact-card:hover {
    border-color: rgba(0,255,204,.55);
    transform: translateY(-4px);
    box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(0,255,204,.1), 0 0 30px rgba(0,255,204,.15);
  }
  .contact-card .cc-scan {
    position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,255,204,.8), transparent);
    box-shadow: 0 0 12px rgba(0,255,204,.6);
    top: -2px; opacity: 0; pointer-events: none;
  }
  .contact-card:hover .cc-scan {
    opacity: 1;
    animation: scanY 2.6s linear infinite;
  }
  .contact-card .cc-corner {
    position: absolute; width: 14px; height: 14px;
    border: 1.5px solid var(--glow);
    opacity: 0; transition: opacity .3s;
  }
  .contact-card:hover .cc-corner { opacity: 1; }
  .contact-card .cc-corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
  .contact-card .cc-corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
  .contact-card .cc-corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
  .contact-card .cc-corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }

  .contact-card::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(0,255,204,.07) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform .9s ease;
  }
  .contact-card:hover::before { transform: translateX(110%); }

  .cc-head {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
    margin-bottom: 6px;
  }
  .cc-id { color: var(--alert); }
  .cc-pill {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--hair); padding: 3px 8px; color: var(--glow);
  }
  .cc-pill .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--glow); box-shadow: 0 0 6px var(--glow);
    animation: blink 1.4s infinite;
  }

  .cc-icon {
    width: 56px; height: 56px; color: var(--glow);
    margin: 8px 0 14px;
    filter: drop-shadow(0 0 10px rgba(0,255,204,.4));
    transition: transform .5s, filter .35s;
  }
  .cc-icon svg { width: 100%; height: 100%; }
  .contact-card:hover .cc-icon {
    transform: scale(1.08) rotate(-3deg);
    filter: drop-shadow(0 0 18px rgba(0,255,204,.8));
  }

  .cc-label {
    font-family: var(--mono); font-size: 11px; color: var(--dim);
    letter-spacing: .1em; margin-bottom: 4px;
  }
  .cc-value {
    font-family: var(--mono); font-size: 19px; color: var(--text);
    text-decoration: none; word-break: break-all; font-weight: 500;
    transition: color .25s, text-shadow .25s;
    margin-bottom: 14px;
  }
  a.cc-value:hover, .contact-card:hover .cc-value {
    color: var(--glow);
    text-shadow: 0 0 12px rgba(0,255,204,.5);
  }
  .cc-value.static { color: var(--text); }
  .cc-coords {
    font-family: var(--mono); font-size: 11px; color: var(--soft);
    letter-spacing: .08em; margin-top: -10px; margin-bottom: 14px;
  }

  .cc-actions {
    display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap;
  }
  .cc-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
    padding: 8px 12px;
    border: 1px solid var(--hair); color: var(--dim);
    background: transparent; cursor: pointer;
    text-decoration: none;
    transition: all .2s;
  }
  .cc-btn:hover {
    border-color: var(--glow); color: var(--glow);
    background: rgba(0,255,204,.06);
    box-shadow: 0 0 12px rgba(0,255,204,.25);
  }
  .cc-btn.primary {
    border-color: var(--glow); color: var(--glow);
    background: rgba(0,255,204,.08);
  }
  .cc-btn.primary:hover {
    background: var(--glow); color: #001; font-weight: 700;
  }
  .cc-btn.full { flex: 1; justify-content: center; }
  .cc-btn .cb-icon { font-size: 13px; }
  .cc-btn.copied {
    border-color: var(--glow); color: var(--glow);
    background: rgba(0,255,204,.18);
  }

  .cc-footer {
    font-family: var(--mono); font-size: 10px; color: var(--dim);
    margin-top: 12px; letter-spacing: .04em;
    border-top: 1px dashed var(--hair); padding-top: 10px;
  }

  /* ── contact · comms relay (panel de comunicación) ── */
  .comms-relay {
    border: 1px solid var(--hair);
    background:
      linear-gradient(180deg, rgba(0,255,204,.015), transparent 8%),
      radial-gradient(circle at 50% -10%, rgba(0,255,204,.08), transparent 60%),
      #06070a;
    position: relative;
    overflow: hidden;
  }
  .comms-relay::before {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,.02) 2px 3px);
    pointer-events: none;
    z-index: 5;
  }
  .comms-relay::after {
    content: "";
    position: absolute; left: -30%; top: 0; bottom: 0;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(0,255,204,.06), transparent);
    pointer-events: none;
    z-index: 6;
    animation: commsSweep 11s linear infinite;
  }
  @keyframes commsSweep {
    0%   { transform: translateX(0); }
    100% { transform: translateX(450%); }
  }

  .comms-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
    padding: 12px 18px;
    border-bottom: 1px solid var(--hair);
    background: linear-gradient(180deg, rgba(0,255,204,.06), rgba(0,255,204,.01));
    position: relative; z-index: 7;
  }
  .comms-header::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--glow), transparent);
    opacity: .6;
  }
  .comms-header .crh-left, .comms-header .crh-right {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  }
  .comms-header .crh-led {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--glow);
    box-shadow: 0 0 8px var(--glow), inset 0 0 4px rgba(255,255,255,.6);
    animation: ledPulse 1.6s ease-in-out infinite;
  }
  @keyframes ledPulse {
    50% { box-shadow: 0 0 14px var(--glow), inset 0 0 6px rgba(255,255,255,.9); }
  }
  .comms-header .crh-label { color: var(--glow); font-weight: 700; }
  .comms-header .crh-status { color: var(--text); }
  .comms-header .crh-sep { opacity: .35; }
  .comms-header .crh-channels { color: var(--soft); }
  .comms-header .crh-uptime { color: var(--dim); }
  .comms-header .crh-clock {
    color: var(--glow);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 6px rgba(0,255,204,.5);
  }

  .comms-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1.15fr;
    position: relative;
    z-index: 7;
  }
  @media (max-width: 980px) {
    .comms-grid { grid-template-columns: 1fr; }
  }

  .comms-card {
    --ch: var(--glow);
    position: relative;
    display: flex; flex-direction: column;
    min-height: 380px;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    border-right: 1px solid var(--hair);
    transition: background .35s;
    background: linear-gradient(180deg, rgba(255,255,255,.01), transparent 50%);
  }
  .comms-card:last-child { border-right: none; }
  @media (max-width: 980px) {
    .comms-card { border-right: none; border-bottom: 1px solid var(--hair); }
    .comms-card:last-child { border-bottom: none; }
  }
  .comms-card:hover {
    background:
      radial-gradient(circle at 50% 0%, color-mix(in oklab, var(--ch) 12%, transparent), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.015), transparent 50%);
  }
  .comms-card:focus-visible { outline: 1px solid var(--ch); outline-offset: -3px; }
  .comms-card::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 110%, transparent 30%, rgba(0,0,0,.5) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .cc-bar {
    position: relative; z-index: 3;
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
    transition: border-color .35s;
  }
  .comms-card:hover .cc-bar { border-bottom-color: color-mix(in oklab, var(--ch) 40%, transparent); }
  .cc-traffic { display: flex; gap: 5px; }
  .cc-traffic .ccd {
    width: 9px; height: 9px; border-radius: 50%;
    box-shadow: inset 0 0 3px rgba(0,0,0,.6);
  }
  .cc-traffic .ccd:nth-child(1) { background: rgba(255,90,90,.55); }
  .cc-traffic .ccd:nth-child(2) { background: rgba(255,200,80,.55); }
  .cc-traffic .ccd:nth-child(3) { background: rgba(80,255,160,.55); }
  .cc-title {
    color: var(--ch);
    text-transform: uppercase; text-align: center;
    text-shadow: 0 0 6px color-mix(in oklab, var(--ch) 65%, transparent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cc-led {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--soft); font-size: 9px;
  }
  .cc-led .d {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ch); box-shadow: 0 0 6px var(--ch);
  }
  .cc-led .d.alt {
    background: rgba(255,255,255,.55);
    box-shadow: 0 0 4px rgba(255,255,255,.4);
  }
  .cc-led .d.blink   { animation: blink 1.1s steps(2) infinite; }
  .cc-led .d.blink-d { animation: blink 1.1s steps(2) infinite .35s; }
  @keyframes blink { 50% { opacity: .2; } }

  .cc-screen {
    position: relative; z-index: 2;
    flex: 1;
    padding: 16px 16px 12px;
    display: flex; flex-direction: column; gap: 12px;
    min-height: 0;
  }

  .cc-glyph {
    position: absolute;
    right: 8px; top: -10px;
    font-family: var(--mono);
    font-size: 150px; font-weight: 700;
    line-height: 0.9;
    color: var(--ch);
    opacity: .06;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 0 22px var(--ch);
  }

  .cc-bracket {
    position: absolute;
    width: 14px; height: 14px;
    border: 1.5px solid var(--ch);
    box-shadow: 0 0 6px var(--ch);
    opacity: 0;
    transition: opacity .3s;
    z-index: 4;
    pointer-events: none;
  }
  .comms-card:hover .cc-bracket { opacity: .9; }
  .cc-bracket.tl { top: 6px;    left: 6px;    border-right: none; border-bottom: none; }
  .cc-bracket.tr { top: 6px;    right: 6px;   border-left: none;  border-bottom: none; }
  .cc-bracket.bl { bottom: 6px; left: 6px;    border-right: none; border-top: none; }
  .cc-bracket.br { bottom: 6px; right: 6px;   border-left: none;  border-top: none; }

  .cc-copy {
    position: absolute;
    top: 50px; right: 10px;
    z-index: 5;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--soft);
    font-family: var(--mono); font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s, color .2s, border-color .2s, background .2s, transform .2s;
  }
  .comms-card:hover .cc-copy { opacity: 1; }
  .cc-copy:hover { color: var(--ch); border-color: var(--ch); background: rgba(0,255,204,.08); }
  .cc-copy.copied { color: var(--ch); border-color: var(--ch); transform: scale(1.08); }

  .cc-foot {
    position: relative; z-index: 3;
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,.05);
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    font-family: var(--mono); font-size: 11px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.25));
  }
  .cc-foot .cc-addr {
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cc-foot .cc-action {
    color: var(--ch);
    letter-spacing: .15em;
    font-size: 10px;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    transition: text-shadow .25s;
  }
  .cc-foot .cc-action .arr { transition: transform .25s; }
  .comms-card:hover .cc-action { text-shadow: 0 0 10px var(--ch); }
  .comms-card:hover .cc-action .arr { transform: translate(3px,-3px); }

  /* EMAIL channel */
  .cc-log {
    list-style: none; padding: 0; margin: 0;
    font-family: var(--mono); font-size: 11.5px; line-height: 1.7;
    color: var(--dim);
    flex: 1; min-height: 0; overflow: hidden;
  }
  .cc-log li {
    opacity: 0;
    animation: logIn .35s ease-out forwards;
  }
  .cc-log li.ok  { color: var(--ch); }
  .cc-log li.cur { color: var(--text); }
  .cc-log li.cur .cursor {
    color: var(--ch);
    animation: blink 1s steps(2) infinite;
    margin-left: 2px;
  }
  @keyframes logIn { to { opacity: 1; } }

  .cc-meter {
    display: flex; flex-direction: column; gap: 5px;
    font-family: var(--mono); font-size: 9.5px; color: var(--soft);
    letter-spacing: .1em;
  }
  .cc-meter .row {
    display: grid; grid-template-columns: 20px 1fr 60px;
    align-items: center; gap: 8px;
  }
  .cc-meter .bar {
    height: 4px; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.04);
    overflow: hidden; position: relative;
  }
  .cc-meter .fill {
    height: 100%; width: 60%;
    background: linear-gradient(90deg, transparent, var(--ch));
    animation: meterTx 2.4s ease-in-out infinite;
  }
  .cc-meter .fill.rx { animation: meterRx 2.4s ease-in-out infinite .6s; }
  .cc-meter .val { text-align: right; color: var(--ch); }
  @keyframes meterTx { 0%,100% { width: 22%; } 50% { width: 78%; } }
  @keyframes meterRx { 0%,100% { width:  8%; } 50% { width: 32%; } }

  /* VOICE channel */
  .cc-wave { width: 100%; height: 84px; display: block; }
  .cc-readout {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: auto;
  }
  .cc-readout .dr-num {
    font-family: var(--mono); font-size: 22px; font-weight: 700;
    color: var(--text); letter-spacing: .02em;
    text-shadow: 0 0 14px color-mix(in oklab, var(--ch) 40%, transparent);
  }
  .cc-readout .dr-band {
    display: flex; gap: 10px;
    font-family: var(--mono); font-size: 9.5px;
    color: var(--soft); letter-spacing: .12em;
    flex-wrap: wrap;
  }
  .cc-readout .dr-band span {
    border-left: 1px solid rgba(255,255,255,.1);
    padding-left: 8px;
  }
  .cc-readout .dr-band span:first-child {
    border-left: none; padding-left: 0;
  }
  .cc-readout .dr-band b { color: var(--ch); font-weight: 500; }

  /* NETMAP channel */
  .cc-graph {
    width: 100%; aspect-ratio: 1 / 1;
    max-height: 200px;
    display: block;
    margin: 0 auto;
  }
  .cc-graph .ring   { fill: none; stroke: var(--ch); }
  .cc-graph .link   { stroke: var(--ch); stroke-opacity: .25; stroke-width: 1; }
  .cc-graph .link.active { stroke-opacity: .9; }
  .cc-graph .node   { fill: var(--ch); }
  .cc-graph .node.peer { fill: var(--ch); fill-opacity: .55; }
  .cc-graph .center {
    fill: #06070a; stroke: var(--ch); stroke-width: 1.5;
    filter: drop-shadow(0 0 6px var(--ch));
  }
  .cc-graph .center-text {
    fill: var(--ch); font-family: var(--mono);
    font-size: 9px; font-weight: 700;
    text-anchor: middle; dominant-baseline: middle;
  }

  .cc-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: auto;
    font-family: var(--mono); font-size: 9.5px; color: var(--soft);
    letter-spacing: .12em;
  }
  .cc-stats .stat-cell {
    border-left: 1px solid rgba(255,255,255,.08);
    padding: 4px 0 4px 8px;
  }
  .cc-stats .stat-cell:first-child { border-left: none; padding-left: 0; }
  .cc-stats .stat-cell .val {
    display: block;
    color: var(--ch);
    font-size: 16px; font-weight: 700; letter-spacing: 0;
    text-shadow: 0 0 6px color-mix(in oklab, var(--ch) 50%, transparent);
    margin-bottom: 2px;
  }

  /* ── contact · comms cards (email / teléfono / LinkedIn) ── */
  .comms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  @media (max-width: 1080px) {
    .comms-grid { grid-template-columns: 1fr; }
  }

  .comms-card {
    --ch: var(--glow);
    position: relative;
    display: flex; flex-direction: column;
    border: 1px solid var(--hair);
    background:
      linear-gradient(180deg, rgba(255,255,255,.015), transparent 50%),
      radial-gradient(circle at 50% -10%, color-mix(in oklab, var(--ch) 8%, transparent), transparent 70%),
      #0a0b10;
    padding: 22px 18px 18px;
    overflow: hidden;
    isolation: isolate;
    transition: border-color .3s, transform .3s, box-shadow .3s;
    min-height: 240px;
    min-width: 0; /* allow ellipsis on children inside grid */
  }
  .comms-card:hover {
    border-color: color-mix(in oklab, var(--ch) 60%, transparent);
    transform: translateY(-3px);
    box-shadow:
      0 18px 50px rgba(0,0,0,.5),
      0 0 0 1px color-mix(in oklab, var(--ch) 15%, transparent),
      0 0 32px color-mix(in oklab, var(--ch) 18%, transparent);
  }

  /* subtle scanlines */
  .comms-card::before {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,.02) 2px 3px);
    pointer-events: none;
    z-index: 1;
  }
  /* ghost glyph in background */
  .cc-glyph {
    position: absolute;
    right: -14px; bottom: -32px;
    font-family: var(--mono);
    font-size: 180px; font-weight: 700;
    line-height: 0.9;
    color: var(--ch);
    opacity: .05;
    pointer-events: none; user-select: none;
    text-shadow: 0 0 22px var(--ch);
    z-index: 0;
  }

  /* corner brackets */
  .cc-bracket {
    position: absolute;
    width: 12px; height: 12px;
    border: 1.5px solid var(--ch);
    opacity: 0;
    transition: opacity .3s;
    z-index: 2; pointer-events: none;
  }
  .comms-card:hover .cc-bracket { opacity: .85; box-shadow: 0 0 6px var(--ch); }
  .cc-bracket.tl { top: 8px;    left: 8px;    border-right: none; border-bottom: none; }
  .cc-bracket.tr { top: 8px;    right: 8px;   border-left: none;  border-bottom: none; }
  .cc-bracket.bl { bottom: 8px; left: 8px;    border-right: none; border-top: none; }
  .cc-bracket.br { bottom: 8px; right: 8px;   border-left: none;  border-top: none; }

  /* channel header line: label + LED status */
  .cc-head {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
    color: var(--ch);
    margin-bottom: 18px;
  }
  .cc-head .cc-label {
    text-transform: uppercase;
    text-shadow: 0 0 6px color-mix(in oklab, var(--ch) 50%, transparent);
  }
  .cc-head .cc-led {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--soft); font-size: 9px;
  }
  .cc-head .cc-led .d {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ch); box-shadow: 0 0 6px var(--ch);
    animation: ledPulse 1.6s ease-in-out infinite;
  }
  @keyframes ledPulse { 50% { box-shadow: 0 0 12px var(--ch); } }

  /* THE hero — the actual contact info */
  .cc-value {
    position: relative; z-index: 2;
    font-family: var(--mono);
    font-size: clamp(16px, 1.55vw, 21px);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-bottom: 8px;
    text-decoration: none;
    transition: color .25s, text-shadow .25s;
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  a.cc-value:hover { color: var(--ch); text-shadow: 0 0 14px color-mix(in oklab, var(--ch) 45%, transparent); }

  .cc-sub {
    position: relative; z-index: 2;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--dim);
    letter-spacing: .04em;
    margin-bottom: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cc-sub b { color: var(--soft); font-weight: 500; }

  /* button row — always visible */
  .cc-buttons {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-top: auto;
  }
  .cc-btn {
    appearance: none;
    border: 1px solid var(--hair);
    background: transparent;
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px; letter-spacing: .12em;
    padding: 11px 12px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: border-color .2s, background .2s, color .2s, transform .2s;
  }
  .cc-btn:hover {
    border-color: var(--ch); color: var(--ch);
    background: color-mix(in oklab, var(--ch) 8%, transparent);
  }
  .cc-btn:focus-visible { outline: 1px solid var(--ch); outline-offset: 2px; }
  .cc-btn.primary {
    border-color: var(--ch);
    color: var(--ch);
    background: color-mix(in oklab, var(--ch) 12%, transparent);
    font-weight: 700;
  }
  .cc-btn.primary:hover {
    background: color-mix(in oklab, var(--ch) 22%, transparent);
    box-shadow: 0 0 18px color-mix(in oklab, var(--ch) 35%, transparent);
  }
  .cc-btn .ic { font-size: 12px; line-height: 1; }
  .cc-btn .arr { transition: transform .25s; }
  .cc-btn.primary:hover .arr { transform: translate(3px, -3px); }
  .cc-btn.copied {
    border-color: var(--ch); color: var(--ch);
    background: color-mix(in oklab, var(--ch) 18%, transparent);
  }

  /* legacy comms-relay / comms-header / cc-bar / etc. unused now */

  /* CTA Row */
  .cta-row {
    margin-top: 28px;
    display: grid; grid-template-columns: 2fr 1fr; gap: 20px;
  }
  .cta-big {
    position: relative;
    display: flex; align-items: center; gap: 18px;
    padding: 24px 28px;
    border: 1px solid var(--glow);
    background: linear-gradient(135deg, rgba(0,255,204,.1), rgba(0,255,204,.02));
    text-decoration: none; color: var(--text);
    overflow: hidden;
    transition: background .3s, transform .3s, box-shadow .3s;
  }
  .cta-big:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 40px rgba(0,255,204,.25);
    background: linear-gradient(135deg, rgba(0,255,204,.18), rgba(0,255,204,.05));
  }
  .cta-big::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(0,255,204,.18) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform 1s ease;
  }
  .cta-big:hover::before { transform: translateX(110%); }
  .cta-big .cta-icon {
    font-family: var(--mono); font-size: 28px; color: var(--glow);
    width: 54px; height: 54px;
    border: 1.5px solid var(--glow);
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 12px rgba(0,255,204,.2), 0 0 16px rgba(0,255,204,.25);
    animation: arrowBob 2s ease-in-out infinite;
  }
  @keyframes arrowBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
  }
  .cta-big .cta-text { display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .cta-big .cta-main {
    font-family: var(--sans); font-weight: 700; font-size: 20px;
    letter-spacing: -.01em; color: var(--text);
  }
  .cta-big .cta-sub {
    font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: .05em;
  }
  .cta-big .cta-arrow {
    font-family: var(--mono); font-size: 22px; color: var(--glow);
    transition: transform .25s;
  }
  .cta-big:hover .cta-arrow { transform: translateX(6px); }

  .cta-availability {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 24px;
    border: 1px solid var(--hair);
    background: linear-gradient(160deg, var(--card-2), var(--card));
  }
  .cta-availability .ca-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: #00ff88; box-shadow: 0 0 14px #00ff88, 0 0 28px rgba(0,255,136,.4);
    animation: blink 1.4s infinite;
    flex-shrink: 0;
  }
  .cta-availability .ca-state {
    font-family: var(--mono); font-size: 14px; font-weight: 700;
    color: #00ff88; letter-spacing: .1em;
  }
  .cta-availability .ca-sub {
    font-family: var(--mono); font-size: 11px; color: var(--dim);
    margin-top: 3px;
  }

  /* copy toast */
  .copy-toast {
    position: fixed; left: 50%; bottom: 40px;
    transform: translate(-50%, 120%);
    background: var(--glow); color: #001;
    font-family: var(--mono); font-size: 13px; font-weight: 700;
    padding: 10px 18px; letter-spacing: .1em;
    box-shadow: 0 0 24px rgba(0,255,204,.55), 0 14px 40px rgba(0,0,0,.5);
    z-index: 100;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .copy-toast.show { transform: translate(-50%, 0); }

  /* ── 10 · FOOTER + RESPONSIVE ──────────────────────────────── */
  /* ── footer ── */
  footer {
    position: relative; z-index: 10;
    padding: 40px 8vw; border-top: 1px solid var(--hair);
    font-family: var(--mono); font-size: 11px; color: var(--dim);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  }
  footer .glow { color: var(--glow); }

  /* ── responsive · breakpoints 900 → 420 px ── */
  @media (max-width: 900px) {
    /* nav becomes a stacked top bar with a horizontal-scroll link strip */
    .nav {
      padding: 10px 14px;
      flex-wrap: wrap;
      gap: 8px 12px;
    }
    .brand { font-size: 12px; }
    .status { font-size: 10px; gap: 6px; }
    .navlinks {
      display: flex;
      order: 3;
      width: 100%;
      gap: 0;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
      padding: 4px 0 2px;
    }
    .navlinks::-webkit-scrollbar { display: none; }
    .navlinks a {
      flex: 0 0 auto;
      font-size: 11px;
      padding: 6px 10px;
      white-space: nowrap;
    }
    .navlinks a .num { margin-right: 4px; }

    .side-progress { display: none; }

    section { padding: 90px 5vw 70px; }
    .section-label { font-size: 11px; margin-bottom: 18px; }

    /* HERO */
    #hero {
      grid-template-columns: 1fr; gap: 32px;
      padding-top: 96px; padding-bottom: 40px;
      min-height: auto;
    }
    .hero-title { font-size: clamp(40px, 13vw, 72px); }
    .hero-sub { font-size: 13px; }
    .hero-right { max-width: 320px; justify-self: center; width: 100%; }
    .hero-meta { gap: 14px 22px; margin-top: 28px; }
    .hero-meta > div { flex: 1 1 calc(50% - 22px); min-width: 110px; }
    .hero-meta .k, .hero-meta .v { font-size: 11px; }
    .hero-actions { gap: 10px; }
    .btn { font-size: 12px; padding: 11px 16px; }

    /* ABOUT */
    #about { grid-template-columns: 1fr; gap: 36px; }
    .about-text h2 { font-size: clamp(30px, 8.5vw, 42px); }
    .matrix-text { font-size: 14px; line-height: 1.7; }
    .id-card-3d { justify-self: center; max-width: 360px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; }
    .stat { padding: 12px 14px; }
    .stat .num { font-size: 22px; }

    /* SKILLS */
    #skills h2 { font-size: clamp(28px, 8vw, 40px); }
    .skill-cats { grid-template-columns: 1fr; gap: 22px; }
    .skill-cat { padding: 18px 16px; }
    .cat-head { margin-bottom: 14px; padding-bottom: 10px; }
    .skill-cat .cat-title { font-size: 11px; gap: 8px; }
    .hex-grid { column-gap: 4px; }
    .hex { gap: 3px; padding: 0 6px; }
    .hex .ic { font-size: 14px; }
    .hex .lab { font-size: 10px; }
    .hex .lvl { font-size: 7.5px; letter-spacing: .12em; }
    .hex .dots { gap: 2.5px; margin-top: 2px; }
    .hex .dots i { width: 4px; height: 4px; }
    .skill-tags { margin-top: 16px; padding-top: 12px; gap: 5px; }
    .skill-tags .tag { font-size: 9.5px; padding: 2px 7px; }

    /* PROJECTS */
    #projects h2 { font-size: clamp(28px, 8vw, 40px); }
    .proj-grid { grid-template-columns: 1fr; gap: 20px; }
    .proj-card {
      padding: 22px 20px;
      min-height: auto;
    }
    .proj-card h3 { font-size: 20px; }
    .proj-card .blurb { font-size: 12.5px; }
    .proj-card .ascii {
      font-size: 8.5px;
      overflow-x: auto;
      padding-bottom: 6px;
      -webkit-overflow-scrolling: touch;
    }
    .proj-meta { font-size: 10px; }

    /* EDU */
    .edu-grid { grid-template-columns: 1fr; gap: 14px; }
    .edu-item { padding: 18px; }

    /* CONTACT */
    #contact .contact-h2 { font-size: clamp(28px, 8vw, 40px); }
    .contact-grid { grid-template-columns: 1fr; }
    .contact-card.lg { grid-column: span 1; }
    .cta-row { grid-template-columns: 1fr; }
    .comms-card { min-height: 320px; }
    .cc-screen { padding: 14px 14px 10px; }
    .cc-glyph { font-size: 110px; }
    .cc-value { font-size: 16px; }

    /* lighten the heavy background grid so foreground reads better */
    .bg-grid { background-size: 36px 36px; opacity: .7; }
  }

  /* extra-narrow phones */
  @media (max-width: 520px) {
    section { padding: 80px 4vw 60px; }
    .hero-meta > div { flex: 1 1 100%; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { justify-content: center; }
    .stat-grid { grid-template-columns: 1fr; }
    .skill-cat { padding: 16px 12px; }
    .hex { padding: 0 4px; }
    .hex .ic { font-size: 13px; }
    .hex .lab { font-size: 9px; letter-spacing: 0; }
    .hex .lvl { font-size: 7px; }
    .proj-card { padding: 20px 16px; }
    .id-card-3d { max-width: 280px; }
    .scanlines { opacity: .35; }
  }

  /* burst particles */
  .burst {
    position: fixed; width: 6px; height: 6px; border-radius: 50%;
    background: var(--glow); box-shadow: 0 0 10px var(--glow);
    pointer-events: none; z-index: 30;
  }

  /* ── 09 · PROYECTOR HOLOGRÁFICO ─────────────────────────────
     Sistema en 3 estados gestionados por clases en <body>:
       · Por defecto → .idp-puck en flujo, overlay oculto
       · idp-open    → overlay visible, puck portado al <body>
       · idp-closing → hologram power-off, puck vuelve a origen
     Las variables --idp-from-* / --idp-to-* las escribe JS antes
     de iniciar la transición para el FLIP de posición.
     ─────────────────────────────────────────────────────────── */
  /* ── proyector · puck colapsado (base del proyector) ── */
  /* scoped electric-blue palette for the projector + hologram only.
     Everywhere inside this scope, var(--glow)/var(--soft)/var(--hair) resolve
     to blue instead of the global cyan — so corner brackets, back-button text,
     readout LEDs, badge, header etc. all match the rgba blues used elsewhere. */
  .id-projector,
  .idp-overlay,
  .idp-puck,
  .idp-puck.is-launching {
    --glow: #4ab8ff;
    --soft: rgba(80, 170, 255, .6);
    --hair: rgba(80, 170, 255, .22);
  }

  .id-projector {
    position: relative;
    width: 100%;
    display: flex; flex-direction: column;
    align-items: flex-end; justify-content: center;
    gap: 22px;
    min-height: 380px;
    padding: 220px clamp(20px, 6vw, 80px) 20px 0;  /* push puck down so it sits around the vertical
                                midpoint of the about-text column */
  }

  /* ---- COLLAPSED: puck (the projector base, sitting flat) ---- */
  .idp-puck {
    position: relative;
    width: clamp(230px, 22vw, 300px);
    aspect-ratio: 1 / 1;
    background: transparent; border: 0; padding: 0; margin: 0;
    cursor: pointer;
    display: grid; place-items: center;
    isolation: isolate;
    transform: translateZ(0);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  }
  .idp-puck:hover { transform: translateY(-3px); filter: brightness(1.08); }
  .idp-puck:active { transform: translateY(-1px) scale(.985); }
  .idp-puck:focus-visible { outline: none; }
  .idp-puck:focus-visible .idp-puck-disc {
    box-shadow:
      0 0 0 2px rgba(80, 170, 255,.6),
      0 0 60px rgba(80, 170, 255,.45),
      inset 0 14px 30px rgba(80, 170, 255,.18),
      inset 0 -34px 60px rgba(0,0,0,.7);
  }

  /* dark elliptical ground shadow under the puck */
  .idp-puck-shadow {
    position: absolute;
    left: 50%; bottom: -16px; transform: translateX(-50%);
    width: 86%; height: 36px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 70%);
    filter: blur(6px);
    z-index: -1;
  }

  /* the disc itself */
  .idp-puck-disc {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 30%, #15243a 0%, #070d18 55%, #03060a 100%);
    box-shadow:
      0 0 0 1px rgba(80, 170, 255,.18),
      0 0 50px -6px rgba(80, 170, 255,.35),
      inset 0 14px 30px rgba(80, 170, 255,.10),
      inset 0 -34px 60px rgba(0,0,0,.7);
    overflow: hidden;
  }
  /* inner bezel */
  .idp-puck-disc::before {
    content: ""; position: absolute; inset: 6%;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 35%, #101a2b 0%, #06090f 70%, #02040a 100%);
    box-shadow:
      inset 0 0 0 1px rgba(80, 170, 255,.10),
      inset 0 10px 24px rgba(0,0,0,.7),
      inset 0 -10px 30px rgba(80, 170, 255,.12);
  }
  /* concentric tech rings */
  .idp-puck-ring {
    position: absolute; border-radius: 50%;
    pointer-events: none;
    border: 1px solid rgba(80, 170, 255,.28);
  }
  .idp-puck-ring.r1 { inset: 11%; border-style: dashed; animation: idpSpin 22s linear infinite; }
  .idp-puck-ring.r2 { inset: 18%; opacity: .55; animation: idpSpin 30s linear infinite reverse; }
  .idp-puck-ring.r3 {
    inset: 26%;
    border-color: rgba(80, 170, 255,.45);
    box-shadow: 0 0 18px rgba(80, 170, 255,.25), inset 0 0 18px rgba(80, 170, 255,.18);
  }
  @keyframes idpSpin { to { transform: rotate(360deg); } }

  /* LEDs around the rim */
  .idp-puck-leds {
    position: absolute; inset: 0;
  }
  .idp-puck-leds i {
    position: absolute; top: 50%; left: 50%;
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(80, 170, 255,.85);
    box-shadow: 0 0 8px rgba(80, 170, 255,.9);
    margin: -2px 0 0 -2px;
    transform-origin: 0 0;
  }
  .idp-puck-leds i:nth-child(1)  { transform: rotate(  0deg) translate(46%) rotate(  0deg); animation: idpLed 2.4s ease-in-out infinite .00s; }
  .idp-puck-leds i:nth-child(2)  { transform: rotate( 22deg) translate(46%) rotate(-22deg); animation: idpLed 2.4s ease-in-out infinite .08s; }
  .idp-puck-leds i:nth-child(3)  { transform: rotate( 45deg) translate(46%) rotate(-45deg); animation: idpLed 2.4s ease-in-out infinite .16s; }
  .idp-puck-leds i:nth-child(4)  { transform: rotate( 67deg) translate(46%) rotate(-67deg); animation: idpLed 2.4s ease-in-out infinite .24s; }
  .idp-puck-leds i:nth-child(5)  { transform: rotate( 90deg) translate(46%) rotate(-90deg); animation: idpLed 2.4s ease-in-out infinite .32s; }
  .idp-puck-leds i:nth-child(6)  { transform: rotate(112deg) translate(46%) rotate(-112deg); animation: idpLed 2.4s ease-in-out infinite .40s; }
  .idp-puck-leds i:nth-child(7)  { transform: rotate(135deg) translate(46%) rotate(-135deg); animation: idpLed 2.4s ease-in-out infinite .48s; }
  .idp-puck-leds i:nth-child(8)  { transform: rotate(157deg) translate(46%) rotate(-157deg); animation: idpLed 2.4s ease-in-out infinite .56s; }
  .idp-puck-leds i:nth-child(9)  { transform: rotate(180deg) translate(46%) rotate(-180deg); animation: idpLed 2.4s ease-in-out infinite .64s; }
  .idp-puck-leds i:nth-child(10) { transform: rotate(202deg) translate(46%) rotate(-202deg); animation: idpLed 2.4s ease-in-out infinite .72s; }
  .idp-puck-leds i:nth-child(11) { transform: rotate(225deg) translate(46%) rotate(-225deg); animation: idpLed 2.4s ease-in-out infinite .80s; }
  .idp-puck-leds i:nth-child(12) { transform: rotate(247deg) translate(46%) rotate(-247deg); animation: idpLed 2.4s ease-in-out infinite .88s; }
  .idp-puck-leds i:nth-child(13) { transform: rotate(270deg) translate(46%) rotate(-270deg); animation: idpLed 2.4s ease-in-out infinite .96s; }
  .idp-puck-leds i:nth-child(14) { transform: rotate(292deg) translate(46%) rotate(-292deg); animation: idpLed 2.4s ease-in-out infinite 1.04s; }
  .idp-puck-leds i:nth-child(15) { transform: rotate(315deg) translate(46%) rotate(-315deg); animation: idpLed 2.4s ease-in-out infinite 1.12s; }
  .idp-puck-leds i:nth-child(16) { transform: rotate(337deg) translate(46%) rotate(-337deg); animation: idpLed 2.4s ease-in-out infinite 1.20s; }
  @keyframes idpLed {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
  }

  /* grid texture inside the disc */
  .idp-puck-grid {
    position: absolute; inset: 14%;
    border-radius: 50%;
    background:
      linear-gradient(rgba(80, 170, 255,.10) 1px, transparent 1px) 0 0 / 100% 16px,
      linear-gradient(90deg, rgba(80, 170, 255,.10) 1px, transparent 1px) 0 0 / 16px 100%;
    mask: radial-gradient(circle at 50% 50%, #000 55%, transparent 75%);
    opacity: .6;
    pointer-events: none;
  }

  /* core label */
  .idp-puck-core {
    position: relative; z-index: 3;
    display: grid; place-items: center; gap: 10px;
    text-align: center;
  }
  .idp-puck-glyph {
    font-family: var(--mono);
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 700;
    letter-spacing: .04em;
    color: #ffffff;
    text-shadow:
      0 0 12px rgba(80, 170, 255,.85),
      0 0 28px rgba(80, 170, 255,.45);
  }
  .idp-puck-tap {
    font-family: var(--mono);
    font-size: 9.5px; letter-spacing: .28em;
    color: rgba(80, 170, 255,.8);
    text-shadow: 0 0 6px rgba(80, 170, 255,.6);
    animation: idpBlink 1.4s ease-in-out infinite;
  }
  @keyframes idpBlink { 50% { opacity: .35; } }

  /* outward pulse rings */
  .idp-puck-pulse {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid rgba(80, 170, 255,.55);
    animation: idpPulse 2.6s ease-out infinite;
    pointer-events: none;
  }
  .idp-puck-pulse--d { animation-delay: 1.3s; }
  @keyframes idpPulse {
    0%   { transform: scale(1);   opacity: .55; }
    100% { transform: scale(1.5); opacity: 0;   }
  }

  /* meta strip under the puck */
  .idp-puck-meta {
    display: flex; justify-content: space-between;
    width: clamp(230px, 22vw, 300px);
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .18em; color: var(--soft);
    margin-top: 4px;
  }
  .idp-puck-meta-r { color: var(--glow); }

  /* central emitter — hidden in normal state, revealed when puck becomes the base */
  .idp-puck-emitter {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 22%; height: 22%;
    border-radius: 50%;
    background: radial-gradient(circle, #dbe9ff 0%, rgba(80, 170, 255,.85) 20%, rgba(80, 170, 255,.25) 60%, transparent 100%);
    box-shadow: 0 0 30px rgba(80, 170, 255,.9);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease .5s;
  }
  .idp-puck-emitter span {
    position: absolute; inset: 22%; border-radius: 50%;
    border: 1px solid rgba(80, 170, 255,.7);
    animation: idpEmitterRing 2s ease-out infinite;
  }
  .idp-puck-emitter span:nth-child(2) { animation-delay: .66s; }
  .idp-puck-emitter span:nth-child(3) { animation-delay: 1.32s; }
  @keyframes idpEmitterRing {
    0%   { transform: scale(.6); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
  }
  @keyframes idpEmitterPulse {
    0%, 100% { box-shadow: 0 0 24px rgba(80, 170, 255,.7); }
    50%      { box-shadow: 0 0 40px rgba(80, 170, 255,1); }
  }

  /* ── proyector · estado FLIP — puck vuela a posición base ─── */
  /* "is-launching" applied while the puck is portaled to <body>.
     Position/size start at the original rect (set via inline CSS vars),
     then transition to the base position. */
  .idp-puck.is-launching {
    position: fixed !important;
    margin: 0 !important;
    left: var(--idp-from-x, 0px);
    top: var(--idp-from-y, 0px);
    width: var(--idp-from-w, 240px);
    height: var(--idp-from-h, 240px);
    z-index: 2; /* between backdrop layers (0-1) and cone (3) / holo (4) */
    pointer-events: auto;
    transition:
      left  .85s cubic-bezier(.2,.7,.2,1),
      top   .85s cubic-bezier(.2,.7,.2,1),
      width .85s cubic-bezier(.2,.7,.2,1),
      height .85s cubic-bezier(.2,.7,.2,1),
      transform .85s cubic-bezier(.2,.7,.2,1);
  }
  /* final state: at the bottom-center, tilted into perspective like a real base */
  .idp-puck.is-launching.is-base {
    left: var(--idp-to-x, 50%);
    top: var(--idp-to-y, 70%);
    width: var(--idp-to-w, 320px);
    height: var(--idp-to-h, 320px);
    transform: translateX(-50%) perspective(900px) rotateX(60deg);
    transform-origin: 50% 50%;
    cursor: default;
  }
  /* tweak look while it's the base */
  .idp-puck.is-base .idp-puck-glyph,
  .idp-puck.is-base .idp-puck-tap {
    opacity: 0;
    transition: opacity .35s ease;
  }
  .idp-puck.is-base .idp-puck-pulse {
    opacity: 0;
    animation-play-state: paused;
  }
  .idp-puck.is-base .idp-puck-emitter {
    opacity: 1;
    animation: idpEmitterPulse 2.2s ease-in-out infinite;
  }
  .idp-puck.is-base .idp-puck-meta { display: none; }

  /* ===== 3D RELIEF BASE — sci-fi gadget look when puck becomes the base =====
     All these layers default to opacity 0 / invisible, and only reveal when
     .idp-puck has the .is-base class. They live inside the puck container, so
     they inherit the rotateX(60deg) tilt and stay perfectly concentric. */

  /* OUTER PLATE — extends BEYOND the disc, gives the base a sense of being
     mounted on a wider physical pad. Sits behind the disc. */
  .idp-puck-plate {
    position: absolute;
    inset: -34%;
    border-radius: 50%;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .65s ease .25s, transform .65s cubic-bezier(.2,.7,.2,1) .25s;
    z-index: 0;
    pointer-events: none;
  }
  .idp-puck.is-base .idp-puck-plate {
    opacity: 1;
    transform: scale(1);
  }
  .idp-puck-plate::before {
    /* main plate body — a slightly raised disc with a chamfered edge */
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 35%,
        rgba(20,30,42,.85) 0%,
        rgba(10,16,24,.92) 55%,
        rgba(4,7,12,.95) 78%,
        rgba(2,4,8,.85) 100%);
    box-shadow:
      0 0 0 1px rgba(80, 170, 255,.22),
      inset 0 6px 14px rgba(190, 220, 255,.10),
      inset 0 -12px 28px rgba(0,0,0,.7),
      0 0 60px rgba(80, 170, 255,.18);
  }
  .idp-puck-plate::after {
    /* inner chamfer ring — reads as a milled groove */
    content: "";
    position: absolute; inset: 14%;
    border-radius: 50%;
    box-shadow:
      inset 0 3px 8px rgba(0,0,0,.7),
      inset 0 -2px 6px rgba(80, 170, 255,.18),
      0 0 0 1px rgba(80, 170, 255,.18);
  }
  .idp-puck-plate-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }
  .idp-puck-plate-ring.r1 {
    inset: 6%;
    border: 1px dashed rgba(80, 170, 255,.32);
    animation: idpSpin 60s linear infinite;
  }
  .idp-puck-plate-ring.r2 {
    inset: 21%;
    border: 1px solid rgba(80, 170, 255,.55);
    box-shadow:
      0 0 12px rgba(80, 170, 255,.25),
      inset 0 0 12px rgba(80, 170, 255,.18);
  }
  .idp-puck-plate-ring.r3 {
    inset: -2%;
    border: 1px solid rgba(80, 170, 255,.14);
    box-shadow: 0 0 24px rgba(80, 170, 255,.15);
    animation: idpFloorPulse 4.2s ease-in-out infinite;
  }
  @keyframes idpFloorPulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
  }
  .idp-puck-plate-spokes {
    position: absolute; inset: 16%;
    border-radius: 50%;
    background:
      repeating-conic-gradient(from 0deg at 50% 50%,
        rgba(80, 170, 255,.0) 0deg 11deg,
        rgba(80, 170, 255,.18) 11deg 12deg);
    mask: radial-gradient(circle at 50% 50%, transparent 56%, #000 64%, #000 92%, transparent 100%);
    opacity: .75;
  }
  .idp-puck-plate-ticks {
    position: absolute; inset: 0;
  }
  .idp-puck-plate-ticks i {
    position: absolute; top: 50%; left: 50%;
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(80, 170, 255,.9);
    box-shadow: 0 0 8px rgba(80, 170, 255,.9);
    margin: -2.5px 0 0 -2.5px;
    transform-origin: 0 0;
  }
  .idp-puck-plate-ticks i:nth-child(1)  { transform: rotate(  0deg) translate(48%) rotate(  0deg); animation: idpLed 2.6s ease-in-out infinite .00s; }
  .idp-puck-plate-ticks i:nth-child(2)  { transform: rotate( 30deg) translate(48%) rotate(-30deg); animation: idpLed 2.6s ease-in-out infinite .10s; }
  .idp-puck-plate-ticks i:nth-child(3)  { transform: rotate( 60deg) translate(48%) rotate(-60deg); animation: idpLed 2.6s ease-in-out infinite .20s; }
  .idp-puck-plate-ticks i:nth-child(4)  { transform: rotate( 90deg) translate(48%) rotate(-90deg); animation: idpLed 2.6s ease-in-out infinite .30s; }
  .idp-puck-plate-ticks i:nth-child(5)  { transform: rotate(120deg) translate(48%) rotate(-120deg); animation: idpLed 2.6s ease-in-out infinite .40s; }
  .idp-puck-plate-ticks i:nth-child(6)  { transform: rotate(150deg) translate(48%) rotate(-150deg); animation: idpLed 2.6s ease-in-out infinite .50s; }
  .idp-puck-plate-ticks i:nth-child(7)  { transform: rotate(180deg) translate(48%) rotate(-180deg); animation: idpLed 2.6s ease-in-out infinite .60s; }
  .idp-puck-plate-ticks i:nth-child(8)  { transform: rotate(210deg) translate(48%) rotate(-210deg); animation: idpLed 2.6s ease-in-out infinite .70s; }
  .idp-puck-plate-ticks i:nth-child(9)  { transform: rotate(240deg) translate(48%) rotate(-240deg); animation: idpLed 2.6s ease-in-out infinite .80s; }
  .idp-puck-plate-ticks i:nth-child(10) { transform: rotate(270deg) translate(48%) rotate(-270deg); animation: idpLed 2.6s ease-in-out infinite .90s; }
  .idp-puck-plate-ticks i:nth-child(11) { transform: rotate(300deg) translate(48%) rotate(-300deg); animation: idpLed 2.6s ease-in-out infinite 1.00s; }
  .idp-puck-plate-ticks i:nth-child(12) { transform: rotate(330deg) translate(48%) rotate(-330deg); animation: idpLed 2.6s ease-in-out infinite 1.10s; }

  /* CHAMFERED BEVEL — a milled metal collar around the disc rim */
  .idp-puck-bevel {
    position: absolute; inset: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease .35s;
    background:
      radial-gradient(circle at 50% 50%,
        transparent 0%,
        transparent 78%,
        rgba(40,60,80,.6) 80%,
        rgba(80,120,140,.8) 86%,
        rgba(20,30,40,.9) 92%,
        rgba(5,10,14,.95) 96%,
        rgba(0,0,0,.6) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(80, 170, 255,.45),
      inset 0 8px 14px rgba(190, 220, 255,.18),
      inset 0 -14px 22px rgba(0,0,0,.6);
  }
  .idp-puck.is-base .idp-puck-bevel { opacity: 1; }

  /* SCREWS — eight small recessed bolts around the rim */
  .idp-puck-screws {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .5s ease .45s;
  }
  .idp-puck.is-base .idp-puck-screws { opacity: 1; }
  .idp-puck-screws i {
    position: absolute; top: 50%; left: 50%;
    width: 9px; height: 9px; border-radius: 50%;
    margin: -4.5px 0 0 -4.5px;
    background:
      radial-gradient(circle at 50% 35%, #2c3a48 0%, #0c1218 60%, #04070b 100%);
    box-shadow:
      inset 0 1px 2px rgba(180,200,220,.35),
      inset 0 -1px 2px rgba(0,0,0,.7),
      0 0 0 1px rgba(0,0,0,.6);
    transform-origin: 0 0;
  }
  .idp-puck-screws i::before {
    content: ""; position: absolute;
    top: 50%; left: 50%;
    width: 60%; height: 1px;
    background: rgba(0,0,0,.85);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px rgba(180,200,220,.15);
  }
  .idp-puck-screws i:nth-child(1) { transform: rotate(  0deg) translate(40%) rotate(  0deg); }
  .idp-puck-screws i:nth-child(2) { transform: rotate( 45deg) translate(40%) rotate(-45deg); }
  .idp-puck-screws i:nth-child(3) { transform: rotate( 90deg) translate(40%) rotate(-90deg); }
  .idp-puck-screws i:nth-child(4) { transform: rotate(135deg) translate(40%) rotate(-135deg); }
  .idp-puck-screws i:nth-child(5) { transform: rotate(180deg) translate(40%) rotate(-180deg); }
  .idp-puck-screws i:nth-child(6) { transform: rotate(225deg) translate(40%) rotate(-225deg); }
  .idp-puck-screws i:nth-child(7) { transform: rotate(270deg) translate(40%) rotate(-270deg); }
  .idp-puck-screws i:nth-child(8) { transform: rotate(315deg) translate(40%) rotate(-315deg); }

  /* VENT SLATS — radial vents around the mid-tier, like a real heat sink */
  .idp-puck-vents {
    position: absolute; inset: 16%;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .5s ease .35s;
    background:
      repeating-conic-gradient(from 0deg at 50% 50%,
        rgba(0,0,0,.0) 0deg 6deg,
        rgba(0,0,0,.65) 6deg 7.5deg,
        rgba(80, 170, 255,.18) 7.5deg 8deg,
        rgba(0,0,0,.0) 8deg 12deg);
    mask: radial-gradient(circle at 50% 50%, transparent 55%, #000 62%, #000 86%, transparent 94%);
    pointer-events: none;
  }
  .idp-puck.is-base .idp-puck-vents { opacity: .85; }

  /* RECESSED CENTRAL WELL — the dark pit the emitter rises from */
  .idp-puck-well {
    position: absolute;
    top: 50%; left: 50%;
    width: 38%; height: 38%;
    margin: -19% 0 0 -19%;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .5s ease .35s;
    background:
      radial-gradient(circle at 50% 50%,
        #02050a 0%, #05080e 38%, #0a1320 70%, #0e1a28 100%);
    box-shadow:
      inset 0 8px 14px rgba(0,0,0,.95),
      inset 0 -6px 12px rgba(80, 170, 255,.22),
      inset 0 0 0 1px rgba(80, 170, 255,.32),
      0 0 18px rgba(80, 170, 255,.25);
  }
  .idp-puck.is-base .idp-puck-well { opacity: 1; }
  /* lift the emitter so it sits inside the well */
  .idp-puck.is-base .idp-puck-emitter {
    width: 26%; height: 26%;
    box-shadow: 0 0 40px rgba(80, 170, 255,1);
  }
  /* 3D-relief disc itself: stacked tiers via radial gradient + insets.
     Reads as a milled metal pad with stepped recesses going inward. */
  .idp-puck.is-base .idp-puck-disc {
    background:
      radial-gradient(circle at 50% 50%,
        #03060a 0%, #03060a 18%,                   /* central well shadow */
        #0a131f 20%, #0e1a28 26%,                   /* first rise */
        #050a12 28%, #0a1320 44%,                   /* mid plateau */
        #11202d 46%, #1a3144 52%,                   /* outer raised ring */
        #08111c 54%, #050810 100%);                 /* outer rim into chamfer */
    box-shadow:
      /* outer ring glow */
      0 0 0 1px rgba(80, 170, 255,.5),
      0 0 90px -4px rgba(80, 170, 255,.6),
      /* top highlight from above (the hologram light) */
      inset 0 18px 32px rgba(190, 220, 255,.22),
      /* deep underside shadow */
      inset 0 -38px 60px rgba(0,0,0,.8),
      /* subtle ring shadow */
      inset 0 0 28px rgba(80, 170, 255,.10);
  }
  /* hide the original dashed/spinning rings inside the disc once base —
     they read as 2D and clash with the new 3D relief. The plate has its
     own elegant rings outside. */
  .idp-puck.is-base .idp-puck-ring,
  .idp-puck.is-base .idp-puck-grid {
    opacity: 0;
    transition: opacity .35s ease;
  }
  /* LEDs still visible but dimmed so they read as inset indicators */
  .idp-puck.is-base .idp-puck-leds i {
    width: 3px; height: 3px;
    margin: -1.5px 0 0 -1.5px;
    background: rgba(80, 170, 255,.7);
    box-shadow: 0 0 5px rgba(80, 170, 255,.7), inset 0 0 0 1px rgba(0,0,0,.4);
  }
  /* ground shadow grows */
  .idp-puck.is-base .idp-puck-shadow {
    bottom: -28px;
    width: 110%;
    left: -5%;
    transform: none;
    height: 56px;
    opacity: .95;
    background: radial-gradient(50% 50% at 50% 50%,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.55) 40%,
      rgba(0,0,0,0) 75%);
    filter: blur(10px);
    transition: bottom .85s ease, width .85s ease, height .85s ease, opacity .85s ease;
  }

  /* ── proyector · overlay fullscreen expandido ────────────── */
  /* IMPORTANT: the container itself doesn't fade. Instead each child layer
     fades on its own — this avoids creating a stacking context that would
     trap the portaled puck above/below the wrong elements. */
  .idp-overlay {
    position: fixed; inset: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
  }
  body.idp-projecting .idp-overlay {
    visibility: visible;
    pointer-events: auto;
  }

  .idp-bg, .idp-grid-bg, .idp-vignette,
  .idp-readout, .idp-cone, .idp-holo, .idp-floor, .idp-back {
    opacity: 0;
    transition: opacity .55s ease;
  }
  body.idp-revealed .idp-bg,
  body.idp-revealed .idp-grid-bg,
  body.idp-revealed .idp-vignette,
  body.idp-revealed .idp-readout,
  body.idp-revealed .idp-back {
    opacity: 1;
  }
  body.idp-revealed .idp-floor { opacity: 1; transition: opacity .8s ease .65s; }

  .idp-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% 80%, #051820 0%, #02060a 55%, #000 100%),
      #000;
  }
  .idp-grid-bg {
    position: absolute; inset: 0;
    background:
      linear-gradient(rgba(80, 170, 255,.05) 1px, transparent 1px) 0 0 / 100% 42px,
      linear-gradient(90deg, rgba(80, 170, 255,.05) 1px, transparent 1px) 0 0 / 42px 100%;
    mask: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 90%);
    animation: idpGridDrift 22s linear infinite;
  }
  @keyframes idpGridDrift {
    to { background-position: 0 -42px, -42px 0; }
  }
  .idp-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,.75) 90%);
    pointer-events: none;
  }

  /* back button — lives at top-left of the OVERLAY, outside the hologram
     so it never overlaps the ID card content. */
  .idp-back {
    position: absolute;
    top: 24px; left: 24px;
    z-index: 10001;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px 9px 10px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
    color: var(--glow);
    background: rgba(0,8,12,.7);
    border: 1px solid rgba(80, 170, 255,.55);
    cursor: pointer;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .55s ease;
    text-shadow: 0 0 4px rgba(80, 170, 255,.4);
    backdrop-filter: blur(4px);
  }
  body.idp-revealed .idp-back { transition: background .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .55s ease .55s; }
  .idp-back:hover {
    background: rgba(80, 170, 255,.15);
    border-color: var(--glow);
    box-shadow: 0 0 18px rgba(80, 170, 255,.4);
    transform: translateX(-1px);
  }
  .idp-back-ic {
    font-size: 18px; line-height: 1;
    transform: translateY(-1px);
    color: var(--glow);
    text-shadow: 0 0 8px rgba(80, 170, 255,.7);
  }
  .idp-back-key {
    margin-left: 4px;
    font-size: 8px; letter-spacing: .2em;
    padding: 2px 5px;
    border: 1px solid rgba(80, 170, 255,.35);
    color: var(--soft);
    border-radius: 2px;
  }

  /* readouts in corners */
  .idp-readout {
    position: absolute; z-index: 4;
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
    color: var(--soft);
    pointer-events: none;
  }
  .idp-readout b { color: var(--glow); font-weight: 500; }
  .idp-readout .idp-led {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--glow);
    box-shadow: 0 0 8px var(--glow);
    animation: idpBlink 1.4s ease-in-out infinite;
  }
  .idp-readout--tl { top: 28px; left: 50%; transform: translateX(-50%) translateX(-180px); }
  .idp-readout--tr { top: 28px; right: 24px; }
  .idp-readout--bl { bottom: 22px; left: 24px; color: var(--dim); }
  .idp-readout--br { bottom: 22px; right: 24px; color: var(--dim); }

  /* stage: holds cone and hologram. The "base" is the FLIP-portaled puck
     (rendered at fixed bottom-center), so the stage just positions the
     hologram + cone above where that base will land. */
  .idp-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  /* allow back-button inside hologram to receive clicks */
  .idp-stage .idp-holo { pointer-events: auto; }
  .idp-back { pointer-events: auto; }

  /* light cone — anchored to the bottom-center, fans up into the hologram */
  .idp-cone {
    position: absolute;
    left: 50%; bottom: clamp(150px, 19vh, 230px);
    transform: translateX(-50%);
    width: clamp(220px, 26vw, 360px);
    height: clamp(340px, 52vh, 560px);
    pointer-events: none;
    z-index: 3;
  }
  body.idp-revealed .idp-cone { opacity: 1; transition: opacity .7s ease .55s; }
  .idp-cone-shape {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(80, 170, 255,.42) 0%, rgba(80, 170, 255,.16) 35%, rgba(80, 170, 255,.04) 70%, transparent 100%);
    clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
    filter: blur(6px);
    opacity: .9;
  }
  .idp-cone-glow {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 30% 55% at 50% 100%, rgba(80, 170, 255,.75) 0%, transparent 70%);
    filter: blur(10px);
  }
  .idp-cone-bands {
    position: absolute; inset: 0;
    clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
    background:
      repeating-linear-gradient(to top,
        rgba(80, 170, 255,.0) 0px,
        rgba(80, 170, 255,.0) 14px,
        rgba(80, 170, 255,.18) 14px,
        rgba(80, 170, 255,.18) 15px);
    mix-blend-mode: screen;
    animation: idpConeBands 6s linear infinite;
    opacity: .8;
  }
  @keyframes idpConeBands {
    to { background-position: 0 60px; }
  }

  /* ===== HOLOGRAPHIC FLOOR / PROJECTION PLATE =====
     Tilted flat plane that sits under the base puck — anchored to the
     bottom-center, rotated into perspective so it lies on the "ground".
     Provides a sense of place for the base and reads as a real projector pad. */
  .idp-floor {
    position: absolute;
    left: 50%;
    bottom: var(--idp-floor-bottom, 60px);
    width: clamp(440px, 56vw, 760px);
    aspect-ratio: 1 / 1;
    transform: translateX(-50%) perspective(900px) rotateX(72deg);
    transform-origin: 50% 100%;
    pointer-events: none;
    z-index: 2;
    transition: opacity .7s ease .45s, bottom .85s cubic-bezier(.2,.7,.2,1);
  }
  .idp-floor-glow {
    position: absolute; inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(80, 170, 255,.35) 0%,
      rgba(80, 170, 255,.18) 30%,
      rgba(80, 170, 255,.06) 60%,
      transparent 80%);
    filter: blur(8px);
  }
  .idp-floor-ring {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(80, 170, 255,.4);
    box-shadow:
      0 0 18px rgba(80, 170, 255,.25),
      inset 0 0 18px rgba(80, 170, 255,.18);
  }
  .idp-floor-ring.r1 { inset: 18%; border-color: rgba(80, 170, 255,.55); }
  .idp-floor-ring.r2 {
    inset: 6%;
    border-style: dashed;
    border-color: rgba(80, 170, 255,.32);
    animation: idpSpin 48s linear infinite;
  }
  .idp-floor-ring.r3 {
    inset: -4%;
    border-color: rgba(80, 170, 255,.18);
    box-shadow: 0 0 30px rgba(80, 170, 255,.18);
    animation: idpFloorPulse 4s ease-in-out infinite;
  }
  @keyframes idpFloorPulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.04); }
  }
  .idp-floor-grid {
    position: absolute; inset: 0;
    border-radius: 50%;
    background:
      repeating-radial-gradient(circle at 50% 50%,
        rgba(80, 170, 255,.0) 0px,
        rgba(80, 170, 255,.0) 22px,
        rgba(80, 170, 255,.18) 22px,
        rgba(80, 170, 255,.18) 23px),
      conic-gradient(from 0deg at 50% 50%,
        rgba(80, 170, 255,.0)  0deg,
        rgba(80, 170, 255,.0) 28deg,
        rgba(80, 170, 255,.10) 30deg,
        rgba(80, 170, 255,.0) 32deg,
        rgba(80, 170, 255,.0) 60deg);
    mask: radial-gradient(circle at 50% 50%, #000 30%, #000 60%, transparent 78%);
    opacity: .55;
  }
  .idp-floor-spokes {
    position: absolute; inset: 10%;
    border-radius: 50%;
    background:
      repeating-conic-gradient(from 0deg at 50% 50%,
        rgba(80, 170, 255,.0) 0deg 14deg,
        rgba(80, 170, 255,.22) 14deg 15deg);
    mask: radial-gradient(circle at 50% 50%, transparent 36%, #000 42%, #000 78%, transparent 88%);
    opacity: .7;
  }
  /* tick LEDs around the outer ring */
  .idp-floor-ticks {
    position: absolute; inset: 0;
  }
  .idp-floor-ticks i {
    position: absolute; top: 50%; left: 50%;
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(80, 170, 255,.9);
    box-shadow: 0 0 10px rgba(80, 170, 255,.9);
    margin: -3px 0 0 -3px;
    transform-origin: 0 0;
  }
  .idp-floor-ticks i:nth-child(1)  { transform: rotate(  0deg) translate(50%) rotate(  0deg); animation: idpLed 2.4s ease-in-out infinite .00s; }
  .idp-floor-ticks i:nth-child(2)  { transform: rotate( 30deg) translate(50%) rotate(-30deg); animation: idpLed 2.4s ease-in-out infinite .10s; }
  .idp-floor-ticks i:nth-child(3)  { transform: rotate( 60deg) translate(50%) rotate(-60deg); animation: idpLed 2.4s ease-in-out infinite .20s; }
  .idp-floor-ticks i:nth-child(4)  { transform: rotate( 90deg) translate(50%) rotate(-90deg); animation: idpLed 2.4s ease-in-out infinite .30s; }
  .idp-floor-ticks i:nth-child(5)  { transform: rotate(120deg) translate(50%) rotate(-120deg); animation: idpLed 2.4s ease-in-out infinite .40s; }
  .idp-floor-ticks i:nth-child(6)  { transform: rotate(150deg) translate(50%) rotate(-150deg); animation: idpLed 2.4s ease-in-out infinite .50s; }
  .idp-floor-ticks i:nth-child(7)  { transform: rotate(180deg) translate(50%) rotate(-180deg); animation: idpLed 2.4s ease-in-out infinite .60s; }
  .idp-floor-ticks i:nth-child(8)  { transform: rotate(210deg) translate(50%) rotate(-210deg); animation: idpLed 2.4s ease-in-out infinite .70s; }
  .idp-floor-ticks i:nth-child(9)  { transform: rotate(240deg) translate(50%) rotate(-240deg); animation: idpLed 2.4s ease-in-out infinite .80s; }
  .idp-floor-ticks i:nth-child(10) { transform: rotate(270deg) translate(50%) rotate(-270deg); animation: idpLed 2.4s ease-in-out infinite .90s; }
  .idp-floor-ticks i:nth-child(11) { transform: rotate(300deg) translate(50%) rotate(-300deg); animation: idpLed 2.4s ease-in-out infinite 1.00s; }
  .idp-floor-ticks i:nth-child(12) { transform: rotate(330deg) translate(50%) rotate(-330deg); animation: idpLed 2.4s ease-in-out infinite 1.10s; }

  /* HOLOGRAM ITSELF — the floating ID card */
  .idp-holo {
    position: absolute;
    left: 50%;
    bottom: clamp(210px, 29vh, 350px);
    transform: translateX(-50%) translateY(40px) scale(.85);
    width: min(400px, 82vw);
    aspect-ratio: 4 / 5;
    max-height: 56vh;
    z-index: 4;
    color: var(--glow);

    opacity: 0;
    filter: blur(8px) brightness(1.8);
    transition:
      opacity .8s ease .55s,
      transform .9s cubic-bezier(.2,.7,.2,1) .55s,
      filter .9s ease .55s;

    background:
      radial-gradient(ellipse 60% 50% at 50% 100%, rgba(80, 170, 255,.18) 0%, transparent 60%),
      linear-gradient(180deg, rgba(80, 170, 255,.04) 0%, rgba(80, 170, 255,.07) 100%);
    border: 1px solid rgba(80, 170, 255,.45);
    box-shadow:
      0 0 0 1px rgba(80, 170, 255,.15),
      0 0 60px rgba(80, 170, 255,.4),
      inset 0 0 40px rgba(80, 170, 255,.12);
    isolation: isolate;
    overflow: hidden;
  }
  body.idp-revealed .idp-holo {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0) brightness(1);
    animation: idpHoloFloat 5s ease-in-out infinite 1.4s;
  }
  @keyframes idpHoloFloat {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(0); }
    50%      { transform: translateX(-50%) translateY(-6px) rotate(.3deg); }
  }

  /* ====== CLOSING EXIT — sci-fi hologram "power down" ======
     Sequenced: phase 1 powers off the hologram (cone/floor/back fade with it)
     while idp-revealed is still ON — so the backdrop stays put. Phase 2 (the
     JS removes idp-revealed after the powerdown finishes) then handles the
     puck flying home and the backdrop fading. */
  body.idp-closing .idp-holo {
    animation: idpHoloPowerOff .5s cubic-bezier(.5,.0,.7,.2) forwards;
    transition: none;
  }
  body.idp-closing .idp-cone,
  body.idp-closing .idp-back {
    opacity: 0 !important;
    transition: opacity .25s ease !important;
  }
  body.idp-closing .idp-readout {
    opacity: .3 !important;
    transition: opacity .25s ease !important;
  }
  @keyframes idpHoloPowerOff {
    0% {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1, 1);
      filter: blur(0) brightness(1);
    }
    30% {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1.04, .92);
      filter: blur(0) brightness(1.5);
    }
    55% {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1.15, .03);
      filter: blur(0) brightness(2.4);
    }
    75% {
      opacity: .8;
      transform: translateX(-50%) translateY(0) scale(1.2, .002);
      filter: blur(.5px) brightness(3);
    }
    100% {
      opacity: 0;
      transform: translateX(-50%) translateY(0) scale(.3, .001);
      filter: blur(2px) brightness(3);
    }
  }
  /* keep the puck behaving normally as the base during phase 1 — the floor
     stays so the projector is clearly still on the ground */
  body.idp-closing .idp-puck.is-base {
    /* no override — stays as the base until phase 2 */
  }
  /* during the powerdown, kill the inner scanner/noise animations so the
     collapse reads cleanly */
  body.idp-closing .idp-holo-noise,
  body.idp-closing .idp-holo-scanner { animation: none; opacity: 0; transition: opacity .15s ease; }

  /* hologram inner layers */
  .idp-holo-grid {
    position: absolute; inset: 0; z-index: 0;
    background:
      linear-gradient(rgba(80, 170, 255,.07) 1px, transparent 1px) 0 0 / 100% 18px,
      linear-gradient(90deg, rgba(80, 170, 255,.07) 1px, transparent 1px) 0 0 / 18px 100%;
    mask: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  .idp-holo-scanlines {
    position: absolute; inset: 0; z-index: 1;
    background: repeating-linear-gradient(to bottom,
      transparent 0px,
      transparent 2px,
      rgba(80, 170, 255,.05) 2px,
      rgba(80, 170, 255,.05) 3px);
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .idp-holo-frame {
    position: absolute; inset: 8px; z-index: 1;
    border: 1px dashed rgba(80, 170, 255,.25);
    pointer-events: none;
  }
  .idp-holo-noise {
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none;
    opacity: .12;
    background-image:
      radial-gradient(rgba(80, 170, 255,.5) 1px, transparent 1px),
      radial-gradient(rgba(80, 170, 255,.5) 1px, transparent 1px);
    background-size: 5px 5px, 7px 7px;
    background-position: 0 0, 2px 3px;
    animation: idpNoise .12s steps(2) infinite;
  }
  @keyframes idpNoise {
    0%   { transform: translate(0,0); }
    50%  { transform: translate(-1px,1px); }
    100% { transform: translate(1px,-1px); }
  }
  .idp-holo-corner {
    position: absolute; width: 18px; height: 18px;
    border: 1.5px solid var(--glow);
    box-shadow: 0 0 8px rgba(80, 170, 255,.6);
    z-index: 3;
    pointer-events: none;
  }
  .idp-holo-corner.tl { top: 6px; left: 6px;  border-right: none; border-bottom: none; }
  .idp-holo-corner.tr { top: 6px; right: 6px; border-left: none;  border-bottom: none; }
  .idp-holo-corner.bl { bottom: 6px; left: 6px;  border-right: none; border-top: none; }
  .idp-holo-corner.br { bottom: 6px; right: 6px; border-left: none;  border-top: none; }

  /* moving scanner band */
  .idp-holo-scanner {
    position: absolute; left: 0; right: 0; height: 60px;
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(80, 170, 255,.06) 30%,
      rgba(80, 170, 255,.18) 50%,
      rgba(80, 170, 255,.06) 70%,
      transparent 100%);
    top: 0;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: screen;
    animation: idpHoloScan 5.4s ease-in-out infinite;
  }
  @keyframes idpHoloScan {
    0%, 100% { transform: translateY(-20px); opacity: 0; }
    10%      { opacity: 1; }
    90%      { opacity: 1; }
    50%      { transform: translateY(100%); }
  }

  /* hologram body content */
  .idp-holo-body {
    position: relative; z-index: 3;
    width: 100%; height: 100%;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
  }
  .idp-holo-body .idp-holo-header { flex-shrink: 0; }
  .idp-holo-body .idp-holo-data {
    margin-top: auto;
    flex-shrink: 0;
  }
  .idp-holo-header {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
    color: var(--glow);
    text-shadow: 0 0 8px rgba(80, 170, 255,.5);
  }
  .idp-holo-badge {
    border: 1px solid var(--glow);
    background: rgba(80, 170, 255,.1);
    padding: 3px 8px;
    color: var(--glow);
    text-shadow: 0 0 6px rgba(80, 170, 255,.6);
  }
  .idp-holo-portrait {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 48%;
    margin: 4px auto 0;
    display: grid; place-items: center;
    border: 1px dashed rgba(80, 170, 255,.5);
    overflow: hidden;
    flex-shrink: 0;
  }
  /* photographic portrait — natural color with subtle holographic accents */
  .idp-holo-photo {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    /* contained glow — no outer spread that could bleed past the dashed frame */
    box-shadow:
      0 0 0 1px rgba(80,170,255,.55),
      0 0 0 3px rgba(80,170,255,.10),
      inset 0 0 22px rgba(80,170,255,.28),
      inset 0 0 0 1px rgba(180,220,255,.18);
    animation: idpHoloFlicker 6.4s ease-in-out infinite;
    background: #0a1530;
  }
  .idp-holo-photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    /* keep natural color — just a touch of contrast/saturation lift */
    filter:
      contrast(1.08)
      saturate(1.05)
      brightness(1.02);
    z-index: 1;
  }
  /* subtle cyan rim-light gradient — keeps the holographic vibe without killing the color */
  .idp-holo-photo::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 50% 35%, transparent 45%, rgba(80,170,255,.18) 78%, rgba(20,60,130,.42) 100%);
    mix-blend-mode: soft-light;
    z-index: 2;
    pointer-events: none;
  }
  /* scanlines overlay — thin and subtle so face stays readable */
  .idp-holo-photo::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(
        0deg,
        rgba(120,190,255,.08) 0 1px,
        transparent 1px 3px
      );
    mix-blend-mode: overlay;
    z-index: 3;
    animation: idpHoloScanShift 4.2s linear infinite;
  }
  /* chromatic glitch slice that crosses the photo periodically */
  .idp-holo-photo .idp-holo-photo-glitch {
    position: absolute; left: 0; right: 0; height: 14%;
    top: -20%;
    background:
      linear-gradient(180deg,
        transparent 0%,
        rgba(80,170,255,0) 20%,
        rgba(80,170,255,.35) 50%,
        rgba(255,80,140,.18) 55%,
        rgba(80,170,255,0) 80%,
        transparent 100%);
    mix-blend-mode: screen;
    z-index: 4;
    pointer-events: none;
    animation: idpHoloGlitchSlice 7.2s ease-in-out infinite;
  }
  @keyframes idpHoloFlicker {
    0%, 100% { opacity: 1; }
    47%      { opacity: 1; }
    48%      { opacity: .82; }
    49%      { opacity: 1; }
    72%      { opacity: 1; }
    73%      { opacity: .88; }
    74%      { opacity: 1; }
  }
  @keyframes idpHoloScanShift {
    from { background-position: 0 0; }
    to   { background-position: 0 6px; }
  }
  @keyframes idpHoloGlitchSlice {
    0%, 90%, 100% { top: -20%; opacity: 0; }
    91%           { top: -20%; opacity: 1; }
    98%           { top: 110%; opacity: 1; }
    98.5%         { top: 110%; opacity: 0; }
  }
  /* REC / ENC strip — lives OUTSIDE the portrait so labels can never collide with the photo */
  .idp-holo-portrait-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 48%;
    margin: 6px auto 0;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .idp-holo-portrait-meta .ihp-rec {
    color: var(--alert);
    text-shadow: 0 0 6px var(--alert);
    letter-spacing: .15em;
    animation: idpBlink 1.2s ease-in-out infinite;
  }
  .idp-holo-portrait-meta .ihp-enc {
    color: var(--soft);
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: center;
  }
  .idp-holo-portrait-meta .ihp-status {
    color: var(--glow);
    text-shadow: 0 0 6px rgba(80,170,255,.5);
    border: 1px solid rgba(80,170,255,.4);
    padding: 1px 5px;
    letter-spacing: .18em;
  }

  /* remove old corner-label pseudo-elements — now real elements outside the frame */
  .idp-holo-portrait::before,
  .idp-holo-portrait::after { content: none; }
  .idp-holo-rings {
    position: absolute; inset: 8%; border-radius: 50%;
    border: 1px solid rgba(80, 170, 255,.4);
    box-shadow: inset 0 0 18px rgba(80, 170, 255,.25);
    animation: idpSpin 20s linear infinite;
  }
  .idp-holo-rings::before {
    content: ""; position: absolute; inset: 12%; border-radius: 50%;
    border: 1px dashed rgba(80, 170, 255,.55);
    animation: idpSpin 14s linear infinite reverse;
  }
  .idp-holo-glyph {
    position: relative; z-index: 2;
    font-family: var(--mono);
    font-size: clamp(40px, 6vw, 56px);
    font-weight: 700;
    color: var(--glow);
    letter-spacing: -.04em;
    text-shadow:
      0 0 18px rgba(80, 170, 255,.85),
      0 0 32px rgba(80, 170, 255,.45);
  }

  /* data rows */
  .idp-holo-data {
    font-family: var(--mono); font-size: 11px; color: var(--dim);
    display: grid; gap: 6px;
    align-content: end;
  }
  .idp-holo-data .row {
    display: grid; grid-template-columns: 108px 1fr;
    gap: 12px;
    padding-bottom: 5px;
    border-bottom: 1px dashed rgba(80, 170, 255,.15);
    align-items: baseline;
  }
  .idp-holo-data .k {
    color: var(--soft);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .idp-holo-data .v {
    color: var(--text);
    text-shadow: 0 0 4px rgba(80, 170, 255,.35);
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* lock page scroll while overlay open */
  body.idp-open { overflow: hidden; }

  /* mobile */
  @media (max-width: 760px) {
    .idp-readout--tl,
    .idp-readout--tr,
    .idp-readout--bl,
    .idp-readout--br { display: none; }
    .idp-back { top: 16px; left: 16px; padding: 8px 12px; font-size: 10px; }
    .idp-holo { width: min(360px, 88vw); }
  }
  @media (max-width: 420px) {
    .idp-puck { width: 200px; }
    .idp-puck-meta { width: 200px; }
  }