/* ========================================================================
Perigami - hoja de estilos
Extraida de index.php; se carga con desde el .
======================================================================== */
/* ── Fuente: Ubuntu Mono auto-hospedada ────────────────────────────────────
Antes venía de fonts.googleapis.com. Auto-hospedarla quita dos dominios
externos de la carga inicial (una petición al CSS de Google + otra al
.woff2 de gstatic), y con eso la dependencia de red de terceros y el dato
de IP que cada visita le entregaba a Google.
Los cuatro archivos son los mismos subsets que servía Google (v19), con
sus unicode-range originales: el navegador solo baja "latin" salvo que la
página use de verdad un carácter del rango extendido, así que partirlos
así pesa menos que un único archivo con todo adentro.
font-display:swap conserva el comportamiento anterior: el texto se ve de
inmediato con la fuente de respaldo y cambia al llegar Ubuntu Mono. Ojo:
ese cambio sigue siendo asíncrono, así que el recálculo de clip-paths
atado a document.fonts.ready (ver perigamiscripts.js) sigue haciendo
falta — auto-hospedar acelera la carga, no la vuelve síncrona. */
@font-face {
font-family: 'Ubuntu Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/ubuntu-mono-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Ubuntu Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/ubuntu-mono-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Ubuntu Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/ubuntu-mono-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Ubuntu Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/ubuntu-mono-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
--cyan: #009DD8;
--green: #6DD900;
--orange: #FF7100;
--pink: #F6006A;
--blue: #1700BC;
--yellow: #FFD900;
--bg: #000;
--surface: #0c0c1b;
--border: #1c1c3a;
--text: #bfcfe0;
--muted: #6d80a0; /* mismo matiz que antes, aclarado para pasar AA (4.5:1) sobre --surface */
--font: 'Ubuntu Mono', monospace;
--gap: clamp(.65rem, 2.2vw, 1.1rem);
/* Bisel de modales: esquinas superior-izquierda e inferior-derecha dobladas */
--cut-lg: 10px;
--cut-lg-h: var(--cut-lg);
--clip-lg: polygon(var(--cut-lg-h) 0, 100% 0, 100% calc(100% - var(--cut-lg)),
calc(100% - var(--cut-lg-h)) 100%, 0 100%, 0 var(--cut-lg));
/* Anillo (marco) del mismo hexágono, para el borde del modal */
--ring-w: 2px;
--ring-w-diag: calc(var(--ring-w) * .41421);
--clip-lg-ring: polygon(
var(--cut-lg-h) 0, 100% 0, 100% calc(100% - var(--cut-lg)),
calc(100% - var(--cut-lg-h)) 100%, 0 100%, 0 var(--cut-lg), var(--cut-lg-h) 0,
calc(var(--cut-lg-h) + var(--ring-w-diag)) var(--ring-w),
var(--ring-w) calc(var(--cut-lg) + var(--ring-w-diag)),
var(--ring-w) calc(100% - var(--ring-w)),
calc(100% - var(--cut-lg-h) - var(--ring-w-diag)) calc(100% - var(--ring-w)),
calc(100% - var(--ring-w)) calc(100% - var(--cut-lg) - var(--ring-w-diag)),
calc(100% - var(--ring-w)) var(--ring-w),
calc(var(--cut-lg-h) + var(--ring-w-diag)) var(--ring-w)
);
--max-w: 62vw;
--max-w-mobile: 92vw;
--max-w-logo: 540px;
--cols-desktop: 7;
--cols-tablet: 5;
--cols-mobile: 3;
--breakpoint: 900px; /* desde aquí, desktop */
--breakpoint-mobile: 600px; /* por debajo, móvil */
--fs: clamp(.85rem, 2.1vw, 1.02rem);
--fs-sm: clamp(.75rem, 1.8vw, .88rem);
/* Gap entre triángulos Y radio de redondeo de esquina. */
--tri-gap: 6px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { user-select: none; }
/* Patrón + viñeta: pintados como fondo del propio body, no como
pseudo-elementos fixed;inset:0 aparte. Eran body::before (patrón) y
html::before (viñeta) hasta que algún bloqueador de anuncios dejó de
mostrarlos: un elemento fixed/inset:0/pointer-events:none con
background-image o con un degradado hacia negro es la forma de un overlay
que esos filtros ocultan o "verifican y sueltan" con retraso —de ahí el
parpadeo que tenía la viñeta— igual que pasaba con las tarjetas del
mosaico (ver CLAUDE.md §9). body ya cubre la pantalla completa
(100vh/100dvh) por diseño, así que no hace falta un overlay aparte.
Dos capas en el mismo background-image, la viñeta primero (se lista
encima) y el patrón detrás; `background-size`/`background-repeat` llevan
la misma cantidad de valores, en el mismo orden, uno por capa. La
opacidad del patrón queda horneada en el propio SVG (`fill-opacity='.12'`)
porque `opacity` no se le puede poner a una sola capa de un fondo con
varias. El charco de luz (`body::after`, más abajo) SÍ sigue aparte: su
pulso es una animación de `opacity` del elemento entero, y eso no se
puede aplicar a una sola capa de un fondo compuesto. */
body {
font-family: var(--font);
background-color: var(--bg);
background-image:
radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, rgba(0,0,0,1) 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54.12 93.75'%3E%3Cpath fill='%23009DD8' fill-opacity='.12' d='M37.64,0l14.15,24.5c.52.9,1.43,1.35,2.34,1.35V0h-16.48ZM7.01,29.9h40.1c2.08,0,3.38-2.25,2.34-4.05L34.52,0h-14.92L4.68,25.85c-1.04,1.8.26,4.05,2.34,4.05ZM51.79,38l-20.05,34.72c-1.04,1.8.26,4.05,2.34,4.05h20.05v-40.12c-.91,0-1.82.45-2.34,1.35ZM47.11,32.6H7.01c-2.08,0-3.38,2.25-2.34,4.05l20.05,34.72c1.04,1.8,3.64,1.8,4.68,0l20.05-34.72c1.04-1.8-.26-4.05-2.34-4.05ZM22.38,72.72L2.34,38c-.52-.9-1.43-1.35-2.34-1.35v40.12h20.05c2.08,0,3.38-2.25,2.34-4.05ZM31.74,83.52l5.9,10.22h16.48v-14.27h-20.05c-2.08,0-3.38,2.25-2.34,4.05ZM2.34,24.5L16.48,0H0v25.85c.91,0,1.82-.45,2.34-1.35ZM24.72,84.87l-5.12,8.88h14.92l-5.12-8.88c-1.04-1.8-3.64-1.8-4.68,0ZM20.04,79.47H0v14.27h16.48l5.9-10.22c1.04-1.8-.26-4.05-2.34-4.05Z'/%3E%3C/svg%3E");
background-size: 100% 100%, 140px 242.49px;
background-repeat: no-repeat, repeat;
color: var(--text);
height: 100vh;
height: 100dvh;
display: flex;
justify-content: center;
padding: var(--gap);
overflow: hidden;
}
/* Charco de luz */
body::after {
content: '';
position: fixed;
inset: 0;
background: radial-gradient(ellipse 62% 52% at 50% 42%, rgba(0,157,216,.13) 0%, transparent 68%);
animation: bg-pulse 10s ease-in-out infinite;
pointer-events: none;
z-index: -2;
}
@keyframes bg-pulse {
0%, 100% { opacity: .35; }
50% { opacity: 1; }
}
body.modal-open { overflow: hidden; }
/* ── Container ─────────────────────────────────────────────────────────── */
.container {
position: relative;
width: 100%;
max-width: var(--max-w);
height: 100%;
display: flex;
flex-direction: column;
gap: var(--gap);
}
/* Los px deben coincidir con --breakpoint / --breakpoint-mobile (CSS no permite var() dentro de @media) */
@media (max-width: 899px) {
.container { max-width: 82vw; }
}
@media (max-width: 600px) {
.container { max-width: var(--max-w-mobile); }
}
/* ── Logo ──────────────────────────────────────────────────────────────── */
/* El layout (ancho máximo, centrado, aire lateral) vive en .logo-row, no en
el propio : así header queda pegado 1:1 al dibujo del logo (sin su
propio padding) y .logo-visual —adentro— puede posicionar el "+" en % que
sí coinciden con el arte, sin tener que descontar ningún padding ajeno. */
.logo-row {
flex-shrink: 0;
padding: 0 calc(var(--gap) * 2);
max-width: var(--max-w-logo);
align-self: center;
width: 100%;
}
header { width: 100%; }
/* Trato interactivo del logo, compartido por las dos instancias clickeables de la página */
.logo-trigger { cursor: pointer; transform-origin: bottom center; width: 100%; }
/* Envoltorio ceñido al dibujo (mismo viewBox 134.6x35 del SVG, ver
assets/logoperigami.svg): sin padding propio, así el % de .plus-trigger
cae exactamente donde cae en el arte, no en el header con aire alrededor.
aspect-ratio explícito (no height:auto) porque un % de alto en un hijo con
position:absolute solo resuelve contra una altura DEFINIDA del padre — con
el alto en "auto" (el que da el propio