/* ═══════════════════════════════════════════════════════════════════
   CREATIVE3DC — ENHANCEMENTS LAYER
   Plan completo (1-13): cards unificadas, contenedores limpios,
   color ampliado, jerarquía, microinteracciones.
   Se carga DESPUÉS de main.css para overridear puntualmente.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Paleta neutra ampliada — rompe la dependencia rojo/negro */
  --c3dc-ink-1: #0c0e14;
  --c3dc-ink-2: #14171f;
  --c3dc-ink-3: #1c1f2a;
  --c3dc-fog-1: #4a4f5c;
  --c3dc-fog-2: #838a96; /* contraste AA (~5.5:1) sobre fondo oscuro, antes #6b7280 ~4.0:1 */
  --c3dc-fog-3: #9aa1ad;

  /* Sistema unificado de cards */
  --card-bg: rgba(20, 23, 31, 0.55);
  --card-bg-hover: rgba(28, 31, 42, 0.72);
  --card-border: rgba(255, 255, 255, 0.07);
  --card-border-hover: rgba(232, 33, 39, 0.42);
  --card-radius: 16px;
  --card-pad: 24px;
  --card-blur: 14px;
  --card-glow: 0 0 0 1px rgba(232, 33, 39, 0.06),
               0 18px 48px -20px rgba(232, 33, 39, 0.35),
               0 0 56px -12px rgba(232, 33, 39, 0.18);
}

/* ─────────────────────────────────────────────────────────────────
   1 · Eliminar contenedores redundantes
   ───────────────────────────────────────────────────────────────── */

/* FAQ — quitar el recuadro exterior */
.faq-list {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  border-top: 1px solid var(--c3dc-line) !important;
}

/* Mobile: el header no puede quedar absoluto pisando el título (bug visual) */

/* Mobile: stack vertical (no posicionado en %) */

/* Barra de status del proceso — limpiar fondo de píldora */
.pw-status {
  border-top: 1px solid var(--c3dc-line) !important;
  border-left: none;
  border-right: none;
  border-bottom: none;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 26px 0 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   2 · Sistema unificado de cards (proyectos, mapa, proceso, why)
   ───────────────────────────────────────────────────────────────── */

.proj-side-card,

.why-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  backdrop-filter: blur(var(--card-blur)) saturate(140%) !important;
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(140%) !important;
  box-shadow: 0 8px 24px -16px rgba(0,0,0,.4) !important;
  transition: border-color .25s,
              box-shadow .35s,
              background .25s,
              transform .35s var(--ease-out, cubic-bezier(.16,1,.3,1)) !important;
}
.proj-side-card,
.why-card {
  position: relative;
}

/* Glow rojo coherente en hover */
.proj-side-card:hover,
.why-card:hover {
  border-color: var(--card-border-hover) !important;
  background: var(--card-bg-hover) !important;
  box-shadow: var(--card-glow) !important;
  transform: translateY(-3px) !important;
}

/* Featured project card — mismo lenguaje */
.proj-featured.hud-frame {
  background: linear-gradient(180deg, rgba(28,31,42,.72), rgba(20,23,31,.55)) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(var(--card-blur)) saturate(140%) !important;
}

/* ─────────────────────────────────────────────────────────────────
   3 · Jerarquía tipográfica unificada en cards
   ───────────────────────────────────────────────────────────────── */

.proj-side-card h3,

.why-card h3 {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
}

.proj-side-card .proj-sc-domain,

.why-card p {
  color: var(--c3dc-fog-3) !important;
}

/* ─────────────────────────────────────────────────────────────────
   4 · Estados visuales coherentes (pills)
   ───────────────────────────────────────────────────────────────── */

.proj-sc-status,
.proj-feat-status {
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(232,33,39,.08) !important;
  border: 1px solid rgba(232,33,39,.25) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.proj-sc-status i,
.proj-feat-status i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2ee37a;
  box-shadow: 0 0 8px #2ee37a;
}
.proj-sc-status.deployed i { background: #3a8bff; box-shadow: 0 0 8px #3a8bff; }

/* ─────────────────────────────────────────────────────────────────
   5 · Sparklines y mini-gráficos: rojo puro visible
   ───────────────────────────────────────────────────────────────── */

.proj-sc-chart,
.fspark {
  stroke: var(--c3dc-red) !important;
  stroke-width: 1.6 !important;
  filter: drop-shadow(0 0 4px rgba(232,33,39,.55));
  opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────────
   6 · Color: separadores en gris, no en rojo
   ───────────────────────────────────────────────────────────────── */

hr,
.proj-bar,
.pw-title-bar {
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.18) 30%,
    rgba(232,33,39,.55) 50%,
    rgba(255,255,255,.18) 70%,
    transparent) !important;
}

/* ─────────────────────────────────────────────────────────────────
   8 · CTA reveal en hover de cards de proyecto
   ───────────────────────────────────────────────────────────────── */

.proj-side-card::after {
  content: "Ver caso →";
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c3dc-red);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
  pointer-events: none;
}
.proj-side-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* ─────────────────────────────────────────────────────────────────
   9 · FAQ — microinteracción + → ×
   ───────────────────────────────────────────────────────────────── */

.faq-plus {
  width: 32px !important;
  height: 32px !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  border-color: rgba(255,255,255,.12) !important;
}
.faq-item.open .faq-plus {
  transform: rotate(45deg) scale(1.08) !important;
  background: rgba(232,33,39,.14) !important;
  border-color: var(--c3dc-red) !important;
}
.faq-q {
  padding: 24px 4px !important;
  font-size: 16.5px !important;
}
.faq-q:hover {
  color: #fff !important;
}
.faq-q:hover .faq-plus {
  border-color: rgba(232,33,39,.5) !important;
  color: var(--c3dc-red) !important;
}

/* ─────────────────────────────────────────────────────────────────
  10 · Barra de status del proceso — más jerarquía
   ───────────────────────────────────────────────────────────────── */

.pw-status-item {
  padding: 0 20px;
  border-right: 1px solid var(--c3dc-line);
}
.pw-status-item:first-child { padding-left: 0; }
.pw-status-item:last-of-type { border-right: none; }
.pw-status-item > svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--c3dc-fog-3) !important;
}
.pw-status-item:first-child > svg {
  color: var(--c3dc-red) !important;
}
.pw-status-pct {
  border: 2px solid rgba(255,255,255,.1) !important;
  background: radial-gradient(circle at 50% 50%, rgba(232,33,39,.18), transparent 70%);
}


/* ─────────────────────────────────────────────────────────────────
  12 · Why-us cards — números más sutiles, mejor padding
   ───────────────────────────────────────────────────────────────── */

.why-card {
  padding: 28px 24px !important;
}
.why-num {
  color: var(--c3dc-fog-2) !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
}
.why-card .why-icon {
  border-color: rgba(232,33,39,.25) !important;
  background: rgba(232,33,39,.06);
}

/* ─────────────────────────────────────────────────────────────────
   Accesibilidad: respetar reduced-motion
   ───────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   Mobile: cards menos saturadas, mejor espaciado
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root {
    --card-pad: 18px;
    --card-radius: 14px;
  }
  .proj-side-card::after { display: none; }
  .pw-status-item {
    padding: 0;
    border-right: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   14 · Mensaje de error del formulario (accesible, WCAG 3.3.1)
   ───────────────────────────────────────────────────────────────── */
.form-error {
  color: #ff6b6b !important;
  font-size: 13px;
  margin: -4px 0 4px;
}
.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
  border-color: rgba(232, 33, 39, .7) !important;
}

/* ─────────────────────────────────────────────────────────────────
   Sistema de estados unificado: LIVE · PILOT · EVOLVING · CONCEPT
   ───────────────────────────────────────────────────────────────── */
.status-pill {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}
.status-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.status-pill--live {
  background: rgba(46, 227, 122, .1);
  border: 1px solid rgba(46, 227, 122, .3);
}
.status-pill--live i { background: #2ee37a; box-shadow: 0 0 8px #2ee37a; }
.status-pill--pilot {
  background: rgba(232, 33, 39, .08);
  border: 1px solid rgba(232, 33, 39, .25);
}
.status-pill--pilot i { background: var(--c3dc-red-luminous); box-shadow: 0 0 8px var(--c3dc-red-luminous); }
.status-pill--evolving {
  background: rgba(58, 139, 255, .08);
  border: 1px solid rgba(58, 139, 255, .25);
}
.status-pill--evolving i { background: #3a8bff; box-shadow: 0 0 8px #3a8bff; }
.status-pill--concept {
  background: rgba(143, 168, 190, .08);
  border: 1px solid rgba(143, 168, 190, .3);
}
.status-pill--concept i { background: var(--c3dc-cold); box-shadow: 0 0 8px var(--c3dc-cold); }

/* Pill compacta para la columna angosta de las cards secundarias */
/* nowrap + padding/gap reducidos primero; font-size solo baja lo mínimo
   (9px, no menos que el resto de los textos de estado de la página) para
   que entre en la columna angosta sin quedar más chico que todo lo demás */
.proj-sc-side .status-pill {
  white-space: nowrap;
  font-size: 9px;
  padding: 3px 7px;
  gap: 4px;
}

/* Hero: prueba inferior + versión como detalle secundario */
.hero-proof {
  margin-top: 20px;
  font-size: 13px;
  color: var(--c3dc-fog-3);
  max-width: 480px;
}
.hero-version {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c3dc-fog-2);
}

/* Indicador de 4 nodos (reemplaza la barra de progreso de scroll) */
.nav-pillars {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline: 20px;
}
.nav-pillar {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(244, 247, 251, .18);
  transition: background .3s var(--ease, ease), box-shadow .3s var(--ease, ease), transform .3s var(--ease, ease);
}
.nav-pillar.active {
  background: var(--c3dc-red-luminous);
  box-shadow: 0 0 8px var(--c3dc-red-luminous);
  transform: scale(1.3);
}
@media (max-width: 900px) {
  .nav-pillars { display: none; }
}

/* Continuidad del Core: al ocultar el boot, el hex no desaparece de golpe,
   se encoge y se reposiciona como acento decorativo detrás del hero. */
#c3dc-loader.is-hidden .c3dc-boot-core {
  transition: transform .6s var(--ease-out, ease), opacity .6s var(--ease-out, ease);
  transform: scale(.22) translateY(-38vh);
  opacity: 0;
}
/* La contraparte reduced-motion vive junto al resto de las reglas
   reduced-motion del boot, en main.css (~línea 5125). */

/* Shizi: núcleo del pecho, reacciona al cursor y al hover de los CTAs */
.shizi-core-glow {
  position: absolute;
  left: 75%;
  top: 27%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,33,39,.55), transparent 70%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity .25s var(--ease, ease), transform .25s var(--ease, ease);
  pointer-events: none;
  filter: blur(2px);
}
.shizi-core-glow.is-active {
  opacity: .6;
  transform: translate(-50%, -50%) scale(1.35);
}
@media (prefers-reduced-motion: reduce) {
  .shizi-core-glow { transition: none; }
}
/* La posición del glow está calibrada para el crop de escritorio
   (object-position: center right). En este rango .hero-art img usa un
   crop distinto (object-position: 72% center, ver main.css ~línea 929),
   así que el ancla fija ya no corresponde al pecho del personaje —
   se oculta en vez de mostrar el glow desalineado. */
@media (min-width:768px) and (max-width:1024px) {
  .shizi-core-glow { display: none; }
}

/* Proceso: 4 macrofases colapsables (reemplaza el timeline de 7 pasos) */
.pw-phase {
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  margin-bottom: 12px;
  overflow: hidden;
}
.pw-phase-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: #fff;
  font: inherit;
}
.pw-phase-num {
  font-family: var(--mono);
  color: var(--c3dc-red-luminous);
  font-weight: 800;
  font-size: 13px;
}
.pw-phase-name {
  flex: 1;
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 18px;
}
.pw-phase-plus {
  font-size: 18px;
  font-weight: 300;
  transition: transform .25s var(--ease-out, ease);
}
.pw-phase[data-open="true"] .pw-phase-plus { transform: rotate(45deg); }
.pw-phase-body {
  padding: 0 20px 20px 56px;
}
.pw-phase-body ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  color: var(--c3dc-fog-3);
  font-size: 14px;
}
.pw-phase-body ul li::before { content: "— "; color: var(--c3dc-red-luminous); }
.pw-phase-deliver {
  font-size: 13px;
  color: var(--c3dc-fog-2);
  border-top: 1px dashed rgba(255,255,255,.08);
  padding-top: 10px;
}
.pw-phase-deliver span {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c3dc-fog-2);
  margin-right: 8px;
}

/* Formulario de 3 pasos */
.form-progress {
  margin-bottom: 22px;
}
.form-progress-track {
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}
.form-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--c3dc-red);
  transition: width .3s var(--ease);
}
.form-progress-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c3dc-fog-3);
}
.fp-step.is-active { color: #fff; }
.fp-step.is-done { color: var(--c3dc-red-luminous); }

.form-step {
  border: 0;
  padding: 0;
  margin: 0;
  animation: formStepIn .25s var(--ease);
}
.form-step legend.form-label {
  padding: 0;
  margin-bottom: 14px;
}
.form-step legend.form-label small {
  display: block;
  font-weight: 400;
  color: var(--c3dc-fog-3);
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
}
@keyframes formStepIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .form-step { animation: none; }
  .form-progress-fill { transition: none; }
}

.form-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}
.form-step-actions .form-step-back {
  margin-right: auto;
}

.form-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 14px 16px;
  margin: 4px 0 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  border-radius: 8px;
}
.form-summary p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.form-summary span {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c3dc-fog-3);
}
.form-summary b {
  font-size: 14px;
  color: #fff;
}

/* Sección Estudio */
.studio-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 60px;
  align-items: center;
}
.studio-visual {
  position: relative;
  padding: 36px;
  border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(circle at 50% 30%, rgba(232,33,39,.1), rgba(10,14,22,.9));
  text-align: center;
}
.studio-visual img {
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(232,33,39,.25));
}
.studio-visual-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--c3dc-fog-3);
}
.studio-visual-tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c3dc-red);
  box-shadow: 0 0 8px rgba(232,33,39,.8);
}
.studio-text .lead {
  margin: 18px 0 26px;
  max-width: 56ch;
}
.studio-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--c3dc-fog-3);
  font-size: 14px;
}
.studio-list li::before { content: "— "; color: var(--c3dc-red-luminous); }

@media (max-width: 900px) {
  .studio-grid { grid-template-columns: 1fr; gap: 32px; }
  .studio-list { grid-template-columns: 1fr; }
}

/* Capacidades conectadas */
.cap-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.cap-head .lead { margin-top: 14px; }
.cap-body {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 48px;
  align-items: start;
}
.cap-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 420px;
  margin: 0 auto;
}
.cap-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cap-line {
  stroke: var(--c3dc-red);
  stroke-width: .6;
  opacity: 0;
  stroke-dasharray: 45;
  stroke-dashoffset: 45;
  transition: opacity .3s var(--ease), stroke-dashoffset .45s var(--ease);
}
.cap-line.is-active {
  opacity: .65;
  stroke-dashoffset: 0;
}
.cap-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(232,33,39,.16), rgba(10,14,22,.9));
  border: 1px solid rgba(232,33,39,.4);
  box-shadow: 0 0 30px rgba(232,33,39,.18);
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.cap-core-count {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.cap-core-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c3dc-fog-3);
  margin-top: 4px;
}
.cap-core-1 { box-shadow: 0 0 34px rgba(232,33,39,.28); border-color: rgba(232,33,39,.55); }
.cap-core-2 { box-shadow: 0 0 44px rgba(232,33,39,.38); border-color: rgba(232,33,39,.7); transform: translate(-50%, -50%) scale(1.04); }
.cap-core-3 { box-shadow: 0 0 56px rgba(232,33,39,.5); border-color: rgba(232,33,39,.85); transform: translate(-50%, -50%) scale(1.08); }
.cap-core-4 { box-shadow: 0 0 70px rgba(232,33,39,.65); border-color: var(--c3dc-red); transform: translate(-50%, -50%) scale(1.12); }

.cap-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 92px;
  padding: 12px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(10,14,22,.82);
  color: rgba(238,241,248,.8);
  font: 600 12px 'Inter', sans-serif;
  cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.cap-node-icon svg { width: 20px; height: 20px; }
.cap-node:hover {
  transform: translate(-50%, -50%) translateY(-4px);
  border-color: rgba(232,33,39,.5);
}
.cap-node.is-active {
  color: #fff;
  border-color: var(--c3dc-red);
  background: rgba(232,33,39,.14);
  box-shadow: 0 10px 28px rgba(232,33,39,.22);
  transform: translate(-50%, -50%) translateY(-2px);
}
@keyframes capFlash {
  0% { box-shadow: 0 0 0 0 rgba(232,33,39,.55); }
  100% { box-shadow: 0 0 0 16px rgba(232,33,39,0); }
}
.cap-node.cap-flash { animation: capFlash .5s var(--ease); }

.cap-side { min-width: 0; }
.cap-hint {
  color: var(--c3dc-fog-3);
  font-size: 14px;
  margin: 0 0 16px;
}
.cap-summary {
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid rgba(232,33,39,.35);
  background: rgba(232,33,39,.06);
  border-radius: 8px;
}
.cap-summary-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c3dc-red-luminous);
  margin-bottom: 6px;
}
.cap-summary-example {
  margin: 0;
  font-size: 14px;
  color: rgba(238,241,248,.85);
}
.cap-details {
  display: grid;
  gap: 14px;
}
.cap-detail-card {
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}
.cap-detail-card h4 { margin: 0 0 8px; font-size: 15px; color: #fff; }
.cap-detail-problema {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--c3dc-fog-3);
  font-style: italic;
}
.cap-detail-row {
  margin: 0 0 4px;
  font-size: 13px;
  color: rgba(238,241,248,.8);
}
.cap-detail-row span {
  display: inline-block;
  min-width: 150px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c3dc-fog-2);
}

@media (prefers-reduced-motion: reduce) {
  .cap-node, .cap-core, .cap-line { transition: none; }
  .cap-node.cap-flash { animation: none; }
}

@media (max-width: 900px) {
  .cap-body { grid-template-columns: 1fr; }
  .cap-diagram { max-width: 320px; }
}
@media (max-width: 480px) {
  .cap-node { width: 76px; font-size: 11px; padding: 9px 6px; }
  .cap-node-icon svg { width: 16px; height: 16px; }
}