/* === FUENTES AUTOALOJADAS (inicio) ===
   Fraunces (títulos) e Inter (texto), variables, licencia SIL OFL (ver assets/fonts/OFL-*.txt).
   unicode-range: el navegador solo descarga los subconjuntos que la página necesita. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces-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: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces-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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-cyrillic.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-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; }
/* === FUENTES AUTOALOJADAS (fin) === */

:root {
    --bg: #050507; --surface: #0f1015; --text: #f0f0f5;
    --muted: #8b8a9a; --accent: #c9c2ff; --border: rgba(255, 255, 255, 0.08);
    --glow: rgba(201, 194, 255, 0.15);
    --bezier: cubic-bezier(0.19, 1, 0.22, 1);
    /* Curvas adicionales para un movimiento más intencional según el tipo de gesto */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);      /* entradas: rápido al inicio, se asienta suave */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* micro-interacciones con un poco de rebote */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);        /* transiciones simétricas (tema, idioma) */
    --font-display: 'Fraunces', serif;
    --font-body: 'Inter', -apple-system, sans-serif;
}
:root[data-theme="light"] {
    --bg: #f5f4f0; --surface: #ffffff; --text: #111110;
    --muted: #6b6a78; --accent: #4f46e5; --border: rgba(0, 0, 0, 0.08);
    --glow: rgba(79, 70, 229, 0.1);
}
:root[lang="ru"] { --font-display: 'Fraunces', 'PT Serif', serif; }
:root[lang="zh"] { --font-display: 'Fraunces', 'Noto Serif SC', serif; --font-body: 'Inter', 'Noto Sans SC', -apple-system, sans-serif; }
:root[lang="ja"] { --font-display: 'Fraunces', 'Noto Serif JP', serif; --font-body: 'Inter', 'Noto Sans JP', -apple-system, sans-serif; }
:root[lang="ko"] { --font-display: 'Fraunces', 'Noto Serif KR', serif; --font-body: 'Inter', 'Noto Sans KR', -apple-system, sans-serif; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background-color: var(--bg); color: var(--text);
    font-family: var(--font-body); line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.4s var(--ease-in-out), color 0.4s var(--ease-in-out);
}
.brand-link {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
    color: var(--text); text-decoration: none;
    transition: color 0.3s var(--ease-out-expo);
}
.brand-link:hover { color: var(--accent); }

.controls { display: flex; align-items: center; gap: 8px; }
#theme-toggle, #lang-toggle {
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform 0.35s var(--ease-spring), background-color 0.4s var(--ease-in-out),
    border-color 0.3s var(--ease-out-expo), color 0.3s var(--ease-out-expo);
}
#theme-toggle { width: 40px; height: 40px; border-radius: 50%; }
#lang-toggle { height: 40px; padding: 0 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; }
#theme-toggle:hover, #lang-toggle:hover { border-color: var(--accent); transform: translateY(-2px); }
#theme-toggle:active, #lang-toggle:active { transform: scale(0.94); transition-duration: 0.12s; }
#theme-toggle svg { width: 16px; height: 16px; }

/* Avatares: círculo con inicial (div) o foto real (img) — ambos deben rellenar bien el círculo */
.member-avatar {
    border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), transparent);
    transition: transform 0.4s var(--ease-spring), background 0.4s var(--ease-in-out);
}
img.member-avatar { object-fit: cover; background: var(--surface); }

/* Foco de teclado: visible y consistente en toda la web, con la curva "spring" */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
    transition: outline-offset 0.2s var(--ease-spring);
}

[data-en] { transition: opacity 0.2s var(--ease-out-expo), transform 0.2s var(--ease-out-expo); }
.lang-switching { opacity: 0 !important; transform: translateY(3px); }

footer a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease-out-expo); }
footer a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}