/* ═══════════════════════════════════════════════════════════
   REBUILD — sistema visual para apps-a-medida / automatizacion / buscadores-ia
   Un solo acento (--acc, fijado por página vía inline style), tipografía Space
   Grotesk en display/serif, capa monoespaciada SOLO para datos reales.
   No introduce tokens de color nuevos: usa --bg/--card/--ink/--muted/--border
   ya definidos en vecta.css para no romper nav/footer compartidos.
   ═══════════════════════════════════════════════════════════ */

.rb-updated{ font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--muted); text-transform:uppercase; }

/* ── Catálogo real de automatizaciones (elemento firma de /automatizacion/) ── */
.rb-catalog{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.rb-card{ background:var(--bg-soft); padding:clamp(22px,3vw,32px); display:flex; flex-direction:column; gap:14px; }
.rb-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.rb-card-name{ font-family:var(--display); font-weight:700; font-size:1.15rem; letter-spacing:-.01em; color:var(--ink); }
.rb-card-tag{ flex-shrink:0; font-family:var(--mono); font-size:.68rem; letter-spacing:.03em; text-transform:uppercase; color:var(--acc); border:1px solid color-mix(in srgb,var(--acc) 40%,transparent); background:color-mix(in srgb,var(--acc) 10%,transparent); padding:4px 9px; border-radius:6px; white-space:nowrap; }
.rb-card-what{ color:var(--text); font-size:.95rem; line-height:1.55; }
.rb-card-meta{ margin-top:auto; padding-top:14px; border-top:1px solid var(--border); display:grid; gap:7px; font-family:var(--mono); font-size:.78rem; }
.rb-card-meta div{ display:flex; gap:8px; }
.rb-card-meta span:first-child{ color:var(--faint); min-width:88px; flex-shrink:0; }
.rb-card-meta span:last-child{ color:var(--text); }
@media(max-width:780px){ .rb-catalog{ grid-template-columns:1fr; } }

/* ── Diagrama de arquitectura real ── */
.rb-diagram{ border:1px solid var(--border-2); border-radius:var(--r-md); background:var(--bg-soft); overflow:hidden; }
.rb-diagram-head{ padding:16px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.rb-diagram-head b{ font-family:var(--display); font-weight:700; color:var(--ink); font-size:.98rem; }
.rb-diagram-head span{ font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.rb-flow{ padding:24px 22px; display:flex; flex-direction:column; gap:0; }
.rb-node{ display:flex; align-items:flex-start; gap:14px; padding:13px 0; }
.rb-node-dot{ flex-shrink:0; width:9px; height:9px; border-radius:50%; margin-top:7px; background:var(--faint); }
.rb-node.branch .rb-node-dot{ background:var(--acc); }
.rb-node-body b{ display:block; font-family:var(--display); font-weight:600; font-size:.94rem; color:var(--ink); }
.rb-node-body span{ display:block; font-family:var(--mono); font-size:.76rem; color:var(--muted); margin-top:3px; }
.rb-conn{ width:1px; height:20px; background:var(--border-2); margin-left:4px; }
.rb-branchwrap{ margin-left:23px; padding-left:19px; border-left:1px dashed var(--border-2); display:flex; flex-direction:column; gap:0; margin-top:2px; margin-bottom:2px; }
.rb-note{ margin:0 22px 22px; padding:16px 18px; border-radius:10px; background:color-mix(in srgb,var(--acc) 7%,var(--bg-soft)); border:1px solid color-mix(in srgb,var(--acc) 22%,transparent); }
.rb-note-lbl{ font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--acc); display:block; margin-bottom:8px; }
.rb-note p{ font-family:var(--mono); font-size:.82rem; line-height:1.65; color:var(--text); white-space:pre-wrap; }

/* ── Coste real (parcial, con método visible) ── */
.rb-cost{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.rb-cost-cell{ background:var(--bg-soft); padding:22px 20px; text-align:center; }
.rb-cost-n{ font-family:var(--mono); font-weight:600; font-size:clamp(1.5rem,2.4vw,1.9rem); color:var(--acc); letter-spacing:-.01em; }
.rb-cost-l{ margin-top:6px; font-size:.82rem; color:var(--muted); }
.rb-cost-method{ margin-top:16px; font-family:var(--mono); font-size:.78rem; color:var(--faint); line-height:1.6; }
.rb-cost-method b{ color:var(--muted); font-weight:500; }
.rb-cost-n{ white-space:nowrap; }
@media(max-width:640px){
  .rb-cost{ grid-template-columns:1fr; }
  .rb-cost-cell{ padding:18px 14px; }
  .rb-cost-l{ font-size:.82rem; line-height:1.45; }
}

/* ── Integraciones reales (reemplaza stack+logos genéricos) ── */
.rb-int-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.rb-int{ background:var(--bg-soft); padding:16px 20px; display:flex; align-items:center; gap:14px; }
.rb-int img{ width:26px; height:26px; object-fit:contain; flex-shrink:0; }
.rb-int svg{ width:22px; height:22px; flex-shrink:0; color:var(--muted); }
.rb-int-tx b{ display:block; font-family:var(--display); font-weight:600; font-size:.92rem; color:var(--ink); }
.rb-int-tx span{ display:block; font-size:.8rem; color:var(--muted); margin-top:2px; }
@media(max-width:640px){ .rb-int-list{ grid-template-columns:1fr; } }

/* Sección genérica con cabecera consistente */
.rb-sec-note{ margin-top:14px; font-family:var(--mono); font-size:.78rem; color:var(--faint); }

/* ── Cabeceras alternativas, para que no todas las secciones abran igual ── */

/* Partida: título a la izquierda, nota de apoyo a la derecha, distinta línea de base */
.rb-head-split{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:clamp(34px,5vw,58px); }
.rb-head-split-title{ max-width:520px; }
.rb-head-split-title .eyebrow{ color:var(--acc); }
.rb-head-split-title h2{ font-family:var(--serif); font-weight:800; font-size:clamp(1.9rem,3.6vw,2.8rem); letter-spacing:-.02em; line-height:1.1; margin-top:10px; }
.rb-head-split-sub{ max-width:320px; padding-bottom:5px; }
.rb-head-split-sub p{ color:var(--muted); font-size:.96rem; line-height:1.6; }
@media(max-width:780px){ .rb-head-split{ flex-direction:column; align-items:flex-start; gap:16px; } }

/* Mínima: una declaración corta, sin etiqueta ni párrafo de apoyo */
.rb-head-mini{ margin-bottom:clamp(28px,4vw,44px); max-width:44ch; }
.rb-head-mini h2{ font-family:var(--serif); font-weight:700; font-size:clamp(1.5rem,2.8vw,2.1rem); letter-spacing:-.02em; line-height:1.2; }

/* Con etiqueta al final: el eyebrow va después del título, no antes */
.rb-head-tail{ margin-bottom:clamp(34px,5vw,58px); max-width:640px; }
.rb-head-tail h2{ font-family:var(--serif); font-weight:800; font-size:clamp(1.9rem,3.6vw,2.8rem); letter-spacing:-.02em; line-height:1.12; }
.rb-head-tail .rb-tail-tag{ display:inline-block; margin-top:12px; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--acc); }
.rb-head-tail p{ margin-top:14px; color:var(--muted); font-size:1.02rem; max-width:60ch; }

/* Comilla decorativa opcional, para cabeceras mínimas con presencia gráfica */
.rb-quote-mark{ font-family:var(--serif); font-weight:800; font-size:clamp(4rem,7vw,5.5rem); line-height:1; color:color-mix(in srgb,var(--acc) 22%,transparent); margin-bottom:-14px; }

/* ── Metodología: texto principal + nota destacada al margen ── */
.rb-method{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(28px,4vw,48px); align-items:start; }
.rb-method-tx{ color:var(--text); font-size:1.02rem; line-height:1.75; max-width:56ch; }
.rb-method-tx + .rb-method-tx{ margin-top:16px; }
@media(max-width:900px){ .rb-method{ grid-template-columns:1fr; } }

/* ── Tabla Lighthouse (elemento firma de /apps-a-medida/) ── */
.rb-lh{ border:1px solid var(--border-2); border-radius:var(--r-md); background:var(--bg-soft); overflow:hidden; }
.rb-lh-head{ display:grid; grid-template-columns:1fr 96px 96px; padding:13px 20px; border-bottom:1px solid var(--border); }
.rb-lh-head span{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
.rb-lh-head span:not(:first-child){ text-align:center; }
.rb-lh-row{ display:grid; grid-template-columns:1fr 96px 96px; padding:14px 20px; border-bottom:1px solid var(--border); align-items:center; }
.rb-lh-row:last-child{ border-bottom:none; }
.rb-lh-row span:first-child{ font-family:var(--display); font-weight:600; color:var(--ink); font-size:.92rem; }
.rb-lh-n{ font-family:var(--mono); font-weight:600; font-size:1.1rem; color:var(--acc); text-align:center; }

/* ── Etiquetas de alcance (qué construimos) ── */
.rb-tags{ display:flex; flex-wrap:wrap; gap:9px; }
.rb-tags span{ padding:9px 17px; border:1px solid var(--border-2); border-radius:999px; font-family:var(--mono); font-size:.82rem; color:var(--text); background:var(--bg-soft); }

/* ── Cabecera centrada, para romper la alineación a la izquierda ── */
.rb-head-center{ max-width:660px; margin:0 auto clamp(34px,5vw,58px); text-align:center; }
.rb-head-center .eyebrow{ color:var(--acc); justify-content:center; }
.rb-head-center h2{ font-family:var(--serif); font-weight:800; font-size:clamp(1.9rem,3.6vw,2.8rem); letter-spacing:-.02em; line-height:1.12; margin-top:10px; }
.rb-head-center p{ margin-top:16px; color:var(--muted); font-size:1.02rem; line-height:1.65; }

/* ── Centrado en móvil, coherente con el resto del sitio ──
   Las cabeceras nuevas siguen la misma regla que .sp-head: a la izquierda en
   escritorio, centradas cuando la columna es estrecha. */
@media(max-width:680px){
  .rb-head-split,
  .rb-head-mini,
  .rb-head-tail,
  .rb-head-center{ text-align:center; margin-inline:auto; }

  .rb-head-split{ align-items:center; }
  .rb-head-split-title,
  .rb-head-split-sub{ max-width:none; width:100%; }
  .rb-head-split-title .eyebrow,
  .rb-head-tail .eyebrow{ justify-content:center; }
  .rb-head-split-sub p,
  .rb-head-tail p,
  .rb-head-center p{ margin-inline:auto; }

  .rb-quote-mark{ text-align:center; }

  /* El cuerpo largo también se centra como bloque, con el texto legible */
  .rb-method-tx{ max-width:none; text-align:center; }
  .rb-list{ margin-inline:auto; }
  .rb-cost-method{ text-align:center; }
  .rb-updated{ display:block; text-align:center; }
  .rb-note{ text-align:center; }

  /* Listas: el icono pasa arriba y el texto se centra debajo */
  .rb-list li{ flex-direction:column; align-items:center; text-align:center; gap:8px; }

  /* Tarjetas del catálogo */
  .rb-card{ text-align:center; align-items:center; }
  .rb-card-top{ flex-direction:column; align-items:center; gap:10px; }
  .rb-card-meta{ width:100%; }
  .rb-card-meta div{ flex-direction:column; align-items:center; gap:2px; }
  .rb-card-meta span:first-child{ min-width:0; }

  /* Qué construimos e integraciones */
  .rb-build-item{ text-align:center; }
  .rb-int{ flex-direction:column; text-align:center; gap:10px; }

  /* Decisiones: la barra de acento pasa de lateral a superior */
  .rb-dec-item{ text-align:center; padding-top:28px; }
  .rb-dec-item::before{ left:50%; top:0; bottom:auto; transform:translateX(-50%); width:38px; height:2px; }

  /* Registro de evidencia: la cita se marca arriba, no al lado */
  .rb-entry{ text-align:center; }
  .rb-entry-head{ justify-content:center; }
  .rb-entry-q{ border-left:0; border-top:2px solid var(--acc); padding:14px 0 0; }

  /* Índice del hero y tabla Lighthouse */
  .rb-index-row{ flex-direction:column; gap:8px; }
  .rb-lh-head span:first-child,
  .rb-lh-row span:first-child{ text-align:center; }
  .rb-diagram-head{ justify-content:center; text-align:center; }
}

/* ── Medidores tipo Lighthouse ── */
.rb-gauges{ display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,38px); justify-content:center; }
.rb-gauge{ text-align:center; }
.rb-gauge-ring{ width:84px; height:84px; border-radius:50%; display:grid; place-items:center; margin:0 auto;
  background:conic-gradient(var(--acc) calc(var(--v) * 1%), color-mix(in srgb,var(--acc) 13%,transparent) 0); }
.rb-gauge-ring i{ width:66px; height:66px; border-radius:50%; background:var(--bg-soft); display:grid; place-items:center;
  font-family:var(--mono); font-weight:600; font-size:1.2rem; color:var(--acc); font-style:normal; }
.rb-gauge b{ display:block; margin-top:12px; font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--ink); }
.rb-gauge span{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin-top:4px; }

/* Panel compacto de medidores (hero) */
.rb-gpanel{ border:1px solid var(--border-2); border-radius:var(--r-md); background:var(--bg-soft); padding:26px 24px; }
.rb-gpanel-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.rb-gpanel-top b{ font-family:var(--display); font-weight:600; font-size:.94rem; color:var(--ink); }
.rb-gpanel-top span{ font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); }
.rb-gpanel-foot{ margin-top:20px; padding-top:16px; border-top:1px solid var(--border); font-family:var(--mono); font-size:.72rem; color:var(--faint); line-height:1.6; }

/* Editor de código en el hero: ocupa la columna, altura estable al rotar */
.rb .sp-hero-grid{ gap:clamp(36px,4.5vw,68px); }
.rb .sp-hero-copy .lead{ max-width:46ch; }
/* La caja ocupa toda la columna: si no, se ajusta al ancho del fragmento
   y cambia de tamaño en cada rotación de pestaña. */
.rb-codehero{ min-width:0; }
.rb-codehero .codewin{ max-width:none; margin:0; width:100%; }
.rb-codehero .cw-code{ min-width:0; }
/* Altura fija: los cuatro fragmentos tienen las mismas líneas, así la caja
   no cambia de tamaño al rotar de pestaña. */
.rb-codehero .codewin-body{ height:372px; padding:20px 18px; }
.rb-codehero .cw-code{ font-size:12px; line-height:1.8; }
.rb-codehero .cw-tab{ font-size:11.5px; }
@media(max-width:980px){ .rb-codehero .codewin-body{ height:auto; min-height:340px; } }

/* En móvil el código se ajusta en vez de obligar a desplazar en horizontal.
   Las líneas que siguen mantienen la sangría bajo el número de línea. */
@media(max-width:640px){
  .rb-codehero .codewin-body{ min-height:0; height:auto; padding:16px 14px; }
  .rb-codehero .cw-code{ font-size:11px; line-height:1.75; white-space:pre-wrap; word-break:break-word; }
  .rb .cw-line{ padding-left:32px; text-indent:-32px; }
  .rb .cw-line::before{ width:18px; margin-right:14px; }
  .rb-codehero .cw-tab{ font-size:10.5px; padding:7px 11px; }
  .rb-codehero .cw-tabs{ gap:2px; }
}
.rb-codecap{ display:flex; align-items:center; gap:9px; margin-top:14px; font-family:var(--mono); font-size:.74rem; color:var(--faint); line-height:1.5; }
.rb-codecap i{ width:6px; height:6px; border-radius:50%; background:var(--acc); flex-shrink:0; }

/* Stack centrado: 3 grupos, no 4, para que no quede una columna vacía */
.rb-stack-center{ display:flex; justify-content:center; }
.rb-stack-center .stack-groups{ max-width:940px; width:100%; grid-template-columns:repeat(3,1fr); }
@media(max-width:900px){ .rb-stack-center .stack-groups{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .rb-stack-center .stack-groups{ grid-template-columns:1fr; } }
.rb-stack-center + .stack-note{ text-align:center; }

/* Lista bajo cabecera centrada: el bloque se centra, el texto sigue a la izquierda */
.rb-head-center + .rb-list{ margin-inline:auto; }

/* ── Qué construimos: rejilla de servicios ── */
.rb-build{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.rb-build-item{ background:var(--bg-soft); padding:clamp(20px,2.6vw,28px); }
.rb-build-item b{ display:block; font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink); letter-spacing:-.01em; }
.rb-build-item span{ display:block; margin-top:9px; color:var(--muted); font-size:.92rem; line-height:1.6; }
@media(max-width:900px){ .rb-build{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .rb-build{ grid-template-columns:1fr; } }

/* ── Decisiones detrás del código ── */
.rb-dec{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,22px); }
.rb-dec-item{ position:relative; border:1px solid var(--border-2); border-radius:var(--r-md); background:var(--bg-soft); padding:clamp(22px,2.8vw,30px); }
.rb-dec-item::before{ content:""; position:absolute; left:0; top:22px; bottom:22px; width:2px; background:var(--acc); border-radius:2px; }
.rb-dec-file{ display:inline-block; font-family:var(--mono); font-size:.72rem; color:var(--acc); letter-spacing:.02em; }
.rb-dec-item b{ display:block; margin-top:12px; font-family:var(--display); font-weight:700; font-size:1.08rem; color:var(--ink); letter-spacing:-.01em; line-height:1.25; }
.rb-dec-item p{ margin-top:10px; color:var(--muted); font-size:.94rem; line-height:1.65; }
@media(max-width:780px){ .rb-dec{ grid-template-columns:1fr; } }

/* ── Nota de contexto bajo el bloque de código ── */
.rb-code-why{ max-width:780px; margin:18px auto 0; }
.rb-code-why .rb-note{ margin:0; }

/* ── Números de línea reales en el codewin (solo dentro de .rb) ── */
.rb .cw-code{ counter-reset:cwline; }
.rb .cw-line{ display:block; }
.rb .cw-line::before{ counter-increment:cwline; content:counter(cwline); display:inline-block; width:22px; margin-right:16px; text-align:right; color:#3d4451; user-select:none; }

/* ── Registro de evidencia (elemento firma de /buscadores-ia/) ── */
.rb-registry{ display:flex; flex-direction:column; gap:18px; }
.rb-entry{ border:1px solid var(--border-2); border-radius:var(--r-md); background:var(--bg-soft); padding:clamp(22px,3vw,30px); }
.rb-entry-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.rb-entry-date{ font-family:var(--mono); font-size:.78rem; color:var(--acc); }
.rb-entry-eng{ font-family:var(--mono); font-size:.78rem; color:var(--muted); }
.rb-entry-eng::before{ content:"·"; margin-right:12px; color:var(--faint); }
.rb-entry-q{ font-family:var(--mono); font-size:.88rem; color:var(--text); border-left:2px solid var(--acc); padding-left:14px; margin-bottom:16px; line-height:1.6; }
.rb-entry-a{ font-size:.98rem; line-height:1.7; color:var(--text); }
.rb-entry-a mark{ background:none; color:var(--acc); font-weight:600; }
.rb-entry-foot{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); font-family:var(--mono); font-size:.74rem; color:var(--faint); line-height:1.6; }
.rb-entry-pending{ margin-top:10px; font-size:.8rem; color:var(--faint); font-style:italic; }

/* ── Lista de argumento simple (checklist de razonamiento, reutilizable) ── */
/* Dos columnas en escritorio: si no, la lista ocupa media pantalla y deja
   un hueco muerto a la derecha. */
.rb-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px clamp(28px,4vw,56px); }
@media(max-width:900px){ .rb-list{ grid-template-columns:1fr; max-width:640px; } }
.rb-list li{ display:flex; align-items:flex-start; gap:13px; color:var(--text); font-size:.98rem; line-height:1.6; }
.rb-list li svg{ flex-shrink:0; width:20px; height:20px; margin-top:2px; color:var(--acc); }
.rb-list b{ color:var(--ink); }

/* ── Índice compacto (hero de /automatizacion/) ── */
.rb-index{ display:flex; flex-direction:column; gap:1px; background:var(--border); margin:0 22px 20px; border-radius:10px; overflow:hidden; }
.rb-index-row{ background:var(--bg-soft); padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rb-index-row b{ font-family:var(--display); font-weight:600; color:var(--ink); font-size:.92rem; }