/* Página «El Equipo»: cifras, pestañas, tarjeta destacada y cuadrículas. Mismo estilo oscuro del sitio (#0f0f0f / #161616 / #262626, acento #4ade80 / #2e7d32). */

.team-card[hidden] { display: none !important; }

/* ---------- Cifras ---------- */
.eq-cifras { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 26px; padding: 0; list-style: none; }
.eq-cifra { display: flex; align-items: baseline; gap: 10px; padding: 12px 20px; border: 1px solid #262626; border-radius: 14px; background: #161616; }
.eq-cifra__n { font-size: 2rem; font-weight: 800; line-height: 1; color: #4ade80; font-variant-numeric: tabular-nums; }
.eq-cifra__t { font-size: 13px; color: #9ca3af; }

/* ---------- Barra de anclas (pegajosa bajo la navbar) ---------- */
html { scroll-padding-top: 140px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.eq-anclas { position: sticky; top: 81px; z-index: 900; display: flex; gap: 4px; margin: 0 0 18px; padding: 6px; border: 1px solid #262626; border-radius: 12px; background: rgba(15, 15, 15, 0.92); backdrop-filter: blur(6px); overflow-x: auto; scrollbar-width: none; }
.eq-ancla { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px; color: #94a3b8; font-size: 14px; font-weight: 600; text-decoration: none; transition: color 0.2s, background-color 0.2s; }
.eq-ancla + .eq-ancla::before { content: "·"; position: absolute; left: -4px; color: #3f3f46; }
.eq-ancla:hover { color: #e5e7eb; background: #1a1a1a; }
.eq-ancla[aria-current="true"] { color: #4ade80; background: rgba(74, 222, 128, 0.08); }
.eq-ancla.is-apagada { opacity: 0.4; }
.eq-ancla:focus-visible { outline: 3px solid #4ade80; outline-offset: -3px; }

.eq-seccion { scroll-margin-top: 140px; outline: none; }
.eq-seccion[hidden] { display: none; }
.eq-sinonimo { display: block; height: 0; scroll-margin-top: 140px; }
.eq-vacio { grid-column: 1 / -1; padding: 30px; text-align: center; color: #718096; background: #161616; border: 1px dashed #262626; border-radius: 12px; font-size: 14px; }
.eq-vacio p { margin: 0; }
.team-sin-resultados { margin: 0 0 16px; }

/* ---------- Franja de sección (Egresados / Anteriores): de borde a borde de la pantalla ---------- */
/* Corta cualquier desborde horizontal (100vw incluye la barra de desplazamiento); «clip» no rompe el sticky de la barra de anclas */
body { overflow-x: clip; }
/* Contenedor de cada franja. Con el efecto activo (clase eq-js) es más alto: la franja queda anclada (sticky) durante ese tramo,
   sin interceptar nunca la rueda ni el gesto táctil. Sin efecto (movimiento reducido o sin JS) mide lo mismo que la franja. */
.eq-pin { --eq-franja-h: clamp(220px, 32vh, 300px); --eq-tramo: 70vh; margin: 56px 0 30px; }
.eq-js .eq-pin { height: calc(var(--eq-franja-h) + var(--eq-tramo)); }
.eq-franja { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100vw; max-width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 0 20px;
    height: var(--eq-franja-h);   /* altura reservada: no hay saltos de diseño al arrancar el efecto */
    text-align: center; border: 0; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; border-radius: 0;
    background: radial-gradient(900px 260px at 50% 0%, rgba(255, 196, 40, 0.06), #0b0b0b 70%); overflow: hidden; }
.eq-js .eq-franja { position: sticky; top: var(--eq-top, 139px); z-index: 2; }   /* queda justo bajo la barra de anclas */
.eq-franja__titulo { position: relative; z-index: 1; margin: 0; font-size: clamp(2.1rem, 6.5vw, 3.9rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; color: #fff; overflow-wrap: anywhere; }
@media (max-width: 640px) { .eq-pin { --eq-franja-h: clamp(160px, 24vh, 180px); --eq-tramo: 45vh; margin-top: 40px; } .eq-franja { padding: 0 16px; } .eq-franja__titulo { font-size: clamp(1.85rem, 9.5vw, 2.6rem); } }

/* El canvas lo crea el JS encima de la franja (decorativo, no recibe clics). Con el efecto activo, el título HTML aparece
   al formarse las partículas (--eq-t de 0 a 1); sin JS o con movimiento reducido el título se ve siempre. */
/* Mide exactamente lo mismo que la franja (inset: 0; el JS lo dimensiona con su clientWidth/clientHeight) y se desvanece hacia los bordes
   superior e inferior: así nunca se ven partículas cortadas por el borde. */
.eq-franja__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%); }
.eq-franja.is-live .eq-franja__titulo { opacity: var(--eq-t, 0); }

/* Toda la tarjeta es clicable: el enlace «Ver perfil» se estira sobre ella (sin JavaScript) */
.team-card { position: relative; }
.team-card:not(.team-card--destacada) .btn-ver-mas::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }

/* ---------- Tarjeta destacada (primer miembro del laboratorio) ---------- */
.eq-destacada { margin-bottom: 22px; }
.team-card--destacada { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; padding: 26px; text-align: left; cursor: default; justify-content: initial; }
.team-card--destacada:hover { transform: none; }
.team-destacada__foto { width: 220px; height: 220px; border-radius: 18px; object-fit: cover; border: 2px solid #2e7d32; background: #000; }
.team-destacada__foto--vacia { display: flex; align-items: center; justify-content: center; font-size: 64px; color: #2e7d32; }
.team-destacada__nombre { margin: 0 0 4px; font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: #fff; }
.team-destacada__rol { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: #4ade80; }
.team-destacada__bio { margin: 0 0 12px; max-width: 62ch; font-size: 15px; line-height: 1.7; color: #d1d5db; }
.team-destacada__proyecto { margin: 0 0 14px; font-size: 13px; color: #9ca3af; }
.team-destacada__acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.team-destacada__perfil { width: auto; margin: 0; min-height: 44px; padding: 0 18px; font-size: 13px; }
.team-enlace { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid #2f3a2f; border-radius: 8px; background: #121212; color: #e5e7eb; font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color 0.2s, background-color 0.2s; }
.team-enlace:hover { border-color: #2e7d32; background: #1a251b; }
.team-enlace:focus-visible, .btn-ver-mas:focus-visible, .team-card:focus-within { outline: 2px solid #4ade80; outline-offset: 3px; }
.team-card:focus-within { outline-offset: 2px; }

/* ---------- Tarjetas de egresados: la tesis puede ocupar varias líneas ---------- */
.team-card--graduate .team-project { white-space: normal; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.team-card--former .team-project { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }

/* ---------- Celular ---------- */
@media (max-width: 720px) {
    .team-card--destacada { grid-template-columns: 1fr; gap: 18px; padding: 20px; text-align: center; justify-items: center; }
    .team-destacada__foto { width: 160px; height: 160px; }
    .team-destacada__acciones { justify-content: center; }
    .team-destacada__nombre { font-size: 1.35rem; }
    .eq-cifra { flex: 1 1 140px; }
}

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
    .eq-seccion { animation: eqEntra 0.35s ease both; }
}
@keyframes eqEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .team-card, .eq-ancla, .team-enlace, .eq-franja__titulo { transition: none; }
    .team-card:hover { transform: none; }
}