/* ============================================================
   plataforma.css — Capa premium · Plantilla presentación AI FIRST
   Dalí, Genio Audiovisual de AIONOVA · plantilla reutilizable
   ------------------------------------------------------------
   Additive sobre interactivo.css + tokens.css. Aporta:
   · Mapa "ciudad encendida / apagada" de 8 módulos madre.
   · Estados semánticos (activo/roadmap/neutro/integrable) con glow
     accesible y conexiones SVG line-draw.
   · Reveals escalonados en scroll (IntersectionObserver-driven).
   · Indicadores animados, matriz jobs-to-be-done, tabla económica,
     y el recurso opcional "Ver plataforma completa" (modal).
   Todo self-contained. Respeta prefers-reduced-motion.
   ============================================================ */

/* ---------- 0. Reveals escalonados en scroll ---------- */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
}
/* Red de seguridad: si el JS no corre, nada queda invisible (estado del arte §2) */
@media (scripting: none){ .reveal{ opacity:1; transform:none; } }

/* ---------- 1. Hero de cierre — banda obsidiana de arranque ---------- */
.hero--cierre{
  background:
    radial-gradient(120% 120% at 82% 8%, rgba(200,16,46,.05), transparent 46%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 60%, var(--paper-3) 100%);
}
.hero__badge{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.42em .85em; border:1px solid var(--rule);
  border-radius:99px; background:var(--paper-2); box-shadow:var(--shadow-1);
  font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:1.2em;
}
.hero__badge .dot{
  width:8px; height:8px; border-radius:50%; background:var(--activo);
  box-shadow:0 0 0 0 var(--activo-glow); animation:latido 2.6s var(--ease) infinite;
}
@keyframes latido{
  0%,100%{ box-shadow:0 0 0 0 var(--activo-glow); }
  50%{ box-shadow:0 0 0 6px rgba(31,138,76,0); }
}
@media (prefers-reduced-motion: reduce){ .hero__badge .dot{ animation:none; } }

/* Indicadores grandes de síntesis (4) */
.kpis{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px); margin-top:clamp(26px,4vh,42px);
}
.kpi{
  position:relative; overflow:hidden;
  padding:clamp(16px,2vw,22px);
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
}
.kpi::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent);
}
.kpi:nth-child(1)::before{ background:var(--ink); }
.kpi:nth-child(2)::before{ background:var(--data); }
.kpi:nth-child(3)::before{ background:var(--activo); }
.kpi:nth-child(4)::before{ background:var(--accent); }
.kpi__cifra{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem,2.7vw,2.15rem); line-height:1.02;
  color:var(--ink); letter-spacing:-.015em; font-variant-numeric:tabular-nums;
}
.kpi__pie{ margin-top:.55em; font-size:.8rem; color:var(--ink-soft); line-height:1.4; }

/* ---------- 2. Leyenda de estados ---------- */
.leyenda{
  display:flex; flex-wrap:wrap; gap:.7em 1.4em; align-items:center;
  margin-top:clamp(16px,2.2vh,22px);
  font-size:.8rem; color:var(--ink-soft);
}
.leyenda b{ font-weight:600; color:var(--ink); }
.leyenda span{ display:inline-flex; align-items:center; gap:.5em; }
.leyenda i{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.li-activo{ background:var(--activo); box-shadow:0 0 0 3px var(--activo-tint); }
.li-roadmap{ background:var(--roadmap); box-shadow:0 0 0 3px var(--roadmap-tint); }
.li-neutro{ background:var(--neutro); box-shadow:0 0 0 3px var(--neutro-tint); }
.li-integrable{ background:var(--integrable); box-shadow:0 0 0 3px var(--integrable-tint); }

/* ---------- 3. MAPA de plataforma (ciudad encendida/apagada) ---------- */
.mapa-wrap{ position:relative; margin-top:clamp(20px,3vh,32px); }

/* Conexiones SVG que se dibujan al revelar */
.mapa-lineas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; overflow:visible;
}
.mapa-lineas path{
  fill:none; stroke:var(--rule); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;   /* pathLength="1" normaliza (estado del arte §1) */
  transition:stroke-dashoffset 1.1s var(--ease-out), stroke .6s var(--ease);
}
.mapa-wrap.is-in .mapa-lineas path{ stroke-dashoffset:0; }
.mapa-wrap[data-modo="fase1"] .mapa-lineas path{ stroke:var(--activo); opacity:.5; }
@media (prefers-reduced-motion: reduce){
  .mapa-lineas path{ stroke-dashoffset:0 !important; transition:stroke .3s; }
}

.mapa{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.3vw,16px);
}
.nodo{
  position:relative;
  display:flex; flex-direction:column; gap:.5em;
  padding:clamp(14px,1.7vw,18px);
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
  text-align:left; width:100%;
  transition:transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             border-color var(--dur) var(--ease);
}
.nodo:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.nodo__top{ display:flex; align-items:center; justify-content:space-between; gap:.5em; }
.nodo__ic{
  width:34px; height:34px; border-radius:9px; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--paper-3); color:var(--ink);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nodo__ic svg{ width:18px; height:18px; }
.nodo__estado{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  background:var(--neutro);
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nodo__ttl{
  font-family:var(--display); font-size:.96rem; font-weight:600;
  color:var(--ink); line-height:1.2;
}
.nodo__desc{ font-size:.78rem; color:var(--ink-soft); line-height:1.45; }
.nodo__tag{
  margin-top:auto; align-self:flex-start;
  font-family:var(--mono); font-size:.54rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.32em .55em; border-radius:99px;
  color:var(--neutro-2); background:var(--neutro-tint);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* Modo VISIÓN (neutro, arquitectura destino) — estado por defecto */
.mapa[data-modo="vision"] .nodo{ border-color:var(--rule); }

/* Modo FASE 1 encendida: verde/rojo/integrable por data-estado */
.mapa[data-modo="fase1"] .nodo[data-estado="activo"]{
  border-color:var(--activo);
  box-shadow:0 0 0 1px var(--activo), 0 10px 26px -12px var(--activo-glow);
}
.mapa[data-modo="fase1"] .nodo[data-estado="activo"] .nodo__ic{ background:var(--activo-tint); color:var(--activo-ink); }
.mapa[data-modo="fase1"] .nodo[data-estado="activo"] .nodo__estado{ background:var(--activo); box-shadow:0 0 0 4px var(--activo-tint); }
.mapa[data-modo="fase1"] .nodo[data-estado="activo"] .nodo__tag{ color:#fff; background:var(--activo); }

.mapa[data-modo="fase1"] .nodo[data-estado="parcial"]{ border-color:var(--activo); }
.mapa[data-modo="fase1"] .nodo[data-estado="parcial"] .nodo__estado{
  background:var(--activo); box-shadow:0 0 0 4px var(--activo-tint);
  /* medio-anillo obsidiana marca 'parcial' sin colisionar con el rojo de roadmap */
  border:2px solid var(--paper-2);
  outline:2px solid var(--activo);
}
.mapa[data-modo="fase1"] .nodo[data-estado="parcial"] .nodo__ic{ background:var(--activo-tint); color:var(--activo-ink); }
.mapa[data-modo="fase1"] .nodo[data-estado="parcial"] .nodo__tag{ color:var(--activo-ink); background:var(--activo-tint); }

.mapa[data-modo="fase1"] .nodo[data-estado="integrable"]{ border-color:var(--integrable); }
.mapa[data-modo="fase1"] .nodo[data-estado="integrable"] .nodo__estado{ background:var(--integrable); box-shadow:0 0 0 4px var(--integrable-tint); }
.mapa[data-modo="fase1"] .nodo[data-estado="integrable"] .nodo__ic{ background:var(--integrable-tint); color:var(--integrable); }
.mapa[data-modo="fase1"] .nodo[data-estado="integrable"] .nodo__tag{ color:#fff; background:var(--integrable); }

.mapa[data-modo="fase1"] .nodo[data-estado="roadmap"]{ opacity:.72; }
/* Redundancia no-cromática (WCAG 1.4.1): roadmap = punto HUECO, no solo rojo */
.mapa[data-modo="fase1"] .nodo[data-estado="roadmap"] .nodo__estado{
  background:transparent; box-shadow:inset 0 0 0 2px var(--roadmap), 0 0 0 4px var(--roadmap-tint);
}
.mapa[data-modo="fase1"] .nodo[data-estado="roadmap"] .nodo__tag{ color:var(--roadmap-ink); background:var(--roadmap-tint); }

/* Halo que respira SOLO en nodos activos, gated (estado del arte §1) */
.mapa[data-modo="fase1"] .nodo[data-estado="activo"] .nodo__estado,
.mapa[data-modo="fase1"] .nodo[data-estado="parcial"] .nodo__estado{ position:relative; }
@media (prefers-reduced-motion: no-preference){
  .mapa[data-modo="fase1"] .nodo[data-estado="activo"] .nodo__estado::after,
  .mapa[data-modo="fase1"] .nodo[data-estado="parcial"] .nodo__estado::after{
    content:""; position:absolute; inset:-6px; border-radius:50%;
    background:radial-gradient(circle, var(--activo-glow), transparent 70%);
    opacity:.5; transform:scale(1); will-change:transform,opacity;
    animation:respira 3.6s ease-in-out infinite;
  }
}
@keyframes respira{ 50%{ transform:scale(1.35); opacity:.15; } }

/* Spotlight tenue que sigue al puntero sobre el mapa (estado del arte §2) */
.mapa-wrap{ --sx:50%; --sy:50%; }
.mapa-wrap::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:var(--radius);
  background:radial-gradient(260px circle at var(--sx) var(--sy), var(--accent-tint), transparent 62%);
  opacity:0; transition:opacity .35s var(--ease);
}
.mapa-wrap:hover::after{ opacity:1; }
@media (prefers-reduced-motion: reduce), (hover: none){ .mapa-wrap::after{ display:none; } }

/* Barra de progreso de lectura en el rail (scroll-driven + fallback JS) */
.rail__progress{
  position:absolute; left:0; top:0; width:2px; height:100%;
  transform-origin:top; transform:scaleY(var(--progreso,0));
  background:var(--accent); opacity:.85;
}
@supports (animation-timeline: scroll()){
  .rail__progress{ transform:scaleY(0); animation:llenar linear both; animation-timeline:scroll(root block); }
}
@keyframes llenar{ to{ transform:scaleY(1); } }

/* Interruptor Visión ⇄ Fase 1 */
.switch-modo{
  display:inline-flex; padding:4px; gap:4px;
  background:var(--paper-3); border:1px solid var(--rule); border-radius:99px;
}
.switch-modo button{
  padding:.55em 1.1em; border-radius:99px;
  font-size:.85rem; font-weight:600; color:var(--ink-soft);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.switch-modo button[aria-pressed="true"]{
  background:var(--paper-2); color:var(--ink); box-shadow:var(--shadow-1);
}
.switch-modo button[data-modo="fase1"][aria-pressed="true"]{ box-shadow:var(--shadow-1), inset 0 -2px 0 var(--activo); }

/* ---------- 4. Matriz Jobs to be done (Dolor / Capacidad / Evidencia) ---------- */
.jtbd{ margin-top:clamp(18px,2.6vh,28px); display:grid; gap:10px; }
.jtbd__head, .jtbd__row{
  display:grid; grid-template-columns:1.05fr 1.35fr; gap:clamp(12px,1.8vw,26px);
  align-items:start;
}
.jtbd__head{
  padding:0 clamp(14px,1.6vw,18px) .2em;
  font-family:var(--mono); font-size:.58rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}
.jtbd__row{
  padding:clamp(14px,1.7vw,18px);
  background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--radius);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.jtbd__row:hover{ box-shadow:var(--shadow-2); border-color:var(--ink-mute); }
.jtbd__dolor{ font-weight:600; color:var(--ink); font-size:.92rem; line-height:1.35; }
.jtbd__cap{ color:var(--ink-soft); font-size:.86rem; line-height:1.5; }
.jtbd__ev{
  color:var(--activo-ink); font-size:.82rem; line-height:1.45;
  padding-left:.9em; border-left:2px solid var(--activo);
}

/* ---------- 5. Condiciones / fronteras (dos columnas) ---------- */
.dos-col{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,26px); margin-top:.4em;
}
.col-bloque{
  padding:clamp(18px,2.3vw,26px); border-radius:var(--radius);
  background:var(--paper-2); border:1px solid var(--rule);
}
.col-bloque--arranque{ border-top:3px solid var(--activo); }
.col-bloque--fuera{ border-top:3px solid var(--roadmap); background:var(--paper-3); }
.col-bloque h3{
  font-family:var(--display); font-size:1.06rem; font-weight:600; color:var(--ink);
  margin-bottom:.2em;
}
.col-lista{ display:grid; gap:9px; margin-top:1em; }
.col-lista li{ display:flex; align-items:flex-start; gap:.6em; font-size:.9rem; color:var(--ink-soft); line-height:1.5; }
.col-lista li::before{ content:""; flex:0 0 auto; width:7px; height:7px; margin-top:.5em; border-radius:50%; }
.col-bloque--arranque .col-lista li::before{ background:var(--activo); }
.col-bloque--fuera .col-lista li::before{ background:var(--roadmap); opacity:.7; }
.nota-crm{
  margin-top:clamp(16px,2.2vh,22px);
  padding:clamp(14px,1.8vw,20px);
  border:1px solid var(--integrable); border-left:3px solid var(--integrable);
  border-radius:0 var(--radius) var(--radius) 0; background:var(--integrable-tint);
}
.nota-crm b{ color:var(--integrable); }
.nota-crm p{ font-size:.88rem; color:var(--ink-soft); line-height:1.55; }

/* ---------- 6. Inversión (tabla económica limpia) ---------- */
.inv-grid{
  display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(18px,2.6vw,34px);
  align-items:start; margin-top:.4em;
}
.inv-principal{
  padding:clamp(20px,2.8vw,32px); border-radius:var(--radius);
  background:var(--navy-deep); color:#EDEDF1;
}
.inv-principal .eyebrow{ color:#FF9AA9; }
.inv-principal .eyebrow::before{ background:var(--accent); }
.inv-cifra{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem,4.4vw,3rem); line-height:1; letter-spacing:-.02em;
  color:#fff; font-variant-numeric:tabular-nums;
}
.inv-cifra em{ font-style:normal; font-size:.32em; font-weight:600; color:#B9BEC9; font-family:var(--mono); vertical-align:.4em; margin-right:.35em; }
.inv-sub{ margin-top:.5em; font-size:.86rem; color:#C6CAD3; line-height:1.5; }
.inv-mensual{
  margin-top:clamp(16px,2.2vh,22px); padding-top:clamp(14px,2vh,18px);
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; align-items:baseline; justify-content:space-between; gap:1em; flex-wrap:wrap;
}
.inv-mensual b{ color:#fff; font-family:var(--display); font-size:1.3rem; font-variant-numeric:tabular-nums; }
.inv-mensual span{ font-size:.8rem; color:#B9BEC9; }
.pago{ display:grid; gap:10px; }
.pago__fila{
  display:grid; grid-template-columns:auto 1fr auto; gap:.8em; align-items:center;
  padding:clamp(12px,1.5vw,16px); background:var(--paper-2);
  border:1px solid var(--rule); border-radius:var(--radius);
}
.pago__pct{
  font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--accent-ink);
  min-width:2.4em; font-variant-numeric:tabular-nums;
}
.pago__fila--total{ background:var(--paper-3); border-color:var(--ink-mute); }
.pago__fila--total .pago__pct{ color:var(--ink); }
.pago__momento{ font-size:.82rem; color:var(--ink-soft); line-height:1.35; }
.pago__valor{ font-family:var(--mono); font-size:.9rem; font-weight:700; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }

.pasos-cierre{ counter-reset:paso; display:grid; gap:10px; margin-top:clamp(18px,2.6vh,28px); }
.pasos-cierre li{
  counter-increment:paso; position:relative;
  padding:.7em 1em .7em 3em;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--radius);
  font-size:.9rem; color:var(--ink-soft); line-height:1.45;
}
.pasos-cierre li::before{
  content:counter(paso); position:absolute; left:.7em; top:50%; translate:0 -50%;
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--accent); color:var(--accent-ink);
  font-family:var(--mono); font-size:.72rem; font-weight:700;
}

/* ---------- 7. Recurso opcional "Ver plataforma completa" ---------- */
.aux-acceso{
  position:fixed; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px);
  z-index:60;
  display:inline-flex; align-items:center; gap:.55em;
  padding:.66em 1.05em; border-radius:99px;
  background:var(--paper-2); border:1px solid var(--rule);
  box-shadow:var(--shadow-2);
  font-size:.82rem; font-weight:600; color:var(--ink-soft);
  transition:transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.aux-acceso:hover{ transform:translateY(-2px); color:var(--ink); border-color:var(--ink-mute); }
.aux-acceso .dot{ width:7px; height:7px; border-radius:50%; background:var(--neutro-2); }

.modal{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:clamp(12px,3vw,40px);
  background:rgba(13,13,17,.55); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease), visibility var(--dur);
}
.modal[aria-hidden="false"]{ opacity:1; visibility:visible; }
.modal__panel{
  width:min(1080px, 100%); max-height:92vh; overflow-y:auto;
  background:var(--paper); border-radius:calc(var(--radius) + 4px);
  box-shadow:0 30px 80px -20px rgba(13,13,17,.6);
  transform:translateY(14px) scale(.985); transition:transform var(--dur) var(--ease-out);
}
.modal[aria-hidden="false"] .modal__panel{ transform:none; }
.modal__head{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1em;
  padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,34px) clamp(14px,1.8vh,18px);
  background:linear-gradient(180deg, var(--paper) 70%, transparent);
  border-bottom:1px solid var(--rule);
}
.modal__cerrar{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--rule); background:var(--paper-2);
  display:grid; place-items:center; color:var(--ink-soft);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modal__cerrar:hover{ background:var(--paper-3); color:var(--ink); }
.modal__body{ padding:clamp(18px,2.6vw,30px) clamp(20px,3vw,34px) clamp(24px,3vw,36px); }
.modal__disclaimer{
  display:inline-flex; align-items:center; gap:.5em; margin-top:.6em;
  font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--roadmap-ink); background:var(--roadmap-tint); padding:.4em .7em; border-radius:99px;
}
.modal__mapa{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.3vw,14px);
  margin-top:clamp(16px,2.2vh,22px);
}
.mnode{
  padding:clamp(13px,1.6vw,16px); border-radius:var(--radius);
  background:var(--paper-2); border:1px solid var(--rule);
}
.mnode__h{ display:flex; align-items:center; gap:.5em; font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--ink); line-height:1.2; }
.mnode__d{ margin-top:.5em; font-size:.76rem; color:var(--ink-soft); line-height:1.45; }
.mnode__estados{ margin-top:.7em; display:grid; gap:5px; }
.mnode__estados span{ display:flex; align-items:flex-start; gap:.45em; font-size:.72rem; line-height:1.35; }
.mnode__estados span::before{ content:""; flex:0 0 auto; width:8px; height:8px; margin-top:.35em; border-radius:2px; }
.mnode__estados .e-si{ color:var(--activo-ink); }
.mnode__estados .e-si::before{ background:var(--activo); }
.mnode__estados .e-road{ color:var(--roadmap-ink); }
.mnode__estados .e-road::before{ background:var(--roadmap); opacity:.7; }
.modal__cierre{
  margin-top:clamp(18px,2.4vh,24px); padding-top:clamp(14px,2vh,18px);
  border-top:1px solid var(--rule);
  font-family:var(--display); font-size:1.02rem; font-weight:500; color:var(--ink);
  line-height:1.45; max-width:72ch;
}
.modal__roadmap-label{
  display:inline-block; margin-top:1.4em;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--roadmap-ink);
  background:var(--roadmap-tint); padding:.4em .7em; border-radius:99px;
}

/* Árbol completo (tree ascii estilizado) */
.arbol{
  margin:0; overflow-x:auto;
  padding:clamp(16px,2vw,22px);
  background:var(--navy-deep); color:#D8DBE2; border-radius:var(--radius);
  font-family:var(--mono); font-size:.74rem; line-height:1.75;
  white-space:pre; -webkit-overflow-scrolling:touch;
}
.arbol b{ color:#fff; font-weight:700; }
.arbol .r{ color:#FF9AA9; }   /* raíz / acentos */
.arbol .s{ color:#8FE3AD; }   /* Fase 1 */

/* Secciones expandibles del modal (resumen + estados + detalle real) */
.modal__secciones{ display:grid; gap:10px; margin-top:clamp(16px,2.2vh,22px); }
.msec.panel{ margin-top:0; }
.msec .panel__toggle{ align-items:flex-start; padding:clamp(14px,1.8vw,20px); }
.msec__cab{ display:flex; flex-direction:column; gap:.55em; text-align:left; }
.msec__linea{ display:flex; align-items:center; gap:.6em; }
.msec__n{
  flex:0 0 auto; width:26px; height:26px; border-radius:7px;
  display:grid; place-items:center; background:var(--paper-3);
  font-family:var(--mono); font-size:.72rem; font-weight:700; color:var(--ink);
}
.msec__ttl{ font-family:var(--display); font-size:1.02rem; font-weight:600; color:var(--ink); line-height:1.2; }
.msec__resumen{ font-size:.86rem; color:var(--ink-soft); line-height:1.5; }
.msec__estados{ display:flex; flex-wrap:wrap; gap:.5em 1.1em; }
.msec__estados span{ display:inline-flex; align-items:flex-start; gap:.45em; font-size:.76rem; line-height:1.35; }
.msec__estados span::before{ content:""; flex:0 0 auto; width:9px; height:9px; margin-top:.28em; border-radius:3px; }
.msec__estados .e-si{ color:var(--activo-ink); }
.msec__estados .e-si::before{ background:var(--activo); }
.msec__estados .e-road{ color:var(--roadmap-ink); }
.msec__estados .e-road::before{ background:transparent; box-shadow:inset 0 0 0 2px var(--roadmap); }
.msec .panel__body > p + p{ margin-top:.85em; }
.msec__sub{
  margin-top:1em; padding-top:.9em; border-top:1px solid var(--rule-soft);
  display:flex; flex-wrap:wrap; gap:6px;
}
.msec__sub b{ width:100%; font-family:var(--mono); font-size:.56rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:.2em; }
.msec__sub span{
  font-size:.74rem; color:var(--ink-soft);
  padding:.32em .6em; border:1px solid var(--rule); border-radius:99px; background:var(--paper-2);
}

/* ---------- 8. Responsive ---------- */
@media (max-width: 1080px){
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mapa, .modal__mapa{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .inv-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 760px){
  .jtbd__head{ display:none; }
  .jtbd__row{ grid-template-columns:minmax(0,1fr); gap:.5em; }
  .jtbd__ev{ border-left:0; padding-left:0; }
  .dos-col{ grid-template-columns:minmax(0,1fr); }
  .mapa, .modal__mapa{ grid-template-columns:minmax(0,1fr); }
  .mapa-lineas{ display:none; }
  .aux-acceso{ right:10px; bottom:10px; }
}