/* ============================================================
   STARSEED · VENTANA DE DETALLE (Detalle) + tarjetas con detalle
   Modal de cristal por encima de TODO (z-index 1500 > visor 1400).
   ============================================================ */

/* iconos oficiales de las apps (sin símbolo 3D superpuesto): un poco más presentes */
.glyph-img.appicon img{ width:92%; height:92%; object-fit:contain; }

/* ===== Pase de diseño v8.0 · balance y centrado de tarjetas ===== */
/* Las tarjetas con detalle se vuelven columnas flex para empujar la pista al fondo
   (cards de la misma fila quedan equilibradas y la pista alineada). */
.detailcard{ display:flex; flex-direction:column; }
.detailcard > .detail-cue{ margin-top:auto; padding-top:10px; }
/* glifo y título alineados a su centro vertical en las cabeceras de tarjeta */
.card .head{ align-items:center; }
/* cuadrículas: igual altura de tarjetas (estética balanceada) */
.grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-5{ align-items:stretch; }
/* tarjetas-herramienta/categoría: contenido centrado y glifo al centro */
.toolc{ text-align:center; align-items:center; }
.toolc .glyph, .toolc .glyph-img{ margin-left:auto; margin-right:auto; }
.toolc b, .toolc p{ width:100%; }

/* ---------- Tarjetas que abren detalle ---------- */
.detailcard{ cursor:pointer; position:relative; transition:transform .25s var(--ease-glide,ease), box-shadow .25s ease, border-color .25s ease; }
.detailcard:hover{ border-color:color-mix(in oklab, var(--areac,#9FE870) 55%, transparent); box-shadow:0 14px 38px rgba(0,0,0,.32), 0 0 0 1px color-mix(in oklab, var(--areac,#9FE870) 30%, transparent) inset; }
.detailcard:focus-visible{ outline:2px solid var(--areac,#9FE870); outline-offset:3px; }
.detail-cue{ display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-family:var(--mono,monospace); font-size:10.5px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--areac,#9FE870); opacity:.78; transition:opacity .25s ease, transform .25s ease; }
.detail-cue svg{ width:14px; height:14px; }
.detailcard:hover .detail-cue{ opacity:1; transform:translateX(2px); }

/* imagen de ejemplo en la cabecera de la tarjeta-nodo / fase */
.nodecard{ display:flex; flex-direction:column; overflow:hidden; padding-top:0 !important; }
.nodecard-img{ display:block; position:relative; margin:-1px -1px 12px; height:138px; overflow:hidden;
  border-radius:var(--r-card,16px) var(--r-card,16px) 0 0; }
.nodecard-img img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02);
  transition:transform .6s var(--ease-glide,ease); filter:saturate(1.05); }
.detailcard:hover .nodecard-img img{ transform:scale(1.09); }
.nodecard-img::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, color-mix(in oklab, var(--bg-1,#0d130e) 80%, transparent), transparent 58%); }

/* tarjeta de fase (timeline) */
.phase{ display:flex; flex-direction:column; overflow:hidden; padding-top:0 !important; }
.phase .nodecard-img{ height:128px; }
.phase-grid > .phase{ position:relative; }

/* cuadrícula de 5 (anatomía) */
.grid.cols-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:1000px){ .grid.cols-5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid.cols-5{ grid-template-columns:1fr; } }
.organ-grid .toolc{ text-align:center; align-items:center; }
.organ-grid .glyph{ margin:0 auto 6px; }

/* botón "Saber más / Detalle" */
.detail-open{ cursor:pointer; }
.detail-open svg{ width:15px; height:15px; vertical-align:-2px; }

/* ---------- Overlay ---------- */
.dtl-overlay{ position:fixed; inset:0; z-index:1500; display:flex; align-items:center; justify-content:center; padding:clamp(10px,3vw,34px); }
.dtl-overlay[hidden]{ display:none; }
.dtl-backdrop{ position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 30%, rgba(8,12,8,.62), rgba(4,7,5,.86));
  -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
  opacity:0; transition:opacity .36s ease; }
.dtl-overlay.dtl-on .dtl-backdrop{ opacity:1; }

.dtl-panel{ --dtlc:var(--accent,#9FE870); position:relative; z-index:1; width:min(760px,100%); max-height:92vh; display:flex; flex-direction:column;
  border-radius:var(--r-lg,22px); overflow:hidden;
  background:linear-gradient(180deg, color-mix(in oklab, var(--bg-1,#10160f) 92%, var(--dtlc) 4%), color-mix(in oklab, var(--bg-0,#0a0e09) 95%, transparent));
  border:1px solid color-mix(in oklab, var(--dtlc) 40%, var(--stroke,rgba(159,232,112,.22)));
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 60px color-mix(in oklab, var(--dtlc) 18%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.2); backdrop-filter:blur(22px) saturate(1.2);
  opacity:0; transform:scale(.965) translateY(10px); filter:blur(3px);
  transition:opacity .4s ease, transform .42s var(--ease-glide,cubic-bezier(.2,.8,.2,1)), filter .4s ease; }
.dtl-overlay.dtl-on .dtl-panel{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); }

.dtl-corner{ position:absolute; z-index:8; width:18px; height:18px; pointer-events:none; opacity:.85;
  border-color:color-mix(in oklab, var(--dtlc) 70%, var(--oro,#E9C46A)); }
.dtl-tl{ top:9px; left:9px; border-top:2px solid; border-left:2px solid; border-top-left-radius:6px; }
.dtl-tr{ top:9px; right:9px; border-top:2px solid; border-right:2px solid; border-top-right-radius:6px; }
.dtl-bl{ bottom:9px; left:9px; border-bottom:2px solid; border-left:2px solid; border-bottom-left-radius:6px; }
.dtl-br{ bottom:9px; right:9px; border-bottom:2px solid; border-right:2px solid; border-bottom-right-radius:6px; }

.dtl-x{ position:absolute; top:12px; right:12px; z-index:9; width:36px; height:36px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:rgba(10,14,9,.5);
  border:1px solid var(--stroke,rgba(159,232,112,.22)); color:var(--ink,#eef3e6); font-size:15px; line-height:1;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.dtl-x:hover{ border-color:rgba(233,196,106,.6); transform:rotate(90deg); box-shadow:0 0 16px rgba(233,196,106,.28); }

.dtl-scroll{ overflow-y:auto; overscroll-behavior:contain; }

/* cabecera con imagen */
.dtl-fig{ position:relative; margin:0; height:clamp(180px,30vh,260px); overflow:hidden; }
.dtl-fig[hidden]{ display:none; }
.dtl-img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.03); }
.dtl-figtint{ position:absolute; inset:0; background:linear-gradient(0deg, color-mix(in oklab, var(--bg-1,#0d130e) 96%, transparent), transparent 42%), radial-gradient(120% 90% at 50% 40%, transparent 50%, color-mix(in oklab, var(--dtlc) 16%, transparent)); }
.dtl-head{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px clamp(18px,4%,30px); }
.dtl-eyebrow{ display:inline-block; background:rgba(10,14,9,.55); border:1px solid var(--stroke,rgba(159,232,112,.22)); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:5px 12px; border-radius:999px; font-family:var(--mono,monospace); font-size:11px; color:var(--ink-soft,#cdd6c4); margin-bottom:9px; }
.dtl-eyebrow[hidden]{ display:none; }
.dtl-title{ margin:0; font-family:var(--serif,serif); font-weight:600; font-size:clamp(23px,4vw,32px); line-height:1.08; color:var(--ink,#fff);
  text-shadow:0 2px 14px rgba(0,0,0,.5); }
.dtl-star{ color:var(--dtlc); }

.dtl-body{ padding:clamp(16px,3.5%,28px); display:flex; flex-direction:column; gap:13px; }
.dtl-lead{ margin:0; font-family:var(--serif,serif); font-size:clamp(15px,2.4vw,18px); line-height:1.42; color:var(--ink,#eef3e6);
  border-left:3px solid var(--dtlc); padding-left:14px; }
.dtl-lead[hidden]{ display:none; }
.dtl-paras{ display:flex; flex-direction:column; gap:11px; }
.dtl-paras p{ margin:0; font-size:13.6px; line-height:1.62; color:var(--ink-soft,#c4cdb9); }
.dtl-points{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px; }
.dtl-points[hidden]{ display:none; }
.dtl-points li{ position:relative; padding-left:24px; font-size:13px; line-height:1.5; color:var(--ink-soft,#c4cdb9); }
.dtl-points li::before{ content:"✦"; position:absolute; left:2px; top:0; color:var(--dtlc); font-size:12px; }
.dtl-links{ display:flex; flex-wrap:wrap; gap:9px; margin-top:6px; }
.dtl-links[hidden]{ display:none; }
.dtl-link{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--r-pill,999px); text-decoration:none;
  font-size:12.5px; font-weight:500; color:var(--ink,#eef3e6);
  background:color-mix(in oklab, var(--dtlc) 14%, transparent); border:1px solid color-mix(in oklab, var(--dtlc) 38%, transparent);
  transition:background .2s ease, transform .2s ease, border-color .2s ease; }
.dtl-link:hover{ background:color-mix(in oklab, var(--dtlc) 24%, transparent); transform:translateY(-1px); border-color:color-mix(in oklab, var(--dtlc) 60%, transparent); }

.dtl-foot{ display:flex; justify-content:flex-end; gap:10px; padding:12px clamp(16px,3.5%,28px); border-top:1px solid var(--stroke,rgba(255,255,255,.08));
  background:color-mix(in oklab, var(--bg-0,#0a0e09) 60%, transparent); }
.dtl-btn{ cursor:pointer; padding:9px 18px; border-radius:var(--r-pill,999px); font-size:13px; font-weight:500;
  background:color-mix(in oklab, var(--dtlc) 16%, transparent); border:1px solid color-mix(in oklab, var(--dtlc) 42%, transparent); color:var(--ink,#eef3e6);
  transition:background .2s ease, transform .2s ease; }
.dtl-btn:hover{ background:color-mix(in oklab, var(--dtlc) 28%, transparent); transform:translateY(-1px); }

@media (prefers-reduced-motion: reduce){
  .dtl-panel, .dtl-backdrop{ transition:none; }
  .nodecard-img img, .detailcard{ transition:none; }
}
[data-theme="light"] .dtl-backdrop{ background:radial-gradient(120% 120% at 50% 30%, rgba(60,48,28,.4), rgba(40,30,16,.62)); }
[data-theme="light"] .dtl-paras p, [data-theme="light"] .dtl-points li{ color:#43381f; }