/* Evidence scene adapted to the Netlify identity. */
.proofscene{--panel:#02120f;--teal:var(--aqua);--serif:var(--display);--sans:var(--body);--ease:var(--pc-ease);--pad:var(--gut);--muted:#bfd1cc;--ink-dim:#e1e9e6;padding:0!important;}
  .proofscene{position:relative;height:calc(240 * var(--vhu,1vh));background:linear-gradient(#02120f,var(--panel))}
  @media(max-width:720px){.proofscene{height:calc(310 * var(--vhu,1vh))}}
  .pv-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;background:#02120f}
  /* el marco que crece: de tarjeta centrada a pantalla completa */
  .pv-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:var(--pvw,62%);height:var(--pvh,62%);border-radius:var(--pvr,22px);overflow:hidden;
    box-shadow:0 40px 120px rgba(0,0,0,.55);will-change:width,height,border-radius}
  .pv-frame video,.pv-frame img{width:100%;height:100%;object-fit:cover;object-position:62% center;display:block}
  /* en vertical el 16:9 recorta los lados: el encuadre se corre a la derecha,
     donde esta la persona con el equipo puesto (centrado la dejaba fuera de cuadro) */
  @media(max-width:720px){.pv-frame video,.pv-frame img{object-position:center center}}
  /* en movil NO hay tarjeta con marco negro alrededor: el video es la pantalla
     desde el primer frame (antes nacia 88x44% y el resto era vacio) */
  @media(max-width:720px){.pv-frame{--pvw:100%;--pvh:100%;border-radius:0}}
  /* ---- LA LECTURA: un instrumento real sobre la escena, no una onda encima ----
     Panel de vidrio con la traza contenida, su metrica y su barra de coherencia:
     se entiende de un vistazo y deja la imagen respirar. */
  /* el instrumento vive ARRIBA: deja libre el tercio inferior, donde esta la persona */
  .pv-signal{position:absolute;left:50%;top:clamp(86px,13svh,132px);bottom:auto;transform:translateX(-50%) translateY(-14px);
    z-index:4;width:min(520px,84vw);pointer-events:none;opacity:0;
    transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .proofscene.signal .pv-signal{opacity:1;transform:translateX(-50%)}
  .pv-inst{border:1px solid rgba(143,211,196,.26);border-radius:16px;overflow:hidden;
    background:linear-gradient(180deg,rgba(2,22,19,.86),rgba(2,16,13,.92));
    box-shadow:0 24px 70px rgba(0,0,0,.5)}
  .pv-inst-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:11px 16px;border-bottom:1px solid rgba(143,211,196,.16)}
  .pv-sig-tag{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:10.5px;
    letter-spacing:.24em;text-transform:uppercase;color:var(--teal);white-space:nowrap}
  .pv-sig-tag i{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 9px var(--teal);
    animation:sigPulse 1.6s ease-in-out infinite;flex:0 0 auto}
  @keyframes sigPulse{50%{opacity:.25;transform:scale(.7)}}
  .pv-sig-state{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--gold);white-space:nowrap;transition:color .6s var(--ease)}
  .pv-signal canvas{display:block;width:100%;height:clamp(84px,13vh,118px)}
  .pv-inst-foot{display:flex;align-items:center;gap:10px;padding:10px 16px 13px;flex-wrap:wrap;
    border-top:1px solid rgba(143,211,196,.14)}
  /* la etiqueta larga aplastaba la barra: en pantallas estrechas toma su propia linea */
  @media(max-width:520px){
    .pv-coh-l{flex:1 1 100%;margin-bottom:2px}
    .pv-coh{flex:1 1 auto;min-width:120px}
  }
  .pv-coh{flex:1;height:3px;border-radius:3px;background:rgba(244,239,230,.14);overflow:hidden}
  .pv-coh i{display:block;height:100%;width:0;border-radius:3px;
    background:linear-gradient(90deg,var(--teal),var(--gold));box-shadow:0 0 10px rgba(243,220,125,.5);
    transition:width .25s linear}
  .pv-coh-n{font-family:var(--serif);font-size:15px;color:var(--ink);min-width:4.2ch;text-align:right;font-variant-numeric:tabular-nums}
  .pv-coh-l{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
  /* la frase vive BAJO el instrumento, sobre el velo: siempre legible */
  .pv-sig-read{margin:14px auto 0;text-align:center;font-family:var(--serif);font-style:italic;
    font-size:clamp(15px,2vw,21px);color:var(--ink);text-shadow:0 2px 18px rgba(2,18,15,.95);max-width:32ch}
  @media(max-width:720px){
    .pv-signal{top:clamp(74px,11svh,110px);width:90vw}
    .pv-signal canvas{height:76px}
    .pv-sig-tag{font-size:9px;letter-spacing:.16em}
    .pv-sig-state{font-size:11px;letter-spacing:.12em}
    .pv-sig-read{font-size:14px;max-width:26ch;margin-top:11px}
  }

  /* velo que se enciende cuando el video toma la pantalla, para que el texto respire */
  .pv-veil{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .6s var(--ease);opacity:1;
    background:linear-gradient(180deg,rgba(2,18,15,.86) 0%,rgba(2,18,15,.62) 26%,rgba(2,18,15,.28) 46%,rgba(2,18,15,.34) 62%,rgba(2,18,15,.9) 100%)}
  /* cuando el video ya es la pantalla, el velo se afina para que la imagen respire */
  /* velo constante: subirlo al 75% en las escenas finales lavaba la imagen */
  .proofscene.veiled .pv-veil{background:linear-gradient(180deg,rgba(2,18,15,.66) 0%,rgba(2,18,15,.12) 32%,rgba(2,18,15,.1) 58%,rgba(2,18,15,.8) 100%)}
  /* cabecera: manda al entrar y se despide cuando el video crece */
  .pv-head{position:relative;z-index:3;text-align:center;padding:26px var(--pad);max-width:60ch;
    transition:opacity .5s var(--ease),transform .5s var(--ease);text-shadow:0 2px 24px rgba(2,18,15,.95)}
  .pv-head h2{font-size:clamp(30px,5vw,60px);line-height:1.06}
  .pv-head h2 em{color:var(--teal);font-style:italic}
  .pv-head p{margin-top:16px;color:var(--ink-dim);font-weight:300;font-size:clamp(15px,1.9vw,19px)}
  /* los tres datos entran uno a uno SOBRE el video, en fila */
  .pv-stats{position:absolute;left:0;right:0;bottom:clamp(90px,14vh,150px);z-index:3;
    display:flex;justify-content:center;gap:clamp(20px,6vw,90px);padding:0 var(--pad);pointer-events:none;flex-wrap:wrap}
  .pv-stat{text-align:center;opacity:0;transform:translateY(26px);filter:blur(6px);
    transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
  .pv-stat.on{opacity:1;transform:none;filter:none}
  .pv-stat b{display:block;font-family:var(--serif);font-weight:400;color:var(--gold);line-height:1;
    font-size:clamp(34px,5.6vw,76px);text-shadow:0 2px 40px rgba(2,18,15,.9)}
  .pv-stat span{display:block;margin-top:10px;font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;
    color:var(--ink-dim);max-width:20ch;margin-left:auto;margin-right:auto;text-shadow:0 1px 14px rgba(2,18,15,.95)}
  @media(max-width:720px){
    /* tres columnas de 110px partian las palabras: ahora es un panel de vidrio
       con tres filas legibles, mismo lenguaje que el instrumento de lectura */
    .pv-stats{display:block;top:clamp(300px,44svh,420px);bottom:auto;left:var(--pad);right:var(--pad);
      border:1px solid rgba(143,211,196,.22);border-radius:16px;overflow:hidden;
      background:linear-gradient(180deg,rgba(2,22,19,.86),rgba(2,16,13,.92));box-shadow:0 20px 60px rgba(0,0,0,.5)}
    /* las filas que aun no entran NO reservan alto: el panel crece con ellas */
    .pv-stat{display:flex;align-items:baseline;gap:10px;text-align:left;padding:0 14px;border-top:1px solid rgba(143,211,196,.14);
      max-height:0;overflow:hidden;transition:max-height .55s var(--ease),padding .55s var(--ease),opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease)}
    .pv-stat.on{max-height:130px;padding:11px 14px}
    .pv-stat:first-child{border-top:0}
    .pv-stat b{font-size:20px;line-height:1;flex:0 0 auto;min-width:5.4em}
    .pv-stat span{font-size:11.5px;line-height:1.35;margin-top:0;max-width:none;color:var(--ink-dim);text-align:left}
    .pv-cap{font-size:14.5px;bottom:clamp(24px,4.2vh,40px)}
    .pv-cap b{max-width:32ch}
  }
  /* la frase de cierre aterriza cuando la escena ya se gano el silencio */
  .pv-cap{position:absolute;left:0;right:0;bottom:clamp(30px,5vh,54px);z-index:3;text-align:center;padding:0 var(--pad);
    font-family:var(--serif);font-style:italic;font-size:clamp(16px,2.1vw,24px);color:var(--ink);line-height:1.25;
    opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease);
    text-shadow:0 2px 22px rgba(2,18,15,.9)}
  .pv-cap.on{opacity:1;transform:none}
  .pv-cap b{display:block;max-width:46ch;margin:0 auto;font-weight:inherit}
  /* pista de progreso discreta: dice cuanto falta de la escena */
  .pv-rail{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:4;width:min(220px,42vw);height:2px;
    background:rgba(244,239,230,.14);border-radius:2px;overflow:hidden}
  .pv-rail i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold));box-shadow:0 0 10px var(--teal)}
  @media(prefers-reduced-motion:reduce){
    .proofscene{height:auto}
    .pv-pin{position:relative;height:auto;padding:80px 0}
    .pv-frame{position:relative;top:auto;left:auto;transform:none;width:100%;height:auto;aspect-ratio:16/9;border-radius:0}
    .pv-stats{position:relative;bottom:auto;margin-top:34px}
    .pv-stat{opacity:1;transform:none;filter:none}
    .pv-cap{position:relative;bottom:auto;margin-top:26px;opacity:1;transform:none}
    .pv-rail{display:none}
  }


/* Keep the real EEG portrait visible across the whole viewport. */
.proofscene .pv-veil,
.proofscene.veiled .pv-veil{background:linear-gradient(180deg,rgba(1,14,13,.27) 0%,rgba(1,14,13,.06) 38%,rgba(1,14,13,.08) 65%,rgba(1,14,13,.35) 100%);}
.proofscene .pv-head::before{display:none!important;}
.proofscene .pv-head,.proofscene .pv-head h2,.proofscene .pv-head p{
  text-shadow:0 2px 8px rgba(0,0,0,.95),0 6px 26px rgba(0,0,0,.85);
}
.proofscene .pv-head{max-width:64ch;}
.proofscene .pv-head h2 em{color:var(--gold);}
.proofscene .pv-head p{color:#f5f5ef;}
.proofscene .pv-sig-read,.proofscene .pv-cap,.proofscene .pv-stat b,.proofscene .pv-stat span{
  text-shadow:0 2px 8px rgba(0,0,0,.95),0 5px 22px rgba(0,0,0,.78);
}
@media(max-width:720px){
  .proofscene .pv-frame video{object-position:center center;}
  .proofscene .pv-head{padding:24px 18px;}
  .proofscene .pv-head h2{font-size:clamp(34px,9vw,46px);}
  .proofscene .pv-head p{font-size:15px;line-height:1.45;}
  .proofscene .pv-stats{top:clamp(70px,10svh,96px);}
}