/* astronauts.namespaced.css — Moonvival Crew Roster (reemplazo completo) */
:root{
  --bg:#070a10;
  --panel:#0d1420;
  --card:#0e1724;
  --ink:#e8f1ff;
  --muted:#99a8be;
  --accent:#58d6ff;
  --accent-2:#9ef8ff;
  --warning:#ffd166;
  --ok:#7cf5c6;
  --radius:18px;
  --shadow:0 12px 35px rgba(0,0,0,.45);
}

/* Wrapper */
.crew{padding:28px 18px 60px; position:relative; z-index:1}

/* Starfield en segundo plano */
.crew .stars,
.crew .stars::after{
  position:absolute; inset:0; pointer-events:none; z-index:-1; content:""; display:block;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.42) 0, transparent 50%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.38) 0, transparent 50%),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.28) 0, transparent 50%),
    radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,.25) 0, transparent 50%);
  animation: twinkle 6s linear infinite alternate; opacity:.6;
}
.crew .stars::after{filter:blur(1px); opacity:.35}
@keyframes twinkle{from{opacity:.45} to{opacity:.75}}

.crew .wrap{max-width:1200px; margin-inline:auto}

/* Header */
.crew .topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--panel);
  border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:14px 18px; box-shadow:var(--shadow); color:var(--ink)
}
.crew .brand{display:flex; align-items:center; gap:12px}
.crew .logo{
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  background: conic-gradient(from 160deg, var(--accent), var(--accent-2));
  box-shadow:0 0 24px rgba(88,214,255,.45);
}
.crew .logo svg{width:20px; height:20px; fill:#001318}
.crew .brand h1{font-size:clamp(18px, 2.2vw, 24px); margin:0; letter-spacing:.5px}
.crew .brand small{display:block; color:var(--muted); font-size:.9rem; margin-top:2px}

.crew .filters{display:flex; gap:10px; flex-wrap:wrap}
.crew .chip{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--ink);
  padding:8px 12px; border-radius:999px; cursor:pointer; user-select:none; font-weight:600; font-size:.9rem
}
.crew .chip[aria-pressed="true"]{outline:2px solid var(--accent);}

/* === GRID 2×4 (fija/visible) === */
.crew *{ box-sizing: border-box; }
/* Centrar la rejilla de tarjetas */
.crew .grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px;

  /* 👇 estas 3 líneas la dejan perfectamente centrada */
  max-width:1200px;
  margin-inline:auto;   /* centra horizontalmente */
  justify-content:center; /* distribuye el espacio libre por igual */
}

/* Mantener centrado también en breakpoints */
@media (max-width:1100px){ .crew .grid{ grid-template-columns:repeat(3,1fr); max-width:100%; } }
@media (max-width:820px){  .crew .grid{ grid-template-columns:repeat(2,1fr); max-width:100%; } }
@media (max-width:520px){  .crew .grid{ grid-template-columns:1fr;              max-width:100%; } }

}

.crew .card{
  position:relative;
  width:100%;
  margin:0 !important;
  border-radius:var(--radius);
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--card);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  transform:none !important; /* sin “salto” al hover */
  transition: border-color .18s ease;
  color:var(--ink);
}

/* Antes: translateY(-4px). Ahora solo realzamos el borde. */
.crew .card:hover{ border-color: rgba(88,214,255,.35) }

.crew .media{aspect-ratio:16/10; background:#0b1320; overflow:hidden; min-height:160px}
.crew .media img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.03); filter:contrast(1.05) saturate(1.05)}

.crew .body{padding:14px 14px 16px}
.crew .name{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px}
.crew .name b{font-size:1.05rem; letter-spacing:.2px}
.crew .role{
  display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--muted);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  padding:4px 8px; border-radius:999px
}

.crew .badges{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 8px}
.crew .badge{
  font-size:.75rem; letter-spacing:.3px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  padding:4px 8px; border-radius:999px
}
.crew .ok{border-color: rgba(124,245,198,.5)}
.crew .warn{border-color: rgba(255,209,102,.5)}

.crew .stats{display:flex; gap:10px; margin-top:6px}
.crew .stat{flex:1; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px 10px}
.crew .stat b {
  font-size: 0.85rem;   /* un poco más pequeño */
  font-style: italic;   /* en cursiva */
}
.crew .stat small{display:block; color:var(--muted)}

.crew .actions{display:flex; gap:10px; margin-top:12px}
.crew .btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px;
  border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(88,214,255,.16); color:var(--ink);
  text-decoration:none; font-weight:800; letter-spacing:.2px; cursor:pointer; position:relative; z-index:0;
}
.crew .btn:hover{border-color: rgba(88,214,255,.45); background: rgba(88,214,255,.24)}
.crew .btn.alt{background:transparent}

/* Focus accesible */
.crew .card:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.crew .btn:focus{outline:2px solid var(--accent); outline-offset:2px}

/* Modal del crew (dialog) */
.crew dialog.modal{
  position:fixed; inset:0; margin:auto; border:0; padding:0; background:transparent;
  z-index:10000; /* por encima del header/slider */
}
.crew dialog.modal::backdrop{ background: rgba(0,0,0,.6) }
.crew .sheet{
  width:min(860px, 92vw);
  background:#0b1522; color:#fff; border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.5); overflow:hidden
}
.crew .sheet header,
.crew .sheet footer{ padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08) }
.crew .sheet footer{ border-top:1px solid rgba(255,255,255,.08); border-bottom:0 }
.crew .content{ padding:0 }
.crew #modalFrameCrew{ display:block; width:100%; height:460px; border:0; background:#000 }

/* Responsive */
@media (max-width:1100px){ .crew .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){
  .crew .grid{grid-template-columns:repeat(2,1fr)}
  .crew #modalFrameCrew{height:380px}
}
@media (max-width:520px){
  .crew .grid{grid-template-columns:1fr}
  .crew #modalFrameCrew{height:320px}
}

/* ———— OVERRIDES CLAVE PARA MOSTRAR LA INFO ———— */
.crew .card .body{
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px !important;

  /* anula efectos del tema */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* badges y stats visibles y maquetados */
.crew .card .badges,
.crew .card .stats{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.crew .card .stat{
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.1;
}

/* evita que el tema tape el contenido con máscaras o recortes */
.crew .card *,
.crew .card{
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}
/* ==== FIX: que las imágenes no se salgan del recuadro ==== */

/* La tarjeta no debe permitir que nada se desborde */
.crew .card{
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* <- recorta cualquier desborde */
}

/* Marco de la imagen: ocupa todo el ancho y mantiene proporción */
.crew .card .media{
  width: 100%;
  aspect-ratio: 16 / 9;          /* alto automático según el ancho */
  overflow: hidden;              /* recorta la imagen dentro */
  border-radius: 14px;           /* mismo redondeo que la tarjeta */
}

/* La imagen se adapta al marco sin deformarse ni salirse */
.crew .card .media img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* rellena el marco recortando */
  display: block;
  transform: none !important;    /* cancela cualquier zoom/animación previa */
}

/* Opcional: si tu CSS tenía hover con zoom, lo neutralizamos */
.crew .card:hover .media img{
  transform: none !important;
}
.crew .sheet footer{
  display: none !important;
}