/* ============================================================
   MEMORIA — hoja de estilos propia de memoria.html
   ============================================================
   Va aparte de styles.css a propósito. La landing es clara (--paper) y
   esta página es de noche: si el cielo entrara en la hoja principal,
   cualquier retoque futuro del sitio tendría que esquivarla.
   memoria.html carga las dos: styles.css aporta topbar, brand y footer
   (que son los mismos de siempre) y este archivo el resto.

   Regla de diseño de la página: lo único amarillo son las estrellas.
   Todo lo demás -textos, líneas, fondos- se corre a azules apagados
   para que cada nombre encendido pese.

   Las animaciones NO están acá: las maneja GSAP en memoria.js. Este
   archivo define siempre el estado final, así que si el CDN de GSAP no
   carga la página se ve entera igual, solo que quieta.
   ============================================================ */

.memorial{background:#080b14;color:#eceaf0}
.memorial ::selection{background:var(--yellow);color:#0a0d16}

/* Anillo de foco visible: la grilla se recorre entera con Tab y el
   usuario tiene que saber siempre en qué estrella está parado. */
.memorial :focus-visible{outline:2px solid var(--yellow);outline-offset:4px}

/* --- CIELO DE FONDO ---------------------------------------- */
/* Tres capas de puntos hechas con radial-gradient repetido: sale más
   barato que 300 nodos en el DOM. GSAP le da una deriva mínima con el
   mouse y con el scroll, que es lo que lo termina de volver cielo. */
.sky-bg{position:fixed;inset:-60px;z-index:0;pointer-events:none;
  background:
    radial-gradient(1.4px 1.4px at 18% 22%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.2px 1.2px at 63% 12%,rgba(255,255,255,.42),transparent),
    radial-gradient(1.6px 1.6px at 82% 34%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.1px 1.1px at 34% 61%,rgba(255,255,255,.38),transparent),
    radial-gradient(1.5px 1.5px at 71% 74%,rgba(255,255,255,.45),transparent),
    radial-gradient(1.2px 1.2px at 9% 84%,rgba(255,255,255,.35),transparent),
    radial-gradient(1.3px 1.3px at 47% 39%,rgba(255,212,0,.35),transparent),
    radial-gradient(1.1px 1.1px at 91% 58%,rgba(255,255,255,.4),transparent),
    #080b14;
  background-size:420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,100% 100%}
/* Los dos halos azules van en una capa aparte para poder moverlos con el
   scroll sin arrastrar el campo de estrellas. */
.sky-glow{position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 78% 4%,rgba(30,42,73,.6),transparent 70%),
    radial-gradient(700px 520px at 8% 96%,rgba(20,29,51,.65),transparent 70%)}
.memorial main,.memorial footer,.memorial .topbar{position:relative;z-index:1}

.memorial .topbar{border-bottom-color:rgba(255,255,255,.12)}
.memorial nav a.here{opacity:1;color:var(--yellow)}

/* --- PORTADA ------------------------------------------------ */
.sky-hero{position:relative;min-height:640px;padding:194px 8vw 90px;text-align:center;overflow:hidden}
.sky-hero .eyebrow{justify-content:center;color:rgba(255,255,255,.7)}
.sky-hero h1{font-size:clamp(56px,7.6vw,124px);line-height:.86;letter-spacing:-.07em;font-weight:900;
  text-transform:uppercase;margin:30px 0 26px}
.sky-hero h1 em{color:var(--yellow);font-style:normal;text-shadow:0 0 42px rgba(255,212,0,.45)}
/* El splitter de memoria.js parte el título en letras: cada una queda en
   un .ch dentro de un .word que no se corta a mitad de palabra. */
.sky-hero h1 .word{display:inline-block;white-space:nowrap}
.sky-hero h1 .ch{display:inline-block;will-change:transform,opacity}
.sky-lead{max-width:620px;margin:0 auto;font-size:18px;line-height:1.72;color:rgba(236,234,240,.72)}
.sky-lead b{color:#fff;font-weight:700}

/* Las estrellas fugaces de la portada las dispara GSAP cada tanto: el
   gesto tiene que sentirse como algo que pasa, no como un loop. */
.shooting{position:absolute;top:0;left:0;width:2px;height:130px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,212,0,.9),transparent)}

/* --- BUSCADOR Y CONTADOR ------------------------------------ */
.sky-tools{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  margin:52px auto 0;padding:0 8vw;max-width:1000px}
.sky-search{position:relative;flex:1;min-width:280px;max-width:420px}
.sky-search input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  color:#fff;font-family:inherit;font-size:14px;padding:15px 16px 15px 44px;border-radius:40px;transition:.25s}
.sky-search input::placeholder{color:rgba(236,234,240,.4)}
.sky-search input:focus{outline:none;border-color:var(--yellow);background:rgba(255,212,0,.06)}
.sky-search .star{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--yellow);font-size:15px}
/* La etiqueta del buscador: se lee en un lector de pantalla y no se ve.
   El placeholder solo no alcanza, desaparece apenas se escribe. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sky-count{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(236,234,240,.5)}
.sky-count b{color:var(--yellow);font-size:15px;letter-spacing:0}

/* --- LA GRILLA DE ESTRELLAS --------------------------------- */
.sky{padding:70px 6vw 40px;max-width:1500px;margin:0 auto}
.sky-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:18px 12px;list-style:none;padding:0;margin:0}

.star-cell{width:100%;background:none;border:0;padding:26px 8px 22px;color:inherit;font-family:inherit;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;border-radius:14px;
  transition:background .3s}
.star-cell:hover,.star-cell:focus-visible{background:rgba(255,255,255,.04)}

/* Dos capas para la estrella: el .glyph-wrap lo mueve el mouse (se
   corre hacia el cursor y se agranda) y el .glyph titila solo. Separadas,
   las dos animaciones de GSAP no se pelean por el mismo transform. */
.star-cell .glyph-wrap{display:block;line-height:1;will-change:transform}
.star-cell .glyph{display:block;font-size:30px;line-height:1;color:var(--yellow);
  text-shadow:0 0 14px rgba(255,212,0,.5);will-change:transform,opacity}
.star-cell .nombre{font-size:12px;font-weight:700;line-height:1.35;letter-spacing:.02em;text-align:center;
  color:rgba(236,234,240,.85);transition:color .25s}
.star-cell:hover .nombre,.star-cell:focus-visible .nombre{color:#fff}
.star-cell .anio{font-size:9px;letter-spacing:.2em;color:rgba(236,234,240,.38)}

/* Estrella apagada: la que el buscador descartó. No se saca del DOM
   -queda como hueco tenue- para que el cielo no se desarme al filtrar. */
.star-cell.off{pointer-events:none}

.sky-empty{display:none;text-align:center;padding:60px 20px;color:rgba(236,234,240,.55);font-size:15px}
.sky-empty.on{display:block}

/* --- CIERRE ------------------------------------------------- */
.sky-note{max-width:760px;margin:20px auto 0;padding:44px 8vw 0;border-top:1px solid rgba(255,255,255,.1);
  text-align:center;font-size:13px;line-height:1.8;color:rgba(236,234,240,.45)}
.sky-cta{text-align:center;padding:90px 8vw 110px}
.sky-cta blockquote{margin:0 auto 34px;max-width:720px;font-family:Georgia,serif;font-style:italic;
  font-size:clamp(24px,3vw,36px);line-height:1.35;color:#fff}
.sky-cta .attrib{display:block;margin-top:18px;font-family:Arial,Helvetica,sans-serif;font-style:normal;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(236,234,240,.42)}
.sky-cta .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   LA FICHA — lo que baja del cielo al tocar una estrella
   ============================================================
   El pedido era que la foto "bajara desde arriba". Son cuatro tiempos
   encadenados en una timeline de GSAP: la estrella clickeada se despega
   de la grilla y vuela al centro, cae un hilo de luz, la foto aterriza
   redonda al final del hilo y recién después entra el texto. En ese
   orden se lee como una estrella que desciende; todo junto, como una
   tarjeta cualquiera.
   ============================================================ */
.ficha{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:24px}
.ficha.open{display:flex}
.ficha-backdrop{position:absolute;inset:0;background:rgba(4,6,12,.9);backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px)}

.ficha-card{position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;overflow-x:hidden;
  text-align:center;background:linear-gradient(180deg,#131a2c 0%,#0c1120 100%);
  border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:0 40px 42px;
  box-shadow:0 40px 110px rgba(0,0,0,.7)}

/* 1. el hilo de luz */
.ficha-hilo{width:1px;height:70px;margin:0 auto;transform-origin:top center;
  background:linear-gradient(180deg,transparent,var(--yellow))}

/* 2. la foto, que aterriza al final del hilo */
.ficha-foto{position:relative;width:132px;height:132px;margin:-8px auto 0;border-radius:50%;
  border:2px solid var(--yellow);box-shadow:0 0 0 8px rgba(255,212,0,.08),0 0 46px rgba(255,212,0,.35)}
.ficha-foto .recorte{width:100%;height:100%;border-radius:50%;overflow:hidden}
.ficha-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Sin foto cargada, el círculo muestra las iniciales sobre un degradé
   propio de cada persona (memoria.js lo calcula con el nombre). Así
   ninguna ficha queda vacía, y el día que llegue la foto real solo se
   agrega el campo "foto" en el listado. */
.ficha-iniciales{width:100%;height:100%;display:grid;place-items:center;font-size:42px;font-weight:900;
  letter-spacing:.02em;color:rgba(255,255,255,.92)}
/* El fogonazo del aterrizaje: un aro que se expande y se apaga. */
.ficha-flash{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--yellow);opacity:0;pointer-events:none}
.ficha-estrellita{position:absolute;right:-4px;bottom:-4px;width:36px;height:36px;display:grid;place-items:center;
  border-radius:50%;background:var(--yellow);color:#0a0d16;font-size:18px;border:3px solid #0f1526}

/* 3. el texto */
.ficha h2{font-size:clamp(28px,4vw,40px);line-height:1.05;letter-spacing:-.035em;font-weight:900;
  text-transform:uppercase;margin:26px 0 12px;color:#fff}
.ficha-vida{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);margin:0}
.ficha-recuerdo{font-family:Georgia,serif;font-style:italic;font-size:18px;line-height:1.6;
  color:rgba(236,234,240,.82);margin:24px auto 28px;max-width:400px}

.ficha-datos{list-style:none;padding:0;margin:0;text-align:left;border-top:1px solid rgba(255,255,255,.11)}
.ficha-datos li{display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  border-bottom:1px solid rgba(255,255,255,.07);padding:14px 2px}
.ficha-datos b{flex:none;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(236,234,240,.45)}
.ficha-datos span{font-size:14px;line-height:1.5;text-align:right;color:#eceaf0}
.ficha-mapa{display:inline-flex;margin-top:22px;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--yellow);border-bottom:1px solid rgba(255,212,0,.45);padding-bottom:6px}

.ficha-cerrar{position:absolute;top:16px;right:18px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:17px;
  cursor:pointer;transition:.2s;z-index:3}
.ficha-cerrar:hover{background:var(--yellow);color:#0a0d16;border-color:var(--yellow)}

/* Recorrer el cielo sin volver a la grilla: la ficha de al lado está a
   un clic (o a una flecha del teclado). */
.ficha-nav{display:flex;justify-content:space-between;gap:14px;margin-top:26px;
  border-top:1px solid rgba(255,255,255,.11);padding-top:18px}
.ficha-nav button{background:none;border:0;color:rgba(236,234,240,.6);font-family:inherit;font-size:10px;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:6px 2px;transition:color .2s}
.ficha-nav button:hover{color:var(--yellow)}

/* La estrella que viaja de la grilla a la ficha. Vive suelta en el
   <body> mientras dura el vuelo y después se borra. */
.star-flyer{position:fixed;z-index:90;pointer-events:none;color:var(--yellow);line-height:1;
  text-shadow:0 0 24px rgba(255,212,0,.8)}

/* ============================================================
   LA CONSTELACIÓN
   ============================================================
   Las mismas estrellas de la cuadrícula, colocadas sobre los puntos que
   dibujan una estrella de cinco puntas: unas sobre el contorno y las
   otras en dos estrellas concéntricas adentro. No hay ninguna figura de
   fondo — la estrella grande son las personas.

   Acá solo está el aspecto. Las coordenadas las calcula memoria.js y las
   escribe como left/top en %, por eso el contenedor es cuadrado
   (aspect-ratio:1): así la figura escala sin deformarse.
   ============================================================ */
.constelacion{position:relative;padding:30px 6vw 0}
.constelacion-figura{position:relative;width:min(760px,84vw);aspect-ratio:1;margin:0 auto;will-change:transform}

/* Cada estrella se centra sobre su punto. Ojo: cuando GSAP está
   funcionando, este centrado lo rehace él con xPercent/yPercent, porque
   necesita el transform para animarlas. Los dos tienen que decir lo
   mismo o la figura se corre. */
.constelacion .star-cell{position:absolute;padding:0;gap:0;display:grid;place-items:center;
  transform:translate(-50%,-50%);
  /* --tam lo escribe memoria.js: es la distancia a la estrella vecina
     más cercana, así el área de clic nunca pisa la de al lado. El techo
     en px evita botones enormes en pantallas grandes. */
  width:min(var(--tam,4.6%),44px);height:min(var(--tam,4.6%),44px)}
.constelacion .star-cell:hover,.constelacion .star-cell:focus-visible{background:none;z-index:6}
.constelacion .glyph{font-size:22px;text-shadow:0 0 12px rgba(255,212,0,.55)}

/* El nombre aparece al pasar el mouse. En la figura no puede estar
   siempre visible: 70 etiquetas juntas se pisan y no se lee ninguna. Por
   eso abajo está la cuadrícula, que es donde los nombres se leen. */
.etiqueta{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:5px;
  white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.02em;color:#fff;
  background:rgba(8,11,20,.94);border:1px solid rgba(255,212,0,.35);padding:5px 10px;
  border-radius:20px;opacity:0;pointer-events:none;transition:opacity .22s}
.constelacion .star-cell:hover .etiqueta,
.constelacion .star-cell:focus-visible .etiqueta{opacity:1}

.constelacion-pie{max-width:540px;margin:30px auto 0;text-align:center;
  font-size:12px;line-height:1.75;color:rgba(236,234,240,.45)}

/* --- ENCABEZADO DE LA CUADRÍCULA ---------------------------- */
.sky-head{text-align:center;max-width:620px;margin:0 auto 46px}
.sky-head .kicker{color:var(--yellow)}
.sky-head p:last-child{margin:14px 0 0;font-size:14px;line-height:1.75;color:rgba(236,234,240,.5)}

/* --- RESPONSIVE --------------------------------------------- */
@media(max-width:1200px){.sky-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:900px){
  .sky-hero{min-height:auto;padding:137px 22px 70px}
  .sky-hero h1{font-size:clamp(46px,13vw,80px)}
  .sky-lead{font-size:16px}
  .sky-tools{padding:0 22px;margin-top:38px}
  /* La constelación se esconde: en un celular los puntos quedan a un
     dedo de distancia unos de otros y las etiquetas no entran. La
     cuadrícula sola es la vista honesta en esta pantalla. */
  .constelacion{display:none}
  .sky-head{margin-bottom:34px}
  .sky{padding:50px 16px 30px}
  .sky-grid{grid-template-columns:repeat(3,1fr);gap:10px 6px}
  .star-cell{padding:20px 4px 16px}
  .star-cell .glyph{font-size:26px}
  .sky-note{padding:34px 22px 0}
  .sky-cta{padding:70px 22px 90px}
  .ficha{padding:14px}
  .ficha-card{padding:0 24px 32px;max-height:92vh}
  .ficha-datos li{flex-direction:column;gap:6px}
  .ficha-datos span{text-align:left}
}
@media(max-width:420px){.sky-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   EL CIELO MIENTRAS SE COMPLETA
   ============================================================
   Son dos estados, y los dos los maneja memoria.js sobre el <body>:

   .en-espera     no hay ni un nombre cargado. El cielo va entero
                  anónimo y se apagan el buscador, el contador y la
                  cuadrícula: sin nombres no hay nada que buscar, nada
                  que contar y ninguna lista que leer. Queda la figura
                  y una aclaración. Esta clase viene puesta desde el
                  HTML para que el estado valga aunque no cargue el JS.

   .faltan-datos  hay estrellas cargadas y otras todavía no. La página
                  funciona entera -ficha, buscador, cuadrícula- y las
                  que faltan aparecen anónimas, ocupando su lugar. Se
                  mantiene el aviso, porque sigue habiendo información
                  que reunir.

   Los dos se apagan solos cuando el listado esté completo; no hay que
   borrar nada de acá.
   ============================================================ */

/* Los textos que cambian según el estado -la bajada de la portada y el
   pie de la constelación- están escritos los dos en el HTML. Se ve el
   que corresponde y nunca los dos juntos. */
.solo-espera{display:none}
.en-espera .solo-datos{display:none}
.en-espera p.solo-espera{display:block}

/* El aviso es leve a propósito: una aclaración al pie de la bajada, no
   un cartel. Lo que tiene que quedar primero es el cielo. */
.aviso-espera{display:none}
.en-espera .aviso-espera,
.faltan-datos .aviso-espera{display:block;max-width:520px;margin:32px auto 0;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:13px;line-height:1.85;color:rgba(236,234,240,.5)}

.en-espera .sky-tools,
.en-espera .sky{display:none}

/* La estrella anónima no se abre, así que no tiene que parecer un
   botón: se le deja el titileo y el imán del mouse -que son lo que
   mantiene vivo el cielo- pero no el cursor ni el fondo del hover. */
.star-cell.anon{cursor:default;justify-content:center}
.star-cell.anon:hover,
.constelacion .star-cell.anon:hover{background:none}

/* En la cuadrícula conviven celdas con nombre y celdas anónimas, más
   bajas. En una fila mezclada el glifo anónimo se centra contra los
   nombres de al lado (justify-content, arriba). Las filas que son todas
   anónimas quedan compactas a propósito: igualarlas a la altura de una
   celda con nombre estiraba la página con 60 filas de aire, y en el
   celular -dos columnas- la volvía interminable. */

@media(max-width:900px){
  /* Acá la constelación sí se muestra. Se escondía en el celular porque
     las etiquetas no entraban y los puntos quedaban a un dedo de
     distancia unos de otros; sin nombres y sin nada que tocar, esos dos
     motivos desaparecen: queda una figura, y como figura se lee bien.
     Es además lo único que hay para mirar en esta pantalla. */
  .en-espera .constelacion{display:block;padding:6px 18px 0}
  .en-espera .constelacion-figura{width:min(760px,90vw)}
  .en-espera .constelacion .glyph{font-size:15px;text-shadow:0 0 8px rgba(255,212,0,.5)}
  .en-espera .constelacion-pie{margin-top:22px}
  .en-espera .aviso-espera,
  .faltan-datos .aviso-espera{margin-top:26px;padding-top:20px;font-size:12.5px}
}