/* ============================================================
   BLANCO + AZUL — tema claro tomado 1:1 del Figma Make del usuario
   (fondo blanco, texto azul-marino #0a1626, acento azul #00529c).
   Reemplaza el tema oscuro dorado anterior. Paneles de vidrio
   translúcido claros, tipografía Playfair Display + DM Sans.
   ============================================================ */

:root {
  --color-bg: #ffffff;
  --color-surface: rgba(232, 241, 251, 0.7);
  --color-surface-solid: #e8f1fb;
  --color-text: #0a1626;
  --color-text-muted: #3f5b78;
  --color-accent: #00529c;
  --color-accent-dark: #00376b;
  --color-accent-green: #00376b;
  --color-accent-soft: rgba(0, 82, 156, 0.14);
  --color-border: rgba(0, 82, 156, 0.15);
  --glass-blur: blur(20px) saturate(160%);

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-accent: 'Playfair Display', Georgia, serif;
  --font-script: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 20px;
  --max-width: 1200px;
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--font-display); margin: 0; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* Ya no pinta el degradado azul de fondo (era del tema oscuro
   anterior) — el Figma actual es plano/blanco, sin ese tinte. El
   <div class="ambient"> se queda en el HTML pero inerte, para no
   tocar 3 archivos por un cambio puramente visual. */
.ambient { display: none; }

@keyframes ambient-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2.5%, 2%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient { animation: none; }
}

.glass-panel {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 30px 70px rgba(10, 22, 38, 0.12), inset 0 1px 0 rgba(10, 22, 38, 0.1);
  padding: 3rem 1.5rem;
  overflow: hidden;
}

.glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(10, 22, 38, 0.08), transparent);
}

@media (prefers-reduced-transparency: reduce) {
  .glass-panel, .nav.is-scrolled, .grad-card, .video-wrapper, .search__input, .back-to-top {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--color-surface-solid) !important;
  }
}

@media (min-width: 700px) {
  .glass-panel { padding: 3.5rem 3rem; }
}

.glass-panel--narrow { max-width: 720px; margin: 0 auto; }

.section__eyebrow {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--color-accent-dark);
  margin: 0 0 0.75rem;
}

.section__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  text-align: center;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.section__subtitle {
  text-align: center;
  color: var(--color-text-muted);
  margin: 0 auto 2.5rem;
  max-width: 40ch;
}

section { padding: 4rem 1.25rem; max-width: var(--max-width); margin: 0 auto; scroll-margin-top: 5.5rem; }

.graduados { max-width: 1152px; }

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 1.75rem;
  background: transparent;
  color: var(--color-text);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background 500ms ease, box-shadow 500ms ease, border-color 500ms ease, padding var(--transition), opacity 420ms ease, transform 420ms ease;
}

/* Transparente hasta bajar 60px (ver onScroll en main.js) — igual
   que el Figma Make. Antes de eso, el propio degradado claro del
   hero (.hero__overlay) ya deja el texto del nav legible. */
.nav.is-scrolled {
  padding: 0.7rem 1.75rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--color-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

/* Se esconde mientras la foto destacada ocupa toda la pantalla. */
.nav--hidden {
  opacity: 0;
  transform: translateY(-110%);
  pointer-events: none;
}

@media (max-width: 560px) {
  .nav {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.5rem;
    padding: 0.8rem 1rem;
  }
  .nav__brand { font-size: 0.95rem; }
  .nav__links { width: 100%; justify-content: center; gap: 0.9rem; font-size: 0.78rem; }
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav__brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  transition: background var(--transition);
}

.nav__brand:hover .nav__brand-icon { background: rgba(0, 82, 156, 0.22); }

.nav__brand-icon svg { width: 15px; height: 15px; }
.nav__brand-icon { background: transparent; }
.nav__brand:hover .nav__brand-icon { background: transparent; }
.nav__brand-icon img { display: block; width: auto; height: 26px; }

.nav__links { display: flex; gap: 1.5rem; font-size: 0.9rem; }

.nav__links a {
  color: inherit;
  opacity: 0.85;
  transition: opacity var(--transition), color var(--transition);
}

.nav__links a:hover,
.nav__links a:focus-visible { opacity: 1; color: var(--color-accent); }

/* ============================================================
   HERO — foto de fondo (togas al aire) con overlay azul-noche muy
   oscuro, insignia de la institución, título grande (Playfair
   Display: línea blanca + línea dorada itálica), cuenta regresiva
   en vivo hasta la ceremonia, y dos botones de acción. Calcado del
   mockup del usuario (Figma Make).
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 7rem 1.25rem 3.5rem;
  background: var(--color-bg);
}

.hero__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #e8f1fb, #ffffff);
  opacity: 0;
  transition: opacity var(--transition);
}

.hero__placeholder.is-visible { opacity: 1; }
.hero__placeholder-icon { display: none; }
.hero__placeholder-icon.is-visible { display: block; }
.hero__placeholder-icon svg { width: 18vw; min-width: 90px; max-width: 160px; color: var(--color-accent); }
.hero__placeholder-icon img { display: block; width: auto; height: clamp(110px, 17vw, 180px); }

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 45%, rgba(255, 255, 255, 0.7) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  color: var(--color-text);
  opacity: var(--hero-fade, 1);
  transform: translateY(calc((1 - var(--hero-fade, 1)) * -36px));
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-solid);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 600;
}

.hero__title {
  margin: 0 0 1.25rem;
  line-height: 1.05;
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  color: #0a1626;
}

.hero__title-accent {
  font-style: italic;
  background: linear-gradient(135deg, #00529c 0%, #00376b 50%, #00529c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-accent);
}

.hero__rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.hero__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 82, 156, 0.08);
}

.hero__ring--1 { width: 500px; height: 500px; }
.hero__ring--2 { width: 750px; height: 750px; border-color: rgba(0, 82, 156, 0.05); }
.hero__ring--3 { width: 1000px; height: 1000px; border-color: rgba(0, 82, 156, 0.03); }

.hero__sparkle {
  position: absolute;
  z-index: 0;
  width: 18px;
  color: rgba(0, 55, 107, 0.5);
  pointer-events: none;
  animation: hero-sparkle-pulse 2.4s ease-in-out infinite;
}

.hero__sparkle--a { top: 20%; left: 10%; width: 14px; animation-delay: 0s; }
.hero__sparkle--b { top: 30%; right: 8%; width: 18px; animation-delay: 0.5s; }
.hero__sparkle--c { top: 65%; left: 6%; width: 12px; animation-delay: 1s; }

@keyframes hero-sparkle-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.7; }
}

.hero__scroll-nudge {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-accent);
  opacity: 0.4;
  transition: opacity var(--transition);
}

.hero__scroll-nudge:hover,
.hero__scroll-nudge:focus-visible { opacity: 0.75; }

.hero__scroll-nudge-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, transparent, var(--color-accent));
  animation: hero-sparkle-pulse 2.4s ease-in-out infinite;
}

.hero__subtitle {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--color-text-muted);
  margin: 0 0 0.9rem;
}

.hero__desc {
  font-size: 0.92rem;
  color: rgba(10, 22, 38, 0.65);
  max-width: 30rem;
  margin: 0 auto 2.5rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.hero__cta--primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid var(--color-accent);
}

.hero__cta--primary:hover,
.hero__cta--primary:focus-visible {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
}

.hero__cta--outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.hero__cta--outline:hover,
.hero__cta--outline:focus-visible {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

/* ============================================================
   EVENTOS (Imposición de mandil / Fiesta de graduación) — tarjetas
   con foto de portada arriba (no video fijo), "Ver fotos" como
   pastilla flotante sobre la foto, y un estado "Video próximamente"
   dentro del cuerpo. Si data/config.json trae un embedUrl real para
   ese evento, el video reemplaza la foto (misma forma de tarjeta).
   Estructura y textos tomados 1:1 del Figma Make del usuario.
   ============================================================ */

.eventos { max-width: 1024px; }

.eventos__divider-full {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border), transparent);
  margin: 0 0 3.5rem;
}

.eventos__header { text-align: center; margin-bottom: 3rem; }

.eventos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 820px;
  margin: 0 auto;
}

.evento-block {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-solid);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.evento-block:hover {
  border-color: rgba(0, 82, 156, 0.3);
  box-shadow: 0 30px 60px rgba(0, 82, 156, 0.1);
  transform: translateY(-4px);
}

.evento-block__photo-wrap {
  position: relative;
  height: clamp(16rem, 42vw, 24rem);
  overflow: hidden;
  background: var(--color-surface);
}

.evento-block__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: transform 700ms ease, opacity 300ms ease;
}

.evento-block:hover .evento-block__photo {
  transform: scale(1.05);
  opacity: 0.9;
}

.evento-block__photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-surface-solid), rgba(232, 241, 251, 0.15) 55%, transparent);
}

.evento-block__fotos-pill {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.72rem;
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition);
}

.evento-block__fotos-pill:hover,
.evento-block__fotos-pill:focus-visible {
  background: var(--color-accent-soft);
  border-color: rgba(0, 82, 156, 0.4);
}

/* "Ver fotos" y el estado de video se esconden y aparecen al pasar
   el mouse por la tarjeta (como el BentoCard de magicui) — pero solo
   en dispositivos que de verdad tienen hover. En touch (celular,
   tablet) se quedan siempre visibles, porque ahí no hay "pasar el
   mouse" y esconderlos los dejaría inalcanzables. */
@media (hover: hover) and (pointer: fine) {
  .evento-block__fotos-pill {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 300ms ease, transform 300ms ease, background var(--transition), border-color var(--transition);
  }

  .evento-block__status {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 300ms ease, transform 300ms ease;
  }

  .evento-block:hover .evento-block__fotos-pill,
  .evento-block:focus-within .evento-block__fotos-pill,
  .evento-block:hover .evento-block__status,
  .evento-block:focus-within .evento-block__status {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* flex column + flex:1 para que el contenido llene lo que sobra de
   la tarjeta (las dos tarjetas ya miden lo mismo por el grid), y
   luego .evento-block__status con margin-top:auto para que el botón
   quede siempre pegado abajo — así las dos tarjetas alinean el botón
   a la misma altura sin importar si la descripción es más larga en
   una que en otra. */
.evento-block__content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.evento-block__mes {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}

.evento-block__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  color: var(--color-text);
  margin: 0 0 0.9rem;
}

.evento-block__desc {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 1.75rem;
  max-width: 46ch;
}

.evento-block__status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}

.evento-block__status[hidden],
.evento-block__photo-wrap[hidden] { display: none; }

.evento-block__status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  cursor: not-allowed;
  user-select: none;
}

.evento-block__status-pill svg { opacity: 0.5; }

/* Cuando hay un embedUrl real en config.json, la pastilla pasa de
   "Video próximamente" (aviso, no clickeable) a "Ver video" (link
   real a YouTube en pestaña nueva). */
.evento-block__status-pill--activa {
  cursor: pointer;
  color: var(--color-accent);
  border-color: rgba(0, 82, 156, 0.35);
  background: var(--color-accent-soft);
  transition: background var(--transition), transform var(--transition);
}

.evento-block__status-pill--activa svg { opacity: 1; }

.evento-block__status-pill--activa:hover,
.evento-block__status-pill--activa:focus-visible {
  background: var(--color-accent);
  color: #fff;
  transform: translateY(-1px);
}

.evento-block__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.5;
  animation: evento-status-pulse 1.8s ease-in-out infinite;
}

@keyframes evento-status-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .evento-block__status-dot { animation: none; }
}

/* ============================================================
   GALERÍA DE RECUERDOS — marquee horizontal continuo (60s, loop
   perfecto porque la lista de fotos está duplicada), igual que el
   Figma. Se pausa al pasar el mouse para poder mirar/hacer clic.
   ============================================================ */

.galeria-recuerdos { margin-top: 2.5rem; }

.galeria-recuerdos__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
}

.galeria-recuerdos__label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin: 0;
}

.galeria-recuerdos__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-accent-dark);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.galeria-recuerdos__cta:hover,
.galeria-recuerdos__cta:focus-visible {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.galeria-recuerdos__grid {
  overflow: hidden;
  border-radius: 16px;
}

/* El movimiento lo maneja JS (setupInfiniteSlider en main.js, como
   el InfiniteSlider de motion-primitives): frame a frame con
   requestAnimationFrame, no @keyframes — así la velocidad puede
   bajar suave al pasar el mouse en vez de pausarse en seco. */
.galeria-recuerdos__track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .galeria-recuerdos__grid { overflow-x: auto; }
}

.galeria-recuerdos__item {
  position: relative;
  flex: 0 0 auto;
  width: 288px;
  height: 192px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.galeria-recuerdos__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* opaca (no semi-transparente): con opacity<1 se alcanzaba a ver el
     ícono del placeholder de fondo, como un fantasma detrás de la foto.
     El look "apagado" ahora lo da filter, que no tiene ese problema
     porque no deja pasar lo de atrás. */
  filter: saturate(0.22) brightness(0.82);
  transition: filter 300ms ease;
}

.galeria-recuerdos__item:hover img,
.galeria-recuerdos__item:focus-visible img {
  filter: none;
}

.galeria-recuerdos__placeholder {
  width: 30%;
  opacity: 0.6;
}

.galeria-recuerdos__placeholder svg { width: 100%; height: 100%; display: block; }

.video-wrapper {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  background: rgba(232, 241, 251, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-wrapper__placeholder {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* ============================================================
   FOTO DESTACADA — entre "Fiesta de graduación" y "Los
   graduados": una foto que crece a pantalla completa a medida
   que bajás (controlado por JS vía --showcase-progress), y al
   llegar a su tamaño final habilita flechas para cambiar de
   foto. Ver setupShowcase() en main.js.
   ============================================================ */

.showcase {
  position: relative;
  height: 310vh;
  max-width: none;
  margin: 0;
  padding: 0;
}

.showcase__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.showcase__frame {
  position: relative;
  width: 100%;
  height: 100svh;
  border-radius: 32px;
  overflow: hidden;
  background: rgba(232, 241, 251, 0.55);
  box-shadow: 0 30px 80px rgba(10, 22, 38, 0.22);
  transform: scale(var(--showcase-progress, 0.68));
  opacity: clamp(0.6, calc(0.4 + var(--showcase-progress, 0.68)), 1);
  transition: border-radius 420ms ease, box-shadow 420ms ease;
  will-change: transform;
}

.showcase__frame.is-full {
  border-radius: 0;
  box-shadow: none;
}

.showcase__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 260ms ease;
}

.showcase__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(10, 22, 38, 0.15);
  background: rgba(10, 22, 38, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease, background 200ms ease;
}

.showcase__arrow--prev { left: 18px; }
.showcase__arrow--next { right: 18px; }

.showcase__frame.is-full .showcase__arrow {
  opacity: 0.55;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.showcase__frame.is-full .showcase__arrow:hover,
.showcase__frame.is-full .showcase__arrow:focus-visible {
  opacity: 1;
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-50%) scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .showcase { height: auto; }
  .showcase__sticky { position: relative; height: auto; padding: 0; }
  .showcase__frame { width: 100%; height: 80vh; border-radius: 0; transform: none; opacity: 1; }
}

/* ============================================================
   COLLAGE DE GRADUADOS — tercer slide de la foto destacada:
   cuadrícula de todas las fotos (filas moviéndose solas, alternando
   dirección), y al hacer click en una se abre el "spotlight" con el
   nombre de esa persona y sus dos fotos. Ver setupShowcaseCollage()
   en main.js.
   ============================================================ */

.showcase__collage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #eaf3fc, #bcd8f2);
}

.showcase__collage-rows {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: clamp(4px, 0.8vw, 10px);
  padding: clamp(4px, 0.8vw, 10px);
}

.showcase__collage-row {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: clamp(4px, 0.8vw, 10px);
  width: max-content;
  will-change: transform;
  animation-name: collage-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.showcase__collage-row--reverse {
  animation-direction: reverse;
}

@keyframes collage-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.showcase__collage-tile {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  outline-offset: -2px;
  transition: filter 420ms ease, opacity 420ms ease, transform 200ms ease;
}

.showcase__collage-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 320ms ease;
}

.showcase__collage-tile img.is-loaded {
  opacity: 1;
}

.showcase__collage-tile-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.85rem, 2vw, 1.1rem);
}

.showcase__collage-tile:hover,
.showcase__collage-tile:focus-visible {
  filter: none;
  opacity: 1;
  transform: scale(1.15);
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .showcase__collage-row { animation: none; }
}

/* ============================================================
   GALERÍA DE EVENTO (fiesta / mandil) — tira de fotos que se
   desplaza sola (marquee), se pausa al pasar el mouse, y cada
   foto abre completa en el lightbox.
   ============================================================ */

.event-gallery {
  margin-top: 1rem;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 14px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge viejo */
}

.event-gallery::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.event-gallery__track {
  display: flex;
  height: 100%;
  gap: 0.75rem;
  width: max-content;
  animation: event-gallery-scroll 100s linear infinite;
}

.event-gallery:hover .event-gallery__track,
.event-gallery:focus-within .event-gallery__track {
  animation-play-state: paused;
}

@keyframes event-gallery-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .event-gallery__track { animation: none; }
  .event-gallery { overflow-x: auto; }
}

.event-gallery__item {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 4 / 3;
  width: auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.event-gallery__placeholder {
  width: 30%;
  opacity: 0.65;
}

.event-gallery__placeholder svg { width: 100%; height: 100%; display: block; }

.event-gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}

.event-gallery__item:hover img,
.event-gallery__item:focus-visible img {
  transform: scale(1.1);
}

/* ============================================================
   BUSCADOR
   ============================================================ */

.search {
  position: relative;
  max-width: 420px;
  margin: 0 auto 1rem;
}

.search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 2;
  pointer-events: none;
}

.search__input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(232, 241, 251, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search__input::placeholder { color: var(--color-text-muted); }

.search__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.search__empty {
  text-align: center;
  color: var(--color-text-muted);
  margin: 0 auto 2rem;
}

/* ============================================================
   GRUPOS POR HOSPITAL
   ============================================================ */

/* buildGroup() en main.js crea cada grupo como un <section> real —
   sin este reset, hereda el padding/max-width genérico de la regla
   `section {}` de más arriba (pensada para las secciones grandes de
   la página, no para estos sub-bloques), lo que sumaba ~128px de
   relleno vacío arriba/abajo de cada grupo. */
.hospital-group {
  margin: 0 0 3rem;
  padding: 0;
  max-width: none;
  scroll-margin-top: 0;
}

.hospital-group__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.hospital-group__line {
  height: 1px;
  flex: 1 1 auto;
  background: var(--color-border);
}

.hospital-group__pill {
  flex: 0 0 auto;
  padding: 0.375rem 0.75rem;
  background: rgba(0, 82, 156, 0.08);
  color: var(--color-accent);
  border: 1px solid rgba(0, 82, 156, 0.2);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   GRADUADOS GRID — grid responsivo real (no flex-wrap): 2 columnas
   en mobile, 3 / 4 / 6 según ancho, igual que el Figma. Un grupo
   chico (ej. Guasmo con 1 persona) queda pegado a la izquierda de
   su fila, igual que en el Figma — no se centra a propósito.
   ============================================================ */
.graduados__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) { .graduados__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .graduados__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .graduados__grid { grid-template-columns: repeat(6, 1fr); } }

.graduados__more { grid-column: 1 / -1; margin-top: 0.5rem; text-align: center; }

.graduados__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 82, 156, 0.3);
  background: none;
  color: var(--color-accent);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.graduados__more-btn:hover,
.graduados__more-btn:focus-visible {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 12px 24px rgba(0, 82, 156, 0.2);
}

.graduados__more-count { opacity: 0.7; font-weight: 400; }

.grad-card {
  position: relative;
  padding: 1rem;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition), background var(--transition);
}

.grad-card:hover,
.grad-card:focus-within {
  background: var(--color-surface-solid);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
  transform: translateY(-3px);
  border-color: var(--color-accent);
}

.grad-card__link { display: block; }

.grad-card__photo-frame {
  position: relative;
  width: 64px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.grad-card__photo-circle {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.grad-card__avatar {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.grad-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  transition: transform var(--transition);
}

.grad-card__link:hover .grad-card__photo,
.grad-card__link:focus-visible .grad-card__photo {
  transform: scale(1.06);
}

.grad-card__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.7rem 0.85rem;
}

.grad-card__name {
  margin: 0;
  font-size: 0.85rem;
  text-align: center;
  color: var(--color-text);
  font-weight: 500;
}

.grad-card__profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  border: 1px solid rgba(0, 82, 156, 0.35);
  color: var(--color-accent-dark);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
}

.grad-card__profile-btn:hover,
.grad-card__profile-btn:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: translateY(-1px);
}

/* ============================================================
   PROFILE MODAL — ficha completa al hacer clic en "Ver fotos":
   foto grande a la izquierda, info + galería de 8 fotos + botón de
   descarga a la derecha. El botón de descarga abre graduado.html
   (el candado real de cédula sigue viviendo ahí, sin duplicar esa
   lógica acá). Estructura tomada 1:1 del Figma Make del usuario.
   ============================================================ */

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.profile-modal[hidden] { display: none; }

.profile-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 38, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.profile-modal__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 860px;
  max-height: 92dvh;
  background: var(--color-surface-solid);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(10, 22, 38, 0.35);
}

@media (min-width: 768px) {
  .profile-modal__card { flex-direction: row; }
}

.profile-modal__photo-wrap {
  position: relative;
  flex-shrink: 0;
  min-height: 16rem;
  background: var(--color-surface);
}

@media (min-width: 768px) {
  .profile-modal__photo-wrap { width: 22rem; min-height: 0; }
}

/* Detrás de la foto grande — si la foto real Y el fallback de
   DiceBear fallan los dos (sin internet, servicio caído), el <img>
   se esconde y esto queda visible en vez de dejar un hueco en
   blanco. */
.profile-modal__photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 600;
}

.profile-modal__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-modal__photo-caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  background: linear-gradient(to top, rgba(10, 22, 38, 0.7), transparent 130%);
  padding-top: 2rem;
}

@media (min-width: 768px) {
  .profile-modal__photo-caption { display: none; }
}

.profile-modal__photo-name {
  color: #fff;
  font-size: 1.2rem;
  margin: 0;
}

.profile-modal__photo-sede {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  margin: 0.15rem 0 0;
}

.profile-modal__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
}

.profile-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.profile-modal__name {
  font-size: 1.3rem;
  margin: 0;
  color: var(--color-text);
  line-height: 1.2;
}

.profile-modal__badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.profile-modal__specialty {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border: 1px solid rgba(0, 82, 156, 0.2);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
}

.profile-modal__sede {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.profile-modal__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.profile-modal__close:hover,
.profile-modal__close:focus-visible {
  color: var(--color-text);
  background: var(--color-accent-soft);
}

.profile-modal__gallery-wrap { padding: 1.25rem; flex: 1 1 auto; }

.profile-modal__gallery-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
}

.profile-modal__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.profile-modal__gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface);
  cursor: pointer;
}

.profile-modal__gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Las fotos originales son retrato (2:3) recortadas a cuadrado: con
     "center" (default) el recorte corta arriba, y en fotos de estudio
     eso corta cabeza/rostro. "top" prioriza la parte de arriba de la
     foto para que la cara siempre quede completa. */
  object-position: center top;
  transition: transform 500ms ease;
}

.profile-modal__gallery-item:hover img,
.profile-modal__gallery-item:focus-visible img {
  transform: scale(1.1);
}

.profile-modal__footer {
  padding: 0 1.25rem 1.25rem;
  flex-shrink: 0;
}

.profile-modal__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-border);
  margin-bottom: 1rem;
}

.profile-modal__info-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6rem;
  color: var(--color-text-muted);
  margin: 0;
}

.profile-modal__info-value {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0.15rem 0 0;
}

.profile-modal__download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 44px;
  padding: 0 0.9rem;
  border-radius: 16px;
  border: none;
  background: var(--color-accent);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.profile-modal__download:hover,
.profile-modal__download:focus-visible {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 82, 156, 0.25);
}

.profile-modal__download[hidden] { display: none; }

/* ============================================================
   DOWNLOAD TOOLBAR — el botón "Descargar fotos" se transforma en
   un mini formulario de cédula (adaptado del ToolbarDynamic de
   motion-primitives: mismo botón "atrás", misma idea de expandirse
   en el lugar en vez de saltar a otra pantalla). Valida contra el
   mismo backend real que graduado.html (api/descargar.php) — no es
   una segunda copia de esa lógica, es el mismo candado de cédula.
   ============================================================ */

/* El botón "Descargar fotos" y el formulario de cédula ocupan la
   MISMA celda de grid (position:relative + grid-area 1/1 en los
   dos) — así el contenedor siempre mide lo que mide el más alto de
   los dos (el formulario, por el mensaje de abajo), y cambiar entre
   uno y otro nunca cambia el tamaño del cuadro completo, ni siquiera
   la primera vez que se abre. Se cruzan con opacity, no con
   hidden/display, para que el espacio quede siempre reservado. */
.download-toolbar {
  display: grid;
}

.download-toolbar > .profile-modal__download,
.download-toolbar > .download-toolbar__panel {
  grid-area: 1 / 1;
}

.profile-modal__download {
  transition: opacity 200ms ease, background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.profile-modal__download.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.download-toolbar__panel {
  align-self: start;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.download-toolbar__panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.download-toolbar__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.download-toolbar__panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

.download-toolbar__back {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-solid);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.download-toolbar__back:hover,
.download-toolbar__back:focus-visible {
  color: var(--color-text);
  border-color: var(--color-accent);
}

.download-toolbar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-solid);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.88rem;
}

.download-toolbar__input::placeholder { color: var(--color-text-muted); }

.download-toolbar__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.download-toolbar__submit {
  flex-shrink: 0;
  height: 44px;
  padding: 0 1.1rem;
  border-radius: 14px;
  border: none;
  background: var(--color-accent);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition);
}

.download-toolbar__submit:hover,
.download-toolbar__submit:focus-visible { background: var(--color-accent-dark); }

.download-toolbar__submit:disabled { opacity: 0.6; cursor: default; }

.download-toolbar__msg {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text-muted);
  height: 1.6em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.download-toolbar__msg[data-state="ok"] { color: #1a8f5a; }
.download-toolbar__msg[data-state="err"] { color: #d64545; }

/* ============================================================
   AGRADECIMIENTOS — franja de cierre con fondo tenue, 3 tarjetas
   (Docentes / Familias / UCSG) y una cita final. Tomado del Figma
   Make (sección restaurada; antes era el bloque único "dedicatoria").
   ============================================================ */

/* El fondo va de punta a punta de la pantalla (igual que el Figma:
   la <section> no tiene max-width propio, solo un color) — el
   contenido (eyebrow, título, tarjetas, cita) se centra aparte en
   .agradecimientos__inner. Antes heredaba el max-width genérico de
   `section` y quedaba como un cuadro redondeado flotando en la
   página, que no es como se ve en el Figma. */
.agradecimientos {
  max-width: none;
  margin: 0;
  padding: 6rem 0;
  background: var(--color-surface-solid);
}

.agradecimientos__inner {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section__eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.section__eyebrow-row img { display: block; width: auto; height: 20px; }
.footer__brand-icon img { display: block; width: auto; height: 28px; }
.footer__brand-icon { background: transparent; }

/* Palabra en cursiva/color de acento dentro de un .section__title —
   "Nuestros Eventos", "Los Graduados", "Agradecimientos" completo. */
.title-accent {
  font-style: italic;
  color: var(--color-accent);
}

.agradecimientos__title { margin-bottom: 3rem; }

.agradecimientos__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.agradecimiento-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.agradecimiento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 82, 156, 0.3);
  box-shadow: 0 20px 40px rgba(10, 22, 38, 0.1);
}

.agradecimiento-card__icon { font-size: 2.2rem; margin-bottom: 1rem; }

.agradecimiento-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 0 0 0.75rem;
}

.agradecimiento-card__text {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0;
}

.agradecimientos__quote {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.agradecimientos__quote-divider {
  height: 1px;
  margin: 0 auto 2.2rem;
  background: linear-gradient(to right, transparent, var(--color-border), transparent);
}

.agradecimientos__quote-text {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  color: var(--color-text);
  opacity: 0.85;
  line-height: 1.6;
  margin: 0;
}

.agradecimientos__quote-attr {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 1rem 0 0;
}

/* ============================================================
   FOOTER
   ============================================================ */

/* El <footer> en sí ocupa TODO el ancho (el borde superior llega de
   punta a punta, como el nav) — el max-width que antes estaba acá
   mismo dejaba el borde y el contenido encerrados en una caja de
   1200px, con el fondo oscuro de ancho completo asomando a los
   costados. Ese centrado ahora vive solo en .footer__inner. */
.footer {
  width: 100%;
  padding: 0 1.75rem;
  border-top: 1px solid var(--color-border);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2.5rem 0;
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer__brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface-solid);
  color: var(--color-accent);
  flex-shrink: 0;
}

.footer__brand-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
}

.footer__brand-sub {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.footer__links {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
}

.footer__links a {
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.footer__links a:hover,
.footer__links a:focus-visible { color: var(--color-accent); }

.footer__tagline {
  text-align: right;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.footer__tagline p { margin: 0; }

.footer__domain {
  color: var(--color-accent) !important;
  margin-top: 0.15rem !important;
}

@media (max-width: 720px) {
  .footer__inner { justify-content: center; text-align: center; }
  .footer__tagline { text-align: center; }
}

.footer__credit {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.footer__credit-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__credit-brand strong { color: var(--color-text); }

.footer__credit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer__credit-icon img {
  display: block;
  width: auto;
  height: 20px;
}

.footer__credit-dot { opacity: 0.4; }

.footer__credit-ig {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color var(--transition);
}

.footer__credit-ig:hover,
.footer__credit-ig:focus-visible { color: var(--color-accent); }

.back-to-top {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(10, 22, 38, 0.1);
  background: rgba(232, 241, 251, 0.85);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  box-shadow: 0 10px 22px rgba(10, 22, 38, 0.14), inset 0 1px 0 rgba(10, 22, 38, 0.08);
  transition: opacity var(--transition), transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.back-to-top__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  transform: rotate(var(--icon-rotate, 0deg));
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

/* Si ya pasaste "Los graduados" de largo, la flecha apunta hacia
   arriba en vez de hacia abajo (mismo botón, mismo destino). */
.back-to-top.is-above {
  --icon-rotate: 180deg;
}

.back-to-top span {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 420ms cubic-bezier(0.16, 0.84, 0.44, 1), opacity 240ms ease, margin-left 420ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 18px 36px rgba(10, 22, 38, 0.2), inset 0 1px 0 rgba(10, 22, 38, 0.08);
}

.back-to-top:hover span,
.back-to-top:focus-visible span,
.back-to-top.is-intro span {
  max-width: 220px;
  margin-left: 0.6rem;
  opacity: 1;
}

.back-to-top:hover .back-to-top__icon,
.back-to-top:focus-visible .back-to-top__icon {
  background: var(--color-accent);
  color: #fff;
  transform: rotate(var(--icon-rotate, 0deg)) translateY(2px);
}

/* ============================================================
   REVEAL AL HACER SCROLL — aparecen desde abajo con opacidad
   suave cuando entran en pantalla (una sola vez).
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 700ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Tarjetas de graduados: mismo efecto visual que .reveal, pero en su
   propia clase porque este SÍ es bidireccional (aparece de a una al
   bajar, se oculta al subir, y vuelve a aparecer si volvés a bajar) —
   a diferencia de .reveal, que solo aparece una vez. El delay lo pone
   setupGradReveal() en JS, por tarjeta, para que no aparezcan todas
   juntas en la misma fila. */
.grad-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 500ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

.grad-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Texto del hero: mismo mecanismo bidireccional que .grad-reveal
   (setupBidirectionalReveal), pero con el movimiento más grande de la
   entrada original del hero. */
.hero-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 700ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

.hero-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   MORPH DIALOG — modal que "crece" desde la foto clickeada hasta una
   tarjeta grande (foto arriba, nombre abajo), inspirado en el
   MorphingDialog de motion-primitives/React Bits pero portado a JS/CSS
   plano vía FLIP (ver openMorphDialog en main.js). Usado por el collage
   de graduados y por las tarjetas de "Los graduados".
   ============================================================ */
.morph-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 38, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 260ms ease;
  z-index: 400;
}

.morph-backdrop.is-open {
  opacity: 1;
}

.morph-dialog {
  position: fixed;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-surface-solid);
  box-shadow: 0 0 0 rgba(10, 22, 38, 0);
  z-index: 401;
  /* Salvavidas para fotos con proporción real (aspect-ratio 'auto',
     ej. una foto de graduado en vertical): sin esto, en una ventana baja
     el diálogo puede terminar más alto que la pantalla. */
  max-height: 88vh;
}

.morph-dialog.is-open {
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(10, 22, 38, 0.4);
}

.morph-dialog__img {
  display: block;
  width: 100%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--color-accent-soft);
}

.morph-dialog__footer {
  padding: 1.1rem 1.4rem 1.3rem;
  text-align: center;
  opacity: 0;
  transition: opacity 200ms ease;
}

.morph-dialog__footer.is-visible {
  opacity: 1;
}

.morph-dialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--color-text);
}

.morph-dialog__subtitle {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.morph-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(10, 22, 38, 0.45);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease, background 160ms ease;
}

.morph-dialog__close.is-visible {
  opacity: 1;
}

.morph-dialog__close:hover,
.morph-dialog__close:focus-visible {
  background: var(--color-accent);
}

/* ============================================================
   EVENT PHOTOS OVERLAY — "Ver fotos" ya no navega a evento.html en
   pestaña nueva: abre esto encima de la misma página (como el
   Figma Make, que también lo hace todo en una sola página). El
   markup/comportamiento es el mismo que evento.html (barra +
   mosaico + "cargar más" + GLightbox), pero corriendo dentro de
   index.html — evento.html se deja intacta como respaldo con link
   directo (por si alguien la comparte o entra sin JS).

   Prefijo "event-photos" (no "event-gallery") a propósito: ese otro
   nombre ya lo usa el fondo animado desactivado más arriba en este
   archivo (.event-gallery__item, .event-gallery__placeholder) —
   compartir clase pisaba el tamaño de las fotos acá (todas salían
   con el mismo aspect-ratio fijo del código viejo).
   ============================================================ */

.event-photos-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--color-bg);
  overflow-y: auto;
}

.event-photos-overlay[hidden] { display: none; }

.event-photos__topbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  min-height: 4rem;
  padding: 0.6rem 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.event-photos__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  border: none;
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease;
}

.event-photos__back:hover,
.event-photos__back:focus-visible { background: var(--color-accent-soft); }

.event-photos__divider {
  width: 1px;
  height: 1.25rem;
  background: var(--color-border);
  flex-shrink: 0;
}

.event-photos__info { min-width: 0; }

.event-photos__select-bar[hidden] { display: none; }

.event-photos__select-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: 1.25rem;
}

.event-photos__select-toggle[hidden],
.event-photos__select-actions[hidden] { display: none; }

.event-photos__select-toggle,
.event-photos__select-download,
.event-photos__select-cancel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-accent-dark);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), opacity var(--transition);
}

.event-photos__select-toggle:hover,
.event-photos__select-toggle:focus-visible,
.event-photos__select-cancel:hover,
.event-photos__select-cancel:focus-visible {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

.event-photos__select-download {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
}

.event-photos__select-download:not(:disabled):hover,
.event-photos__select-download:not(:disabled):focus-visible {
  opacity: 0.88;
}

.event-photos__select-download:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.event-photos__select-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.event-photos__select-count {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Modo selección: cada foto muestra su check circular; clickear ya no
   abre el lightbox (interceptado en JS con stopImmediatePropagation
   antes de que el listener de GLightbox llegue a correr). */
.event-photos__grid.is-selecting .event-photos__item { cursor: pointer; }

.event-photos__select-check {
  position: absolute;
  z-index: 3;
  left: 0.55rem;
  top: 0.55rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(10, 22, 38, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
}

.event-photos__grid.is-selecting .event-photos__select-check { display: flex; }

.event-photos__item.is-selected .event-photos__select-check {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.event-photos__select-check svg { width: 13px; height: 13px; opacity: 0; transition: opacity 150ms ease; }
.event-photos__item.is-selected .event-photos__select-check svg { opacity: 1; }

.event-photos__grid.is-selecting .event-photos__item.is-selected {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

/* Mientras se arma el ZIP, ocultar el botón de descarga individual de
   cada foto para no invitar a otro click a mitad del proceso. */
.event-photos__grid.is-selecting .event-photos__download { display: none; }

.event-photos__zip-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--color-accent-dark);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.event-photos__zip-toast[hidden] { display: none; }

.event-photos__zip-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: event-photos-spin 700ms linear infinite;
}

@keyframes event-photos-spin { to { transform: rotate(360deg); } }

/* Barra flotante DENTRO del visor a pantalla completa (GLightbox) — igual
   que el botón de descarga/check del mosaico, pero para cuando ya estás
   mirando la foto en grande y no querés cerrarla para bajarla o
   marcarla. z-index bien alto: tiene que ganarle al contenedor propio de
   GLightbox, que ya usa uno muy alto. */
.lightbox-toolbar {
  position: fixed;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 999999;
  display: flex;
  gap: 0.5rem;
}

.lightbox-toolbar__btn {
  height: 40px;
  padding: 0 0.95rem;
  border-radius: 999px;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(10, 22, 38, 0.55);
  color: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 200ms ease, color 200ms ease;
}

.lightbox-toolbar__btn:hover,
.lightbox-toolbar__btn:focus-visible {
  background: rgba(10, 22, 38, 0.8);
}

.lightbox-toolbar__btn svg { width: 17px; height: 17px; }

.lightbox-toolbar__select.is-active {
  background: var(--color-accent-dark);
  color: #fff;
}

.event-photos__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-photos__count {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0.1rem 0 0;
}

.event-photos__body {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.event-photos__grid {
  columns: 2;
  column-gap: 0.75rem;
}

@media (min-width: 560px)  { .event-photos__grid { columns: 3; } }
@media (min-width: 900px)  { .event-photos__grid { columns: 4; } }
@media (min-width: 1200px) { .event-photos__grid { columns: 5; } }

.event-photos__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  break-inside: avoid;
  margin-bottom: 0.75rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-accent-soft);
  cursor: zoom-in;
}

.event-photos__placeholder {
  width: 32%;
  padding: 40% 0;
  color: var(--color-accent-dark);
  opacity: 0.5;
}

.event-photos__placeholder svg { width: 100%; height: 100%; display: block; }

.event-photos__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 400ms ease;
}

.event-photos__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 38, 0);
  transition: background 300ms ease;
  pointer-events: none;
}

.event-photos__item:hover::after,
.event-photos__item:focus-visible::after { background: rgba(10, 22, 38, 0.18); }

.event-photos__item:hover img,
.event-photos__item:focus-visible img { transform: scale(1.05); }

.event-photos__download {
  position: absolute;
  z-index: 2;
  right: 0.55rem;
  bottom: 0.55rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 22, 38, 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease, background 200ms ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.event-photos__item:hover .event-photos__download,
.event-photos__item:focus-within .event-photos__download {
  opacity: 1;
  transform: translateY(0);
}

.event-photos__download:hover,
.event-photos__download:focus-visible {
  background: var(--color-accent-dark);
}

.event-photos__download svg { width: 15px; height: 15px; }

@media (hover: none) {
  /* sin hover real (touch): visible siempre, si no nadie la encuentra */
  .event-photos__download { opacity: 1; transform: none; }
}

.event-photos__more {
  text-align: center;
  padding: 3rem 0;
}

.event-photos__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 82, 156, 0.3);
  background: none;
  color: var(--color-accent);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.event-photos__more-btn:hover,
.event-photos__more-btn:focus-visible {
  background: var(--color-accent);
  color: #fff;
}

.event-photos__more-count { opacity: 0.65; font-weight: 400; }

.event-photos__end {
  text-align: center;
  padding: 3rem 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
  .reveal, .grad-reveal, .hero-reveal { opacity: 1; transform: none; }
}