/* ==========================================================================
   Tomás Morales de Luna — hoja de estilos única.
   Organización:
     1. Tipografías      5. Cabecera         9. Movimiento
     2. Tokens           6. Componentes     10. Impresión
     3. Reinicio         7. Páginas
     4. Disposición      8. Pie de página
   ========================================================================== */

/* 1. Tipografías ---------------------------------------------------------- */

@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;
}
@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: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-serif-4-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: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-serif-4-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;
}

/* 2. Tokens --------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Azul institucional de la UMA y un cian de apoyo (agua).
     El cian puro (#0099cc) sobre texto blanco se queda en 3,3:1, por debajo
     del mínimo legible, así que los rellenos usan --accent-strong (5,1:1)
     y --accent queda para tintes, bordes y focos.                          */
  --brand: #183256;
  --brand-strong: #0f2440;
  --accent: #0099cc;
  --accent-strong: #00769f;
  --accent-deep: #005f82;

  /* Banda de la portada: clara con halo cian en el tema claro, y apagada a
     la franja de luminosidad del resto del tema en el oscuro (L 12-23 %).
     En los dos casos el texto es el normal de la página, no uno forzado.   */
  --hero-band:
    radial-gradient(70rem 32rem at 12% -25%, rgb(0 153 204 / .28), transparent 62%),
    linear-gradient(180deg, #e3f1fa, #f5fafd);
  --hero-eyebrow: #00607f;
  --hero-wave: rgb(0 153 204 / .18);

  --bg: #f4f6f9;
  --bg-alt: #eaeef4;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #dde4ed;
  --border-strong: #c6d1de;

  --text: #16202e;
  --text-muted: #566578;
  --text-faint: #5f6c7a;
  --on-brand: #ffffff;

  --shadow-sm: 0 1px 2px rgb(16 32 51 / .06), 0 1px 3px rgb(16 32 51 / .05);
  --shadow-md: 0 4px 6px -2px rgb(16 32 51 / .05), 0 12px 24px -8px rgb(16 32 51 / .12);
  --shadow-lg: 0 24px 60px -20px rgb(16 32 51 / .3);

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Curva de salida común a todo el movimiento (sección 9). */
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  --radius-sm: .5rem;
  --radius: .875rem;
  --radius-lg: 1.25rem;

  --gutter: 1rem;
  --wrap: 72rem;
  --header-h: 4rem;

  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

@media (min-width: 40em) {
  :root { --gutter: 1.75rem; --header-h: 4.5rem; }
}

/* Modo oscuro: automático según el sistema, salvo que se fuerce el claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --brand: #6f9fd8;
    --brand-strong: #a9c8ec;
    --accent: #34b7e3;
    --accent-strong: #6fd2f2;
    --accent-deep: #9ce2f8;
    --hero-band: linear-gradient(160deg, #0d1f33 0%, #14304a 55%, #1a3f5c 100%);
    --hero-eyebrow: #6fd2f2;
    --hero-wave: rgb(255 255 255 / .07);
    --bg: #0b131e;
    --bg-alt: #0f1b29;
    --surface: #131f2e;
    --surface-2: #18263798;
    --border: #22344a;
    --border-strong: #31485f;
    --text: #e6edf6;
    --text-muted: #9dafc4;
    --text-faint: #7d90a6;
    --on-brand: #0b131e;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-md: 0 8px 24px -10px rgb(0 0 0 / .6);
    --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / .75);
  }
}

/* …o forzado con el botón de la cabecera. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --brand: #6f9fd8;
  --brand-strong: #a9c8ec;
  --accent: #34b7e3;
  --accent-strong: #6fd2f2;
  --accent-deep: #9ce2f8;
  --hero-band: linear-gradient(160deg, #0d1f33 0%, #14304a 55%, #1a3f5c 100%);
  --hero-eyebrow: #6fd2f2;
  --hero-wave: rgb(255 255 255 / .07);
  --bg: #0b131e;
  --bg-alt: #0f1b29;
  --surface: #131f2e;
  --surface-2: #18263798;
  --border: #22344a;
  --border-strong: #31485f;
  --text: #e6edf6;
  --text-muted: #9dafc4;
  --text-faint: #7d90a6;
  --on-brand: #0b131e;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-md: 0 8px 24px -10px rgb(0 0 0 / .6);
  --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / .75);
}

/* 3. Reinicio ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
/* El `display` de una clase gana al `[hidden]{display:none}` del navegador,
   así que sin esto ocultar un elemento desde JS (.pub al filtrar por año,
   .pub-list al quedarse vacía) no tenía ningún efecto.                     */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -.01em;
  text-wrap: balance;
}

p, ul, ol, dl, figure, pre { margin: 0; }
p { text-wrap: pretty; }

a { color: var(--brand); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }

img, svg, iframe { max-width: 100%; }
img { height: auto; }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.icon { flex: none; vertical-align: -.18em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.mono { font-family: var(--font-mono); font-size: .875em; }
.muted { color: var(--text-muted); }
.lede { font-size: 1.125rem; }

.skip-link {
  position: absolute; left: 50%; translate: -50% -150%; z-index: 100;
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) var(--radius);
  background: var(--accent); color: #fff; font-weight: 600; text-decoration: none;
  transition: translate .15s ease;
}
.skip-link:focus { translate: -50% 0; }

/* 4. Disposición ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.main { padding-block: 0 4rem; min-height: 60vh; }

.stack { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.25rem); }
.main > .stack:first-child { padding-block-start: clamp(2rem, 5vw, 3.5rem); }

.card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
@media (min-width: 60em) {
  .card-grid--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
  .card-grid--wide-first { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
}

.page-head { display: flex; flex-direction: column; gap: .75rem; }
.page-head__title { font-size: clamp(2rem, 1.3rem + 3vw, 3rem); }
.page-head__lead { color: var(--text-muted); font-size: 1.0625rem; max-width: 60ch; }

.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  padding-block-end: .75rem; margin-block-end: 1.25rem;
  border-block-end: 1px solid var(--border);
}
.section-head__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }
.section-head__meta { color: var(--text-faint); font-size: .9rem; }
.section-head__link {
  margin-inline-start: auto; font-size: .9rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
}
.section-head__link:hover { text-decoration: underline; }

/* 5. Cabecera ------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-block-end: 1px solid var(--border);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; margin-inline-end: auto; }
/* El escudo es azul marino: sobre fondo oscuro se sirve en una chapa clara,
   igual que en la imagen para compartir. */
.brand__crest { width: 2.1rem; height: 2.1rem; border-radius: 50%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .brand__crest { background: var(--text); padding: 1px; }
}
:root[data-theme='dark'] .brand__crest { background: var(--text); padding: 1px; }
:root[data-theme='light'] .brand__crest { background: none; padding: 0; }

.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem; white-space: nowrap; }
.brand__role { font-size: .74rem; color: var(--text-faint); letter-spacing: .02em; white-space: nowrap; }
/* En pantallas intermedias el menú necesita el sitio: el subtítulo se retira. */
@media (max-width: 75em) { .brand__role { display: none; } }
@media (max-width: 63.99em) { .brand__role { display: block; } }
@media (max-width: 26em) { .brand__role { display: none; } }

.nav { display: flex; align-items: center; gap: 1.25rem; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.nav__link {
  display: block; padding: .5rem .7rem; border-radius: var(--radius-sm);
  font-size: .925rem; font-weight: 500; color: var(--text-muted); text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.nav__link:hover { background: var(--bg-alt); color: var(--text); }
.nav__link.is-current { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }

.nav__tools { display: flex; align-items: center; gap: .4rem; }

.lang-switch {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .55rem; border-radius: var(--radius-sm);
  font-size: .8rem; font-weight: 600; color: var(--text-muted); text-decoration: none;
}
.lang-switch:hover { background: var(--bg-alt); color: var(--text); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 2.35rem; height: 2.35rem; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.icon-btn:hover { background: var(--bg-alt); color: var(--text); }

.theme-icon { display: none; }
:root[data-theme='dark'] .theme-icon--light { display: block; }
:root[data-theme='light'] .theme-icon--dark { display: block; }
:root:not([data-theme]) .theme-icon--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-icon--dark { display: none; }
  :root:not([data-theme]) .theme-icon--light { display: block; }
}

.nav-toggle { display: none; }
.nav-toggle__close { display: none; }

/* Menú en pantallas estrechas */
@media (max-width: 63.99em) {
  .nav-toggle { display: inline-grid; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    display: none; flex-direction: column; align-items: stretch; gap: .5rem;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--surface); border-block-end: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { display: flex; animation: drop .18s ease-out; }
  .nav__list { flex-direction: column; gap: .15rem; }
  .nav__link { padding: .7rem .75rem; font-size: 1.02rem; }
  .nav__tools { padding-block-start: .75rem; border-block-start: 1px solid var(--border); }
  .nav__tools .btn { margin-inline-end: auto; }
  .nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
  .nav-toggle[aria-expanded='true'] .nav-toggle__close { display: block; }
}
@keyframes drop { from { opacity: 0; translate: 0 -.5rem; } }

/* 6. Componentes ---------------------------------------------------------- */

/* Franja que ofrece la otra versión del sitio. Está siempre en el HTML y sólo
   se descubre cuando el script de la cabecera marca el documento, antes de
   pintar: así no aparece a destiempo ni empuja la página hacia abajo. Sin
   JavaScript no se ve nunca, que es justo lo que queremos.                  */
.lang-offer { display: none; }

html.other-lang .lang-offer { display: block; background: var(--brand); color: var(--on-brand); }

.lang-offer__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding-block: .55rem; font-size: .9rem;
}

.lang-offer__text { flex: 1 1 14rem; margin: 0; }

.lang-offer__link {
  display: inline-flex; align-items: center; gap: .35rem;
  color: inherit; font-weight: 600; text-decoration: none;
}
.lang-offer__link:hover { text-decoration: underline; text-underline-offset: .2em; }

.lang-offer__close {
  display: inline-grid; place-items: center; flex: none;
  width: 1.9rem; height: 1.9rem; padding: 0;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: inherit; cursor: pointer; opacity: .7;
}
.lang-offer__close:hover { opacity: 1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.05rem; border: 1px solid transparent; border-radius: 99rem;
  font: inherit; font-size: .925rem; font-weight: 600; line-height: 1.3;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: .4rem .8rem; font-size: .85rem; }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-strong); }
.btn--accent { background: var(--accent-strong); color: var(--on-brand); }
.btn--accent:hover { background: var(--accent-deep); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--text-faint); background: var(--surface-2); }

.pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .7rem; border: 1px solid var(--border-strong); border-radius: 99rem;
  background: var(--surface); color: var(--text-muted);
  font-size: .8rem; font-weight: 500; text-decoration: none; cursor: pointer;
  list-style: none;
}
.pill:hover { color: var(--text); border-color: var(--text-faint); }
.pill::-webkit-details-marker { display: none; }

.card {
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.card--accent { border-block-start: 3px solid var(--accent); }
.card--center { align-items: center; text-align: center; }
.card--flush { padding: 0; overflow: hidden; }
.card--flush > .card__title--inset { padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem) 0; }
.card--flush > .card__note { padding: 0 clamp(1.25rem, 3vw, 1.75rem) 1.25rem; }
.card__title {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.15rem; color: var(--text);
}
.card__title .icon { color: var(--accent); }
.card__lead { color: var(--text-muted); }
/* Párrafo largo en columna estrecha (junto al logotipo del grupo): justificado
   queda más compacto, y con hyphens el reparto de espacios no se descuadra. */
.card__lead--justified { text-align: justify; hyphens: auto; }
.card__note { font-size: .85rem; color: var(--text-faint); }
.card__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
/* En pantalla ancha, texto a la izquierda y la pieza suelta (horario, logo) a
   la derecha; apiladas por debajo de 48em. La columna de texto se separa igual
   en los dos casos, por eso su regla vive fuera del @media.                 */
.card--split > div { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
@media (min-width: 48em) {
  .card--split { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; }
}

.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.tag {
  padding: .3rem .7rem; border-radius: 99rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: color-mix(in srgb, var(--text) 85%, var(--accent));
  font-size: .85rem;
}
.tag--sm { font-size: .78rem; padding: .15rem .55rem; }

.timeline { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.timeline > li {
  position: relative; padding-inline-start: 1.15rem;
  display: flex; flex-direction: column;
}
.timeline > li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .55em;
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent);
}
.timeline > li:not(:last-child)::after {
  content: ''; position: absolute; inset-inline-start: .2rem; top: 1.25em; bottom: -.9rem;
  width: 1px; background: var(--border-strong);
}
.timeline__title { font-weight: 600; }
.timeline__meta { color: var(--text-muted); font-size: .9rem; }

.link-grid { display: grid; gap: .875rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.link-card {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.1rem 1.25rem; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.link-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.link-card__title { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--brand); }
.link-card__desc { font-size: .875rem; color: var(--text-muted); }

.contact-lines { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.contact-lines > li, .contact-lines > span { display: flex; align-items: flex-start; gap: .6rem; }
.contact-lines .icon { color: var(--accent); margin-block-start: .25em; }
.contact-lines--lg { font-size: 1.05rem; }

.address { font-style: normal; color: var(--text-muted); line-height: 1.7; }

.schedule { display: flex; flex-direction: column; gap: .6rem; }
.schedule__term {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint);
}
.schedule__list { display: flex; flex-direction: column; gap: .1rem; margin: 0; }
.schedule__row {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  padding-block: .45rem; border-block-end: 1px dashed var(--border);
}
.schedule__row:last-child { border-block-end: 0; }
.schedule__row dt { font-weight: 600; min-width: 6rem; }
.schedule__row dd { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.schedule__row dd span {
  font-family: var(--font-mono); font-size: .85rem;
  padding: .1rem .5rem; border-radius: var(--radius-sm); background: var(--bg-alt);
}

.embed { position: relative; background: var(--bg-alt); }
.embed iframe { display: block; width: 100%; border: 0; }
.embed--tall iframe { height: min(80vh, 46rem); }
.embed--map iframe { height: min(60vh, 30rem); }

.empty { padding: 2rem; text-align: center; color: var(--text-muted); }

/* 7. Páginas -------------------------------------------------------------- */

/* Portada */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem);
  background: var(--hero-band);
  border-block-end: 1px solid var(--border);
}
.hero__waves { position: absolute; inset-inline: 0; bottom: -1px; z-index: -1; line-height: 0; }
.hero__waves svg { width: 100%; height: clamp(5rem, 14vw, 9rem); display: block; }
.hero__waves path { fill: var(--hero-wave); }
.hero__inner { display: flex; flex-direction: column; gap: 1rem; max-width: 56rem; }
.hero__eyebrow {
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hero-eyebrow);
}
.hero__title { font-size: clamp(2.35rem, 1.2rem + 5.2vw, 4.25rem); letter-spacing: -.025em; }
.hero__affiliation { color: var(--text-muted); font-size: 1.0125rem; }
.hero__intro { font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); max-width: 58ch; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: .5rem; }
.hero__ids { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .75rem; }
.hero__ids a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: 99rem;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: .82rem; color: var(--text-muted); text-decoration: none;
}
.hero__ids a:hover { border-color: var(--accent); color: var(--text); }
.hero__ids strong { color: var(--text); }
.hero__ids span { font-family: var(--font-mono); font-size: .95em; }

/* Logotipo del grupo de investigación. El original es un JPEG con fondo negro,
   así que se deja tal cual y sólo se le redondean las esquinas: se ve igual en
   los dos temas y no hay que mantener dos versiones del fichero.            */
.group-logo {
  /* Ancho fijo, no min(100%, …): con el porcentaje la columna `auto` de la
     rejilla se dimensionaba con los 300px intrínsecos del JPEG y sobraba
     hueco a la derecha del logotipo. max-width cubre el caso apilado.      */
  width: 11.5rem; max-width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--border);
  align-self: flex-start;
}
/* En dos columnas se centra respecto al bloque de texto; apilado sigue
   alineado a la izquierda, como el resto del contenido de la tarjeta.     */
@media (min-width: 48em) {
  .group-logo { align-self: center; justify-self: center; }
}

/* Publicaciones */
.filters { display: flex; flex-direction: column; gap: .9rem; }
.field { position: relative; display: flex; align-items: center; }
.field__icon { position: absolute; inset-inline-start: .85rem; color: var(--text-faint); display: flex; }
.field input {
  width: 100%; padding: .7rem 1rem .7rem 2.7rem;
  font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 99rem;
}
.field input::placeholder { color: var(--text-faint); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

.chips {
  display: flex; gap: .4rem; overflow-x: auto; padding-block-end: .3rem;
  scrollbar-width: thin;
}
.chip {
  flex: none; padding: .3rem .75rem; border-radius: 99rem;
  border: 1px solid var(--border-strong); background: var(--surface);
  font: inherit; font-size: .82rem; color: var(--text-muted); cursor: pointer;
}
.chip:hover { color: var(--text); border-color: var(--text-faint); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.filters__count { font-size: .85rem; color: var(--text-faint); }
.filters__count output { font-weight: 600; color: var(--text); }

.pub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pub {
  display: grid; gap: .25rem 1.25rem;
  grid-template-columns: 1fr;
  padding-block: 1.4rem;
  border-block-start: 1px solid var(--border);
}
.pub-list > .pub:first-child { border-block-start: 0; }
@media (min-width: 40em) {
  .pub { grid-template-columns: 4rem 1fr; }
}
.pub__year {
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
  color: var(--accent-strong); padding-block-start: .3em;
}
.pub__body { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.pub__title { font-size: 1.075rem; line-height: 1.35; }
.pub__title a { color: inherit; text-decoration: none; }
.pub__title a:hover { color: var(--brand); text-decoration: underline; }
.pub__authors { font-size: .9rem; color: var(--text-muted); }
.pub__authors strong { color: var(--text); }
.pub__venue { font-size: .9rem; color: var(--text-faint); }
.pub__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .35rem; }
.pub__details { min-width: 0; }
.pub__details[open] > .pill { border-color: var(--accent); color: var(--text); }
.pub__details[open] > .pill .icon { rotate: 180deg; }
.pub__details .icon { transition: rotate .15s ease; }
.pub__abstract {
  margin-block-start: .7rem; padding: .9rem 1.1rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .9rem; color: var(--text-muted); max-width: 72ch;
}
.pub__bibtex { position: relative; margin-block-start: .7rem; }
.pub__bibtex pre {
  margin: 0; padding: 2.6rem 1.1rem .9rem; overflow-x: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.6; color: var(--text-muted);
}
.copy-btn {
  position: absolute; top: .5rem; inset-inline-end: .5rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem; border-radius: 99rem;
  border: 1px solid var(--border-strong); background: var(--surface);
  font: inherit; font-size: .75rem; color: var(--text-muted); cursor: pointer;
}
.copy-btn:hover { color: var(--text); border-color: var(--accent); }
.copy-btn.is-done { color: var(--accent); border-color: var(--accent); }

.pub-list--compact .pub { padding-block: 1.05rem; }
.pub-list--compact .pub__title { font-size: 1rem; }

/* Docencia */
.course-list { display: flex; flex-direction: column; gap: .75rem; }
.course__details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.course__details[open] { border-color: var(--border-strong); }
.course__summary {
  display: flex; align-items: center; gap: 1rem; cursor: pointer;
  padding: 1.1rem clamp(1.1rem, 3vw, 1.5rem); list-style: none;
}
.course__summary::-webkit-details-marker { display: none; }
.course__summary:hover { background: var(--surface-2); }
.course__heading { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.course__name { font-size: 1.05rem; }
.course__programme { font-size: .855rem; color: var(--text-faint); }
.course__chevron { margin-inline-start: auto; color: var(--text-faint); display: flex; transition: rotate .2s ease; }
.course__details[open] .course__chevron { rotate: 180deg; }
.course__body {
  display: flex; flex-direction: column; gap: .9rem;
  padding: 0 clamp(1.1rem, 3vw, 1.5rem) 1.3rem;
  color: var(--text-muted); max-width: 75ch;
}
.course__years { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.course__links { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Proyectos */
.project-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.project {
  display: grid; gap: .35rem 1.25rem;
  grid-template-columns: 1fr;
  padding-block: 1.5rem;
  border-block-start: 1px solid var(--border);
}
.project-list > .project:first-child { border-block-start: 0; }
/* Los años a un lado en cuanto hay sitio, como en publicaciones. */
@media (min-width: 40em) {
  .project { grid-template-columns: 7rem 1fr; }
}
.project__period {
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
  color: var(--accent-strong); padding-block-start: .35em; white-space: nowrap;
}
.project__body { display: flex; flex-direction: column; gap: .45rem; min-width: 0; max-width: 75ch; }
.project__name { font-size: 1.075rem; line-height: 1.35; font-weight: 600; }
/* El acrónimo hace de antetítulo: en su propia línea, sobre el nombre largo. */
.project__acronym {
  display: block; margin-block-end: .15rem;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .03em; color: var(--brand);
}
.project__meta { font-size: .88rem; color: var(--text-faint); }
.project__text { font-size: .93rem; color: var(--text-muted); }
.project__award {
  display: flex; align-items: center; gap: .4rem;
  font-size: .9rem; color: var(--accent-strong);
}
.project__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-block-start: .2rem; }

/* Comics */
.gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.gallery__item { display: flex; flex-direction: column; gap: .5rem; }
.gallery__btn {
  display: block; padding: .9rem; cursor: zoom-in;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, transform .15s ease;
}
.gallery__btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.gallery__btn img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.gallery__caption { font-size: .85rem; color: var(--text-muted); text-align: center; }

.lightbox {
  width: min(92vw, 60rem); max-width: none; max-height: 92dvh;
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.lightbox::backdrop { background: rgb(6 12 20 / .75); backdrop-filter: blur(3px); }
.lightbox__figure { margin: 0; padding: 2.75rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.lightbox__figure img { margin-inline: auto; max-height: 72dvh; width: auto; }
.lightbox__figure figcaption { text-align: center; color: var(--text-muted); font-size: .9rem; }
.lightbox__close { position: absolute; top: .5rem; inset-inline-end: .5rem; }

.qr { width: min(100%, 15rem); border-radius: var(--radius); }

/* 8. Pie de página -------------------------------------------------------- */

.site-footer {
  margin-block-start: 3rem; padding-block: 2.5rem 1.5rem;
  background: var(--bg-alt); border-block-start: 1px solid var(--border);
  font-size: .9rem;
}
.site-footer__inner {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
/* El logotipo del grupo acompaña al nombre en todas las páginas. Se usa un
   fichero ya recortado en círculo, y no border-radius sobre el original,
   porque éste es rectangular y el recorte se comería el texto «EDANYA».   */
.site-footer__id { display: flex; align-items: flex-start; gap: 1rem; }
.site-footer__logo { flex: none; line-height: 0; border-radius: 50%; }
.site-footer__logo img {
  width: 3.75rem; height: 3.75rem; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border);
  transition: box-shadow .15s ease;
}
.site-footer__logo:hover img { box-shadow: 0 0 0 2px var(--accent); }
.site-footer__name { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; }
.site-footer__meta { color: var(--text-muted); margin-block-start: .35rem; }
.site-footer__links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.site-footer__links a { color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.site-footer__links a:hover { color: var(--brand); text-decoration: underline; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  margin-block-start: 2rem; padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--border); color: var(--text-faint); font-size: .82rem;
}
.site-footer__bottom a { color: var(--text-faint); }

/* 9. Movimiento ------------------------------------------------------------
   Tres efectos, ninguno continuo: todos duran menos de un segundo y se paran
   solos. Animan sólo `opacity`, `transform`, `translate` y `clip-path`, que el
   navegador resuelve sin volver a maquetar la página. El bloque del final los
   desactiva enteros si el sistema pide menos movimiento.
   -------------------------------------------------------------------------- */

/* Paso entre páginas. Lo hace el navegador al seguir cualquier enlace interno,
   sin JavaScript. Donde todavía no está implementado (Firefox) la navegación
   es la de siempre, así que no hay nada que degradar a mano.                */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

/* La cabecera se queda quieta mientras el contenido cambia: al darle un nombre
   propio, el navegador la reconoce como el mismo elemento en las dos páginas. */
.site-header { view-transition-name: site-header; }

/* Entrada al cargar: la banda de la portada y la cabecera de cada página suben
   escalonadas, y de paso se enfocan. Sólo alcanza a lo que ya está en la
   primera pantalla: son media docena de elementos de texto, y por eso el
   desenfoque sale barato aquí y no en la aparición al desplazarse.         */
/* `backwards` y no `both`: así el relleno sólo cubre la espera previa. Con
   `both` el elemento se quedaba con un `filter: blur(0px)` pegado para
   siempre, que crea capa y contexto de apilamiento sin pintar nada.     */
.hero__inner > *, .page-head > * { animation: rise-focus .5s var(--ease-out) backwards; }
.hero__inner > :nth-child(2), .page-head > :nth-child(2) { animation-delay: .06s; }
.hero__inner > :nth-child(3), .page-head > :nth-child(3) { animation-delay: .12s; }
.hero__inner > :nth-child(4) { animation-delay: .18s; }
.hero__inner > :nth-child(5) { animation-delay: .24s; }
.hero__inner > :nth-child(6) { animation-delay: .3s; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes rise-focus { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }

/* Aparición al desplazarse. La clase `.reveal` la pone site.js, así que todo
   cuelga de `.js` (la pone base.html antes de pintar): sin JavaScript no queda
   nada escondido. Es una animación y no una transición para no pisar el
   `transition` que algunas de estas cajas usan ya al pasar el puntero.      */
.js .reveal { opacity: 0; }
.js .reveal.is-visible {
  opacity: 1;
  animation: rise .5s var(--ease-out) var(--reveal-delay, 0s) backwards;
}

/* Cambio de tema: el tema nuevo se abre en círculo desde el propio botón. Las
   tres variables salen de su posición y las calcula site.js. Mientras dura, la
   cabecera renuncia a su nombre para que el círculo la recorte como al resto
   de la página, en vez de cambiar de golpe.                                 */
html.theme-anim .site-header { view-transition-name: none; }
html.theme-anim::view-transition-old(root) { animation: none; }
html.theme-anim::view-transition-new(root) { animation: theme-reveal .5s var(--ease-out); }

@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--tx, 100%) var(--ty, 0)); }
  to { clip-path: circle(var(--tr, 150vmax) at var(--tx, 100%) var(--ty, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hero__inner > *, .page-head > * { animation: none; }
  .js .reveal, .js .reveal.is-visible { opacity: 1; animation: none; }
}

/* 10. Impresión ----------------------------------------------------------- */

@media print {
  /* En papel no hay nada que aparecer: lo que estuviera esperando su turno
     (sección 9) saldría en blanco. */
  .hero__inner > *, .page-head > *, .js .reveal {
    animation: none !important; opacity: 1 !important;
  }
  .site-header, .site-footer, .hero__waves, .filters, .pub__actions, .skip-link,
  .lang-offer { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card, .link-card, .course__details { border: 1px solid #bbb; box-shadow: none; break-inside: avoid; }
  .pub, .project { break-inside: avoid; }
  .course__body { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; word-break: break-all; }
}