/* Archivo: web/assets/css/sections.css | Resumen: Bento Grid, Capacidades, Flujo del Laboratorio y Área privada. */
.section {
  padding-block: clamp(3.8rem, 9vh, 6.5rem);
  border-top: 1px solid var(--line);
}
.section-head { max-width: 44rem; margin-bottom: 2.2rem; }
.section-head p.lede { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-top: 0.75rem; }

/* Bento Grid */
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.bento-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: clamp(1.4rem, 2.8vw, 2.2rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
  transition: border-color 0.3s ease, transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.bento-card:hover {
  transform: translateY(-3px);
  border-color: var(--surface-border-hover);
  box-shadow: 0 16px 36px -12px rgb(0 0 0 / 0.6), 0 0 24px -6px rgb(197 232 168 / 0.12);
}
.bento-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.bento-index { font-family: var(--serif); font-size: 1.1rem; color: var(--muted); opacity: 0.6; }

/* Badges */
.status-badge {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1;
}
.status-badge.live { background: var(--badge-live-bg); border: 1px solid var(--badge-live-border); color: var(--badge-live-text); }
.status-badge.live .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--badge-live-text); box-shadow: 0 0 8px var(--badge-live-text); }
.status-badge.dev { background: var(--badge-dev-bg); border: 1px solid var(--badge-dev-border); color: var(--badge-dev-text); }
.status-badge.dev .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--badge-dev-text); }
.status-badge.soon { background: var(--badge-soon-bg); border: 1px solid var(--badge-soon-border); color: var(--badge-soon-text); }
.status-badge.soon .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--badge-soon-text); }

/* Bento Cards Specifics */
.bento-featured { grid-column: span 8; background: radial-gradient(circle at 85% 15%, rgb(197 232 168 / 0.06), transparent 50%), var(--surface-card); }
.bento-featured h3 { font-size: clamp(1.55rem, 2.5vw, 1.95rem); margin-block: 0.35rem 0.65rem; }
.bento-desc { color: var(--muted); font-size: 0.94rem; line-height: 1.65; margin-bottom: 0; }
.bento-preview-box { margin-top: 1rem; padding: 1.15rem; border-radius: var(--radius-md); background: rgb(8 9 12 / 0.6); border: 1px solid rgb(244 241 234 / 0.06); }
.preview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.preview-pill { color: var(--accent); background: rgb(197 232 168 / 0.1); padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); font-weight: 500; }
.preview-content { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.85rem; align-items: center; font-size: 0.8rem; color: var(--muted); }
.preview-snippet { padding: 0.75rem; border-radius: 6px; background: rgb(255 255 255 / 0.02); border: 1px dashed rgb(244 241 234 / 0.12); line-height: 1.45; }
.preview-snippet strong { color: var(--ink); display: block; margin-bottom: 0.25rem; font-size: 0.76rem; }
.preview-arrow { color: var(--accent); font-weight: bold; font-size: 1.1rem; }
.bento-actions { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; }

.bento-rag { grid-column: span 4; }
.bento-agents { grid-column: span 6; }
.bento-vision { grid-column: span 6; }
.bento-card-body h3 { font-size: 1.35rem; margin-block: 0.35rem 0.55rem; }

.tech-spec-bar { display: flex; gap: 0.5rem; margin-top: 0.85rem; flex-wrap: wrap; }
.tech-spec-tag { font-size: 0.7rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.04); border: 1px solid rgb(244 241 234 / 0.06); color: var(--muted); }

.rag-visual-mesh {
  height: 4.8rem; margin-top: 0.75rem; border-radius: 8px;
  background: radial-gradient(circle at 30% 40%, rgb(250 204 21 / 0.18), transparent 30%), radial-gradient(circle at 75% 65%, rgb(197 232 168 / 0.15), transparent 35%), rgb(8 9 12 / 0.5);
  border: 1px solid rgb(244 241 234 / 0.05); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.mesh-nodes { display: flex; align-items: center; gap: 1.4rem; font-size: 0.72rem; color: var(--muted); }
.mesh-node { padding: 0.25rem 0.5rem; border-radius: 4px; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(244 241 234 / 0.1); }

.agent-pipeline {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.9rem;
  padding: 0.75rem; border-radius: 8px; background: rgb(8 9 12 / 0.5); border: 1px solid rgb(244 241 234 / 0.05); font-size: 0.72rem; color: var(--muted);
}
.agent-step-chip { padding: 0.25rem 0.5rem; border-radius: 4px; background: rgb(255 255 255 / 0.04); }

.ocr-mesh {
  margin-top: 0.9rem; padding: 0.75rem; border-radius: 8px; background: rgb(8 9 12 / 0.5);
  border: 1px dashed rgb(244 241 234 / 0.12); display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; color: var(--muted);
}
.ocr-mesh-box { padding: 0.2rem 0.5rem; border-radius: 3px; background: rgb(197 232 168 / 0.08); border: 1px solid rgb(197 232 168 / 0.25); color: var(--accent); }

/* Capacidades (4 Columnas) */
.capabilities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.capability-card {
  position: relative; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--surface-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: clamp(1.4rem, 2.2vw, 1.85rem);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.3s var(--ease), border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.capability-card:hover {
  transform: translateY(-3px); border-color: var(--surface-border-hover); background: var(--surface-card-hover);
  box-shadow: 0 14px 32px -10px rgb(0 0 0 / 0.55), 0 0 20px -6px rgb(197 232 168 / 0.1);
}
.capability-icon {
  width: 2.8rem; height: 2.8rem; border-radius: var(--radius-md); background: rgb(197 232 168 / 0.08); border: 1px solid rgb(197 232 168 / 0.2);
  display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.25rem; margin-bottom: 1.35rem;
}
.capability-card h3 { font-size: 1.22rem; margin-block: 0 0.55rem; }
.capability-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.65; margin-bottom: 0; }

/* Flujo del Laboratorio (3 Pasos) */
.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.workflow-card {
  position: relative; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--surface-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: clamp(1.6rem, 2.5vw, 2.2rem);
  transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.workflow-card:hover { transform: translateY(-3px); border-color: var(--surface-border-hover); box-shadow: 0 14px 32px -10px rgb(0 0 0 / 0.55); }
.workflow-step-num { font-family: var(--serif); font-size: 2.4rem; font-weight: 300; line-height: 1; color: var(--accent); margin-bottom: 0.9rem; }
.workflow-card h3 { font-size: 1.35rem; margin-block: 0 0.65rem; }
.workflow-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.7; margin-bottom: 0; }

/* Área Privada */
.private-main { min-height: calc(100vh - 11rem); padding-block: clamp(3.5rem, 10vh, 6.5rem); max-width: 42rem; }
.private-main h1 { margin-bottom: 1.3rem; }
.private-main .lede { margin-bottom: 1.8rem; }
.private-note { margin: 0 0 1.8rem; padding: 1.4rem 1.5rem; border-left: 2px solid var(--accent); background: rgb(17 18 22 / 0.72); }
.private-note h2 { font-size: 1.35rem; margin-bottom: 0.55rem; }
.private-note p { margin-bottom: 0; color: var(--muted); }

/* Responsive */
@media (max-width: 1024px) {
  .capabilities-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .bento-featured, .bento-rag, .bento-agents, .bento-vision { grid-column: span 12; }
  .workflow-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .capabilities-grid { grid-template-columns: 1fr; }
  .preview-content { grid-template-columns: 1fr; gap: 0.5rem; }
  .preview-arrow { transform: rotate(90deg); justify-self: center; }
}