/* ==========================================================================
   no-pulsar.css — el botón del pie que nadie debería pulsar, el apagón con
   lluvia binaria y el «modo claro» que deja detrás.

   Tercera capa independiente, como menu-soc.css: es una FUNCIÓN, no
   movimiento, así que nada de aquí cuelga de html.js-listo y sigue
   existiendo con prefers-reduced-motion (solo se le apagan las animaciones).
   Se quita entera borrando su <link> y el <script> de no-pulsar.js.

   Va DESPUÉS de estilo.css, cinematico.css y menu-soc.css: el tema claro
   redefine tokens de :root y pisa un puñado de colores que en estilo.css
   están escritos a mano (ver el bloque «los que no eran variables»).
   ========================================================================== */

/* ---------- el botón ------------------------------------------------------
   Discreto en el pie, pero no invisible. Nace con el atributo `hidden` en el
   HTML y lo destapa no-pulsar.js: sin JavaScript no haría nada, y un botón
   que no hace nada es peor que no tenerlo.

   Tuvo un tono apagado (--texto-3, sin fondo) y no lo encontraba nadie: un
   easter egg invisible es trabajo tirado. Y de los nueve, este es el que
   **puede encontrar cualquiera** —no hace falta saber abrir la consola ni
   mirar cabeceras, solo leer «no pulsar»—, así que se le da el dorado de la
   casa en versión de contorno: el mismo color del botón «Escríbeme por
   LinkedIn», pero sin rellenar, para que se vea sin competir con la llamada
   de verdad. El relleno macizo llega en el primer clic, que es cuando ya
   estás dentro de la broma.

   Todo con tokens —incluida la tinta sobre el dorado, que es var(--fondo)—,
   para que el modo claro lo herede solo: en papel el dorado baja a #856726 y
   la tinta sube a crema, igual que hace .btn. */
/* Su propia línea, alineado a la derecha: el rótulo cambia de ancho en cada
   clic («En serio, para» mide la mitad que «Ok, vas a romper la web…») y
   compartiendo línea con la nota del pie hacía saltar el bloque de una
   línea a dos y vuelta. El margen va en el botón y no en el contenedor para
   que sin JavaScript, con el botón oculto, el div quede a cero. */
.pie-boton{display:flex; justify-content:flex-end}

.no-pulsar{
  flex:0 0 auto; margin-top:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; line-height:1.4;
  color:var(--oro); background:var(--oro-tenue);
  border:1px solid var(--oro-borde); border-radius:3px;
  padding:7px 13px; cursor:pointer;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.no-pulsar:hover{color:var(--oro-vivo); border-color:var(--oro)}

/* La desesperación también se ve: el botón va subiendo de tono con cada
   clic, y lo hace en dos escalones por color — contorno y macizo — primero
   en dorado y luego en rojo:

     0 · contorno dorado   1 · dorado macizo (el look de .btn)
     2 · contorno rojo     3 · rojo macizo y temblando

   Los dos estados macizos usan var(--fondo) como tinta porque así el
   contraste aguanta en los dos temas (tinta sobre el dorado y el terracota
   del oscuro; crema sobre el dorado y el rojo oscuros del claro). */
.no-pulsar[data-paso="1"]{
  color:var(--fondo); background:var(--oro); border-color:var(--oro);
}
.no-pulsar[data-paso="2"]{
  color:var(--rojo); border-color:rgba(201,106,94,.45);
  background:rgba(201,106,94,.08);
}
.no-pulsar[data-paso="3"]{
  color:var(--fondo); background:var(--rojo); border-color:var(--rojo);
  animation:no-pulsar-tiembla .45s ease-in-out infinite;
}
@keyframes no-pulsar-tiembla{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-1.5px)}
  75%{transform:translateX(1.5px)}
}

/* ---------- el apagón ------------------------------------------------------
   Capa negra a pantalla completa con la lluvia binaria dentro. Se crea y se
   destruye en cada uso: fuera de la broma no queda nada en el DOM. */
.apagon{
  position:fixed; inset:0; z-index:300;
  background:#000; opacity:0;
  transition:opacity .34s linear;
}
.apagon[data-encendido]{opacity:1}

/* Salida: fogonazo blanco de un fotograma —los ojos que se acostumbran a la
   luz— y desvanecido para descubrir la web ya en claro. */
.apagon[data-saliendo]{
  background:#FFFDF7; opacity:0;
  transition:background .1s linear, opacity .52s ease-out .06s;
}
.apagon[data-saliendo] canvas,
.apagon[data-saliendo] .apagon-linea{opacity:0; transition:opacity .12s linear}

.apagon canvas{display:block; width:100%; height:100%}

.apagon-linea{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  margin:0; white-space:nowrap;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.2em;
  color:#34D399; text-shadow:0 0 14px rgba(52,211,153,.5);
  opacity:0; transition:opacity .3s linear;
}
.apagon-linea[data-visible]{opacity:1}
.apagon-linea b{font-weight:400; animation:apagon-cursor 1s step-end infinite}
@keyframes apagon-cursor{50%{opacity:0}}

/* ---------- el brindis: 😎 ¡Es deslumbrante! ------------------------------
   Nace abajo, en mitad del borde inferior, y sube despacio hasta plantarse
   justo encima del retrato —que a esas alturas ya lleva gafas de sol—. La
   tarjeta hace de dedo: señala el cambio para que no se pase por alto.

   REPARTO DE TAREAS, y no conviene mezclarlas: aquí se define cómo ES la
   tarjeta y cómo APARECE (opacidad); dónde está lo decide no-pulsar.js
   fotograma a fotograma. Si alguien añade aquí una transición de `transform`,
   peleará con el vuelo y la tarjeta se quedará atrás al hacer scroll.

   El transform de reposo solo vale para el parpadeo entre que se crea y el
   JS la coloca: (0,0) menos su propio tamaño, o sea fuera de la pantalla. */
.deslumbra{
  position:fixed; left:0; top:0; z-index:210;
  display:flex; align-items:center; gap:12px;
  padding:11px 20px 11px 16px;
  background:var(--panel); border:1px solid var(--oro-borde);
  border-radius:999px;
  box-shadow:0 16px 42px rgba(0,0,0,.28);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  white-space:nowrap;
  color:var(--texto);
  opacity:0; pointer-events:none;
  transform:translate3d(-50%,-100%,0);
  transition:opacity .34s var(--e-suave,ease);
}
.deslumbra[data-visible]{opacity:1}
.deslumbra-cara{font-size:22px; line-height:1}

/* La punta que señala la foto, y que solo sale cuando la tarjeta ya ha
   llegado: durante el viaje no apunta a nada. El desplazamiento --punta lo
   escribe el JS para que siga apuntando al centro del retrato aunque la
   tarjeta haya tenido que arrimarse al borde en una pantalla estrecha. */
.deslumbra::after{
  content:""; position:absolute; top:100%; left:50%;
  margin-left:calc(var(--punta,0px) - 7px);
  border:7px solid transparent; border-top-color:var(--oro-borde);
  opacity:0; transition:opacity .4s var(--e-suave,ease);
}
.deslumbra[data-posada]::after{opacity:1}

/* ---------- el retrato con gafas de sol -----------------------------------
   Antes eran unas gafas dibujadas en SVG encima de la cara; desde el
   2026-09-01 es la misma fotografía tomada con gafas de sol, apilada sobre
   la de siempre y fundida al cambiar de tema. Queda mucho mejor, y de paso
   se lleva por delante la trampa del `hidden`, que no funciona en un <svg>.

   Las dos fotos viajan en el HTML desde el principio (la segunda son 17 kB):
   así el cambio es instantáneo y no depende de que llegue a tiempo una
   descarga con la pantalla ya en claro.

   El fundido es largo a propósito. El tema cambia con la pantalla todavía en
   negro y el fogonazo tarda medio segundo en irse, así que lo que se ve es
   la segunda mitad: las gafas apareciendo sobre la cara. */
.persona-retrato .persona-sol{
  position:absolute; left:0; top:0;
  opacity:0; transition:opacity .95s var(--e-suave,ease);
}
html[data-tema="claro"] .persona-retrato .persona-sol{opacity:1}

/* ==========================================================================
   MODO CLARO
   ========================================================================== */

/* ---------- los tokens ---------- */
html[data-tema="claro"]{
  color-scheme:light;

  /* Papel, no pantalla. El dorado tiene que bajar mucho de luminosidad para
     seguir leyéndose sobre claro: #C9A961 sobre papel da 1,9:1, ilegible.
     Los cinco pares de contraste los vigila un test. */
  --fondo:#FAF8F4; --panel:#FFFFFF; --panel2:#F4F1EA;
  --linea:#DCD5C6; --linea-suave:#E9E4D8;
  --texto:#14171E; --texto-2:#4A5160; --texto-3:#656D7D;
  --oro:#856726; --oro-vivo:#6B5218; --oro-borde:rgba(133,103,38,.34);
  --oro-tenue:rgba(201,169,97,.16); --rojo:#A8382B;

  /* El foco de las tarjetas es luz blanca sobre tinta; en papel tiene que
     ser sombra. La variable la declara cinematico.css. */
  --halo-tinta:rgba(11,13,18,.055);
}

/* El suavizado fino adelgaza el texto oscuro sobre fondo claro hasta
   dejarlo desvaído: en papel, el del sistema. */
html[data-tema="claro"] body{-webkit-font-smoothing:auto}

/* ---------- los que no eran variables ----------
   estilo.css tiene un puñado de colores escritos a mano que asumen fondo
   oscuro. Redefinir :root no los alcanza: hay que pisarlos uno a uno. */
html[data-tema="claro"] .barra{background:rgba(250,248,244,.88)}

html[data-tema="claro"] .hero{
  background:
    radial-gradient(1000px 460px at 82% -10%, rgba(201,169,97,.16), transparent 62%),
    radial-gradient(800px 420px at -8% 108%, rgba(20,23,30,.035), transparent 60%),
    var(--fondo);
}

html[data-tema="claro"] .ficha-exec{box-shadow:0 20px 48px rgba(20,23,30,.10)}
html[data-tema="claro"] .fila{border-top-color:rgba(20,23,30,.06)}
html[data-tema="claro"] .persona-foto{box-shadow:0 12px 30px rgba(20,23,30,.16)}

/* Texto claro sobre el dorado, que aquí es mucho más oscuro. */
html[data-tema="claro"] .btn,
html[data-tema="claro"] .saltar{color:#FFFDF7}
html[data-tema="claro"] ::selection{background:var(--oro); color:#FFFDF7}

html[data-tema="claro"] .lema-rojo{
  border-color:rgba(168,56,43,.34); background:rgba(168,56,43,.07);
}

/* El menú SOC se queda oscuro a propósito —una terminal es una terminal—,
   pero su dorado tiene que seguir siendo el de fondo negro. */
html[data-tema="claro"] .soc{--oro:#C9A961}

/* ---------- movimiento reducido: la función se queda, el adorno no -------- */
@media (prefers-reduced-motion:reduce){
  .no-pulsar{transition:none}
  .no-pulsar[data-paso="3"]{animation:none}
  .apagon, .apagon canvas, .apagon-linea{transition:none}
  .apagon-linea b{animation:none}
  /* La tarjeta no viaja: no-pulsar.js la coloca ya encima del retrato. Aquí
     solo se le quitan los fundidos. */
  .deslumbra, .deslumbra::after{transition:none}
  .persona-retrato .persona-sol{transition:none}
}

/* ---------- impresión ---------- */
@media print{
  .no-pulsar, .apagon, .deslumbra{display:none !important}
  /* El dossier impreso lleva el retrato de siempre, con gafas o sin ellas. */
  .persona-retrato .persona-sol{display:none !important}
}