/* ============================================================
   Page-specific adjustments (kept to a minimum by design)
   ============================================================ */

/* Home — hero flow log panel */
.hero-visual { position: relative; }

/* Marco regulatorio — country expansion placeholders */
.law-country-row { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.law-country-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px dashed var(--color-border-2);
  color: var(--color-muted);
}

/* Nosotros — team cards */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.team-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 28px; }
.team-name { font-family: var(--font-heading); font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.team-role { font-size: 12px; color: var(--color-accent); margin-bottom: 12px; }
.team-bio { font-size: var(--text-small); color: var(--color-muted); line-height: 1.7; }
@media (max-width: 960px) { .team-grid { grid-template-columns: 1fr; } }

/* Seguridad — AWS cert chips */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cert-chip { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 18px; text-align: center; }
.cert-chip-name { font-family: var(--font-mono); font-size: var(--text-small); font-weight: 500; color: var(--color-accent-2); }
.cert-chip-sub { font-size: 11px; color: var(--color-muted); margin-top: 4px; }
@media (max-width: 640px) { .cert-grid { grid-template-columns: 1fr; } }

/* Contacto */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }

/* ── Widget IA Numérica (intelligence) ── */
.ens-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.ens-preset {
  font-family: inherit; font-size: 12px; cursor: pointer;
  padding: 8px 16px; border-radius: 20px;
  background: var(--color-surface-2); color: var(--color-muted);
  border: 1px solid var(--color-border-2); transition: all 0.2s;
}
.ens-preset:hover { color: var(--color-text); }
.ens-preset.on { background: rgba(59, 122, 201, 0.18); border-color: var(--color-accent); color: var(--color-text); }
.ens-models { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.ens-model {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px;
}
.ens-model input { accent-color: var(--color-accent); margin-top: 2px; }
.ens-model.diamond { border-color: rgba(247, 201, 74, 0.45); background: rgba(247, 201, 74, 0.06); }
.ens-model .m-title { font-weight: 500; color: var(--color-text); }
.ens-model .m-note { font-size: 11px; color: var(--color-muted); margin-top: 2px; line-height: 1.5; }
.ens-gov { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; margin: 10px 0 16px; }
.gov-step { flex: 1; min-width: 130px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; position: relative; }
.gov-step + .gov-step::before { content: '→'; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); color: var(--color-muted); font-size: 11px; }
.gov-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--color-accent); margin-bottom: 3px; }
.gov-desc { font-size: 11px; color: var(--color-muted); line-height: 1.5; }

/* ── Widget Engine Optimizer (operate) ── */
.eo-canvas-wrap { background: var(--color-code-bg); border: 1px solid var(--color-border-2); border-radius: 12px; padding: 12px; overflow-x: auto; }
.eo-node { cursor: pointer; }
.eo-node rect { fill: var(--color-surface-2); stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; rx: 8; transition: stroke 0.2s; }
.eo-node.sel rect { stroke: var(--color-accent); stroke-width: 1.5; }
.eo-node text { fill: var(--color-text); font-family: 'DM Mono', monospace; font-size: 11px; }
.eo-node .eo-sub { fill: rgba(240, 244, 248, 0.5); font-size: 9px; }
.eo-edge { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1.5; fill: none; marker-end: url(#eo-arrow); }
.eo-edge.challenger { stroke: rgba(247, 201, 74, 0.6); stroke-dasharray: 5 4; }
.eo-props { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 18px; min-height: 120px; }
.eo-branch-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; }
.eo-dist { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 8px 0 4px; }
.eo-dist span { display: block; height: 100%; }

/* ── Widget Resolución IA WhatsApp (operate) ── */
.wa-chat {
  background: var(--color-code-bg); border: 1px solid var(--color-border-2);
  border-radius: 12px; padding: 16px; height: 380px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.wa-msg {
  max-width: 78%; padding: 9px 12px; border-radius: 10px;
  font-size: 12px; line-height: 1.6; animation: fadeIn 0.3s ease;
}
.wa-msg.bot { align-self: flex-start; background: var(--color-surface-2); border: 1px solid var(--color-border); color: rgba(240, 244, 248, 0.85); border-bottom-left-radius: 3px; }
.wa-msg.user { align-self: flex-end; background: rgba(45, 224, 138, 0.12); border: 1px solid rgba(45, 224, 138, 0.3); color: rgba(240, 244, 248, 0.9); border-bottom-right-radius: 3px; }
.wa-msg .wa-who { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--color-muted); margin-bottom: 3px; }
.wa-msg.sys { align-self: center; background: rgba(247, 201, 74, 0.08); border: 1px solid rgba(247, 201, 74, 0.3); color: var(--color-accent-3); font-size: 11px; text-align: center; }
.wa-typing { align-self: flex-start; font-size: 11px; color: var(--color-muted); padding: 4px 12px; }
.wa-events { display: flex; flex-direction: column; gap: 6px; }
.wa-event { display: flex; gap: 10px; align-items: flex-start; background: var(--color-surface-2); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 11px; color: var(--color-muted); opacity: 0.35; transition: opacity 0.3s; }
.wa-event.on { opacity: 1; }
.wa-event .ev-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--color-accent-2); white-space: nowrap; margin-top: 1px; }

/* ── IA Numérica compacta en el Hero (patch3) ── */
.ens-hero {
  background: var(--color-surface);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-lg);
  padding: 20px;
  animation: fadeUp 0.7s ease 0.3s both;
}
.ens-hero .ens-presets { gap: 6px; margin-bottom: 12px; }
.ens-hero .ens-preset { padding: 5px 12px; font-size: 11px; }
.ens-hero .ens-models { gap: 6px; margin-bottom: 10px; }
.ens-hero .ens-model { padding: 7px 10px; font-size: 11px; }
.ens-hero .ens-model:not(.diamond) .m-note { display: none; }
.ens-hero .ens-model .m-note { font-size: 10px; }
.ens-result-compact { margin-top: 12px; }
/* espacio reservado del resultado (3 celdas + pie) para no empujar nada
   cuando el autorun lo rellena (CLS, patch4 §1.7) */
.ens-hero #ens-result { min-height: 106px; margin-top: 12px; }
.ens-result-compact .ens-mrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ens-result-compact .ens-mcell { background: var(--color-code-bg); border-radius: 8px; padding: 10px; text-align: center; }
.ens-result-compact .ens-mval { font-family: var(--font-heading); font-size: 20px; font-weight: 700; }
.ens-result-compact .ens-mlbl { font-size: 9px; color: var(--color-muted); letter-spacing: 0.06em; margin-top: 2px; }
.ens-result-compact .ens-note { font-size: 10px; color: var(--color-muted); margin-top: 8px; line-height: 1.5; }
@media (max-width: 640px) { .ens-hero .ens-models { grid-template-columns: 1fr; } }

/* ── Fixes patch4 fase1 ── */
/* CHAID: título y nota en líneas separadas (1.3) */
.ens-model > span { display: block; min-width: 0; }
.ens-model .m-title { display: block; }
.ens-model .m-note { display: block; }
/* la fila no hereda la altura de la card más alta: cada card a su contenido */
.ens-models { align-items: start; }

/* Tarjeta IA Numérica al tope de la columna + gobernanza debajo (1.4) */
.hero-visual { align-self: start; }
.ens-gov-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.ens-gov-hero .gov-step { flex: none; min-width: 0; }
.ens-gov-hero .gov-step + .gov-step::before { content: none; }
.ens-gov-hero .gov-desc { font-size: 10px; }
@media (max-width: 640px) { .ens-gov-hero { grid-template-columns: 1fr; } }

/* Reserva de altura de resultados autoejecutables (CLS, patch4 §1.7).
   Medidas reales post-ejecución: decide 308-346px, cerebro 535px,
   apiResponse 356px. kycResponse (demo tab 8) se llena tras click de
   tab (input del usuario → excluido del CLS) y se deja sin reserva
   para no mostrar un vacío de 800px. */
#d-result, #kyc-result, #kys-result, #fraud-result { min-height: 350px; }

/* ── demo.html: alto/ancho uniforme de los tabs (referencia: Resolución IA WhatsApp) ──
   Cada widget tenía alto natural distinto (488–1050px) y el área saltaba al cambiar de tab.
   En escritorio fijamos todos al mismo alto, con scroll interno discreto para lo que exceda
   (nada se recorta). En mobile fluye natural. El ancho ya es uniforme (contenedor .inner-page). */
@media (min-width: 900px) {
  .demo-panel {
    height: 720px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-2) transparent;
    padding-right: 6px;
  }
  .demo-panel::-webkit-scrollbar { width: 8px; }
  .demo-panel::-webkit-scrollbar-track { background: transparent; }
  .demo-panel::-webkit-scrollbar-thumb { background: var(--color-border-2); border-radius: 4px; }
}

/* ── Contacto: oficinas en grilla 2 columnas (más armónico que la columna única) ── */
.office-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.office-grid .office-hq { grid-column: 1 / -1; }  /* Head Quarter a lo ancho */
@media (max-width: 520px) { .office-grid { grid-template-columns: 1fr; } }