/* ═══════════════════════════════════════════════════════════════════════════ INTERACCIÓN DE NEUTRONES CON LA MATERIA — estilos propios de la ruta. El chasis es /estudio.css. Acá va sólo lo que esta pieza necesita: la ficha de propiedades, la tabla espectral, el bloque de ecuación y —lo principal— el botón flotante que descarga el paper de Luis. ═══════════════════════════════════════════════════════════════════════════ */ /* ── El botón flotante del paper ──────────────────────────────────────────── Toma el lenguaje del disco de /lateralus —resplandor radial sin blur, que en móvil cuesta caro y bandea— y las esquinas de las .dl-card del lab. Va fijo abajo a la derecha, por encima de todo menos del menú. */ .paper-flota{ position:fixed;z-index:1400;right:clamp(14px,2.4vw,34px);bottom:clamp(14px,2.4vw,34px); display:flex;align-items:center;gap:14px; padding:13px 17px 13px 15px; background:var(--bg);border:1px solid rgb(var(--acc-rgb)/.38); color:var(--ink);text-decoration:none; /* ⚠ El resplandor va en box-shadow, NO en un ::before radial. Con `isolation:isolate` el pseudo queda DENTRO del contexto de apilamiento del botón, así que su fondo opaco le tapaba el centro y el degradado se veía cortado justo en el filo de la caja. Encima `inset:-46%` resolvía −117px a los lados y −33px arriba —los porcentajes usan ejes distintos—, así que salía una elipse achatada. El box-shadow se pinta por fuera del borde y se desvanece solo: no hay costura posible. */ box-shadow:0 20px 54px -16px rgb(var(--acc-rgb)/.60), 0 0 90px -18px rgb(var(--acc-rgb)/.45), 0 0 0 1px rgb(var(--ink-rgb)/.05); animation:paperFlota 7s ease-in-out infinite alternate; transition:border-color .35s ease,box-shadow .45s ease,transform .35s cubic-bezier(.16,1,.3,1); } .paper-flota .esq{position:absolute;width:9px;height:9px;border:0 solid var(--acc);opacity:.85;} .paper-flota .esq.a{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px;} .paper-flota .esq.b{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px;} .paper-flota .esq.c{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px;} .paper-flota .esq.d{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px;} .paper-flota .ico{ flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center; border:1px solid rgb(var(--acc-rgb)/.45);background:rgb(var(--acc-rgb)/.10); } .paper-flota .ico svg{width:16px;height:16px;stroke:var(--acc);fill:none;stroke-width:1.6; transition:transform .4s cubic-bezier(.16,1,.3,1);} .paper-flota .txt{display:flex;flex-direction:column;gap:3px;min-width:0;} .paper-flota .k{font:8.5px var(--mono);letter-spacing:.18em;color:var(--acc);} .paper-flota .t{font-size:13.5px;line-height:1.25;color:var(--ink);} .paper-flota .m{font:8.5px var(--mono);letter-spacing:.09em;color:var(--ink-3);} @keyframes paperFlota{ from{transform:translateY(-4px);} to{transform:translateY(4px);} } @media(hover:hover) and (pointer:fine){ .paper-flota:hover{border-color:rgb(var(--acc-rgb)/.75);transform:translateY(0) scale(1.03); box-shadow:0 24px 64px -14px rgb(var(--acc-rgb)/.75), 0 0 110px -14px rgb(var(--acc-rgb)/.55), 0 0 0 1px rgb(var(--ink-rgb)/.08);} .paper-flota:hover .ico svg{transform:translateY(2px);} } @media(max-width:620px){ .paper-flota{right:10px;bottom:10px;padding:10px 13px 10px 11px;gap:11px;} .paper-flota .ico{width:28px;height:28px;} .paper-flota .t{font-size:12px;} .paper-flota .m{display:none;} } @media(prefers-reduced-motion:reduce){ .paper-flota{animation:none;} } /* ── Ficha de propiedades del neutrón ───────────────────────────────────── */ .props{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:1px;background:var(--edge);border:1px solid var(--edge);margin:38px 0;} .props div{background:var(--bg);padding:20px;} .props .v{font-size:clamp(20px,2.3vw,27px);font-weight:300;color:var(--ink);letter-spacing:-.02em;} .props .n{font:9px var(--mono);letter-spacing:.14em;color:var(--acc);margin-bottom:11px;} .props .d{font-size:12px;line-height:1.6;color:var(--ink-3);margin-top:8px;} /* ── Tabla ────────────────────────────────────────────────────────────────── ⚠ `overflow-x:auto` NO basta por sí solo. `.col` del chasis sólo declara `max-width`, y un bloque en flujo normal no encoge por debajo del ancho intrínseco de su contenido: la tabla de 620px empujaba el ancho del documento y el viewport pasaba de 390 a 494 px — ese era el scroll horizontal raro. `min-width:0` es lo que permite que el contenedor encoja y el desplazamiento ocurra DENTRO de su caja, no en la página. (En /research/estados-de-conciencia no pasa porque ahí `.tabla` cuelga de una rejilla con columnas `minmax(0,…)`, que ya fuerza ese mínimo.) */ .col{min-width:0;} .tabla{overflow-x:auto;overscroll-behavior-x:contain;min-width:0;max-width:100%; margin:34px 0;border-top:1px solid var(--edge);} .tabla table{width:100%;border-collapse:collapse;min-width:620px;} @media(max-width:620px){ .tabla table{min-width:520px;} } .tabla th,.tabla td{text-align:left;padding:13px 14px 13px 0;border-bottom:1px solid var(--edge); vertical-align:top;font-size:13.5px;line-height:1.55;color:var(--ink-2);} .tabla th{font:9px var(--mono);letter-spacing:.16em;color:var(--ink-3);font-weight:400;} .tabla td.n{font:12.5px var(--mono);color:var(--ink);} .tabla td.a{font:12.5px var(--mono);color:var(--ac2);} /* ── Ecuación destacada ───────────────────────────────────────────────────── ⚠ `overflow-wrap:anywhere` NO parte estas fórmulas: son cadenas de símbolos sin puntos de corte, así que la caja tomaba su ancho intrínseco —hasta 452px contra una columna de 328— y estiraba el documento entero. Ese era el scroll horizontal raro en móvil: el viewport pasaba de 390 a 494 px. Igual que la tabla, la fórmula se desplaza DENTRO de su caja. */ .ecu{border-left:2px solid rgb(var(--acc-rgb)/.55);padding:6px 0 6px 20px;margin:30px 0; min-width:0;max-width:100%;} .ecu .f{font:17px/1.7 Georgia,'Times New Roman',serif;color:var(--ink); min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain; padding-bottom:2px;} @media(max-width:620px){ .ecu .f{font-size:15px;} } .ecu .c{font:9.5px var(--mono);letter-spacing:.1em;color:var(--ink-3);margin-top:9px;} /* ── Rejilla de figuras ─────────────────────────────────────────────────── */ .rej-sim{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:clamp(14px,1.6vw,26px);margin:40px 0;} .rej-sim figure{margin:0;} .rej-sim .fig{position:relative;border:1px solid var(--edge);background:var(--bg); aspect-ratio:16/10;overflow:hidden;} .rej-sim .fig canvas{position:absolute;inset:0;width:100%;height:100%;} .rej-sim figcaption{margin-top:12px;font:10px/1.7 var(--mono);color:var(--ink-3);} .rej-sim figcaption b{color:var(--ink-2);font-weight:400;} @media(max-width:700px){ .rej-sim .fig{aspect-ratio:4/5;} } /* ── Bibliografía ─────────────────────────────────────────────────────────── El chasis no le estaba aplicando estilo: las once entradas salían a 16px, sin separación y con los números decimales pegados al borde. Va con contador propio, índice en azul colgando fuera del texto y un filete por entrada. */ .references{list-style:none;counter-reset:ref;margin:36px 0 0;padding:0; border-top:1px solid var(--edge);} .references li{counter-increment:ref;position:relative; padding:18px 0 18px 48px;border-bottom:1px solid var(--edge); font-size:14px;line-height:1.62;color:var(--ink-2);scroll-margin-top:96px;} .references li::before{content:'[' counter(ref) ']';position:absolute;left:0;top:19px; font:10px var(--mono);letter-spacing:.06em;color:var(--acc);} .references li i{font-style:italic;color:var(--ink);} .references li b{color:var(--ink);font-weight:500;} @media(hover:hover) and (pointer:fine){ .references li:hover{background:rgb(var(--ink-rgb)/.02);} } @media(max-width:620px){ .references li{padding:15px 0 15px 38px;font-size:13px;} .references li::before{top:16px;} } .endnote{font-size:12.5px;line-height:1.7;color:var(--ink-3);margin:34px 0;max-width:78ch;} /* ── La simulación de la portada ──────────────────────────────────────────── En escritorio va donde iba: fondo absoluto que cubre toda la tapa. El contenedor vive DENTRO del .wrap para poder, en móvil, salir a su propio bloque entre el título y la bajada — ahí el fondo no se veía, porque el texto ocupaba de y=338 a y=763 de una tapa de 844 px. */ /* Escritorio: fondo que cubre la portada entera. Idéntico a como estaba. */ #tapa{flex-direction:column;justify-content:flex-end;align-items:stretch;} #tapa .tapa-sim{position:absolute;inset:0;z-index:0;pointer-events:none;} #tapa .tapa-sim canvas{position:absolute;inset:0;width:100%;height:100%;display:block;} #tapa .wrap-alto,#tapa .wrap-bajo{flex:0 0 auto;} @media(max-width:700px){ /* Sale del fondo y se mete entre el título y la bajada, con altura propia. */ #tapa .tapa-sim{ position:relative;inset:auto;z-index:2;order:2; margin:20px 0 2px;height:min(38vh,290px); pointer-events:auto; /* ⚠ Sin borde ni overflow:hidden: la caminata se cortaba en seco contra el filo. Se desvanece por los cuatro lados con una máscara. */ -webkit-mask-image:radial-gradient(118% 112% at 50% 50%,#000 52%,transparent 92%); mask-image:radial-gradient(118% 112% at 50% 50%,#000 52%,transparent 92%); } #tapa .wrap-alto{order:1;} #tapa .wrap-bajo{order:3;} /* ⚠ estudio.js desvanece la portada con el scroll escribiendo estilo EN LÍNEA (opacity = 1 − y/(innerHeight*0.75) y un translate3d). En escritorio la portada ocupa una pantalla y el efecto acompaña su salida; en móvil esta portada es un bloque alto con el texto arriba, así que a media pantalla la bajada y la firma quedaban ilegibles — medido: 0,59 a los 260px y 0,18 a los 520px. Se anula con !important, que gana al estilo en línea. Intentar limpiarlo desde otro listener de scroll es una carrera perdida: estudio.js va con `defer` y escribe DESPUÉS. */ #tapa .wrap{opacity:1!important;transform:none!important;} /* El velo apagaría la simulación ahora que tiene bloque propio. */ #tapa .velo{background:linear-gradient(0deg,rgb(var(--bg-rgb)/.92) 0%,rgb(var(--bg-rgb)/.30) 40%,rgb(var(--bg-rgb)/0) 72%);} #tapa{min-height:auto;padding-top:96px;padding-bottom:40px;justify-content:flex-start;} #tapa .baja{margin-top:18px;} } /* ── Botón de la casa ─────────────────────────────────────────────────────── ⚠ `.boton` NO está en /estudio.css: cada página de estudio lo define en su propio