/* ==========================================================================
   RouterClip · patrones de las páginas estáticas de la web (producto, canales, cómo
   funciona, ayuda, privacidad, conocimiento, precios, legales y 404).
   Va después de /site.css (tokens, base y el armazón de la web de src/PublicLanding.css
   y src/PricingSection.css), así que aquí solo está lo que no tiene la landing:
   cabecera de página interior, migas, panel, nota y legales (el plano de rutas pequeño y la 404 viven en
   src/PublicLanding.css porque también los usa la aplicación).
   Solo tokens: sin hex, sin degradados, sin píldoras ni selectores de tema.
   ========================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.site { min-width: 320px; }

/* ---------- Cabecera de página interior ------------------------------ */
.site-page-hero { padding-top: var(--space-10); }
.site-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-bottom: 14px; border-bottom: var(--border-hair) solid var(--color-border-strong); font-family: var(--font-mono); font-size: var(--type-mono-size); line-height: var(--type-mono-line); color: var(--color-text-3); }
.site-crumbs a { color: var(--color-text-2); text-decoration: none; }
.site-crumbs a:hover { color: var(--color-text); text-decoration: underline; }
.site-crumbs [aria-current="page"] { color: var(--color-text); }
.site-page-hero__grid { row-gap: var(--space-8); margin-top: var(--space-12); }
.site-page-hero__copy { grid-column: 1 / span 8; display: grid; gap: var(--space-5); align-content: start; }
.site-page-hero h1 { font-size: var(--type-display-size); line-height: var(--type-display-line); letter-spacing: var(--type-display-track); font-weight: var(--weight-bold); text-wrap: balance; }
.site-page-hero__art { grid-column: 9 / span 4; align-self: end; margin: 0; }
.site-page-hero__lede { grid-column: 1 / span 6; font-family: var(--font-serif); font-size: var(--type-lede-size); line-height: var(--type-lede-line); letter-spacing: var(--type-lede-track); color: var(--color-text); max-width: 34em; }
.site-page-hero__cta { grid-column: 8 / span 5; align-self: end; }
.site-sec--tight { margin-top: var(--space-24); }


/* ---------- Ilustraciones de cabecera según el contenido (14.0) ------ */
/* Ayuda: índice de temas que salta a cada grupo de preguntas, con su número y cuántas preguntas tiene. */
.site-topics { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border-rule) solid var(--color-rule); }
.site-topics ol { display: grid; }
.site-topics a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-2); min-height: var(--control-h-lg); padding: var(--space-2) 0; border-bottom: var(--border-hair) solid var(--color-border); color: var(--color-text); text-decoration: none; }
.site-topics a:hover .site-topics__name { text-decoration: underline; text-underline-offset: 4px; }
.site-topics__n { font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--color-text-3); }
.site-topics__name { font-size: var(--type-body-size); line-height: 22px; font-weight: var(--weight-semibold); }
.site-topics__count { font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--color-text-3); white-space: nowrap; }

/* Base de conocimiento: una respuesta del asistente con notas al pie numeradas a sus documentos (14.7). */
.site-answer { display: grid; gap: var(--space-4); padding-top: var(--space-3); border-top: var(--border-rule) solid var(--color-rule); font-size: var(--type-ui-size); line-height: 21px; }
.site-answer__who { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 2px; font-size: var(--type-sm-size); line-height: var(--type-sm-line); font-weight: var(--weight-semibold); color: var(--color-text); }
.site-answer__q { display: grid; color: var(--color-text); }
.site-answer__a { display: grid; gap: var(--space-1); padding-left: var(--space-3); border-left: var(--border-mark) solid var(--color-text); color: var(--color-text-2); }
.site-answer__mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--radius-1); background: var(--color-action); color: var(--color-on-action); }
.site-answer__mark .rc-symbol { display: block; width: 12px; height: 12px; }
.site-answer sup { margin-left: 1px; font-family: var(--font-mono); font-size: 11px; line-height: 0; color: var(--color-text); }
.site-answer__sources { display: grid; gap: 2px; margin-top: var(--space-2); padding-top: var(--space-2); border-top: var(--border-hair) solid var(--color-border); font-size: var(--type-xs-size); line-height: 18px; color: var(--color-text-3); }
.site-answer__sources li { display: flex; align-items: center; gap: 6px; }
.site-answer__sources .i { width: 12px; height: 12px; flex: none; }
.site-answer__sources b { font-weight: var(--weight-medium); color: var(--color-text-2); }
.site-answer__n { min-width: 12px; font-family: var(--font-mono); color: var(--color-text); }

/* Cómo funciona: la puesta en marcha como un stepper vertical (15.7). El primer paso hecho (tinta), el actual con su
   anillo de tinta y los siguientes huecos; el número en mono. */
.site-setup { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border-rule) solid var(--color-rule); }
.site-setup__list { display: grid; }
.site-setup__step { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--space-3); padding: 0 0 var(--space-4); }
.site-setup__step:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 0; width: 2px; background: var(--color-border); }
.site-setup__step.is-done:not(:last-child)::before { background: var(--color-text); }
.site-setup__node { grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 1px; border: 2px solid var(--color-border-control); border-radius: var(--radius-1); background: var(--color-bg); }
.site-setup__step.is-done .site-setup__node { border-color: var(--color-text); background: var(--color-text); }
.site-setup__step.is-current .site-setup__node { border-color: var(--color-text); background: var(--color-text); box-shadow: inset 0 0 0 3px var(--color-bg); }
.site-setup__n { font-family: var(--font-mono); font-size: var(--type-mono-size); line-height: 18px; color: var(--color-text-3); }
.site-setup__t { font-size: var(--type-body-size); line-height: 22px; font-weight: var(--weight-semibold); color: var(--color-text); }
.site-setup__step:not(.is-done):not(.is-current) .site-setup__t { color: var(--color-text-2); font-weight: var(--weight-medium); }

/* Producto: una bandeja anotada. Tres conversaciones de tres canales; la actual con la regla de tinta; notas numeradas. */
.site-inbox { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border-rule) solid var(--color-rule); font-size: var(--type-sm-size); line-height: 19px; }
.site-inbox__list { display: grid; border-top: var(--border-hair) solid var(--color-border-strong); }
.site-inbox__row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; gap: var(--space-2); padding: 10px 10px 10px 8px; border-bottom: var(--border-hair) solid var(--color-border); border-left: var(--border-mark) solid transparent; }
.site-inbox__row.is-current { border-left-color: var(--color-text); background: var(--color-bg-subtle); }
.site-inbox__row .ch-glyph { margin-top: 2px; color: var(--chc); }
.site-inbox__who { display: grid; min-width: 0; }
.site-inbox__who b { font-weight: var(--weight-semibold); color: var(--color-text); }
.site-inbox__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-2); }
.site-inbox__meta { display: grid; justify-items: end; gap: 2px; }
.site-inbox__time { font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--color-text-3); }
.site-inbox__owner { font-size: var(--type-xs-size); color: var(--color-text-2); white-space: nowrap; }
.site-inbox__draft { display: flex; align-items: center; gap: var(--space-2); padding-left: var(--space-3); border-left: var(--border-mark) solid var(--color-text); color: var(--color-text-2); }
.site-inbox__mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--radius-1); background: var(--color-action); color: var(--color-on-action); }
.site-inbox__mark .rc-symbol { display: block; width: 12px; height: 12px; }
.site-inbox__notes { display: grid; gap: 4px; padding-top: var(--space-2); border-top: var(--border-hair) solid var(--color-border); color: var(--color-text-2); font-size: var(--type-xs-size); line-height: 18px; }
.site-inbox__notes li { display: flex; align-items: baseline; gap: var(--space-2); }
.site-inbox__n { min-width: 12px; font-family: var(--font-mono); color: var(--color-text); }

/* Datos y privacidad: dónde vive cada dato, una fila por tipo (4 columnas de etiqueta y 8 de detalle). */
.site-dl--wide > div { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); padding: var(--space-5) 0; }
.site-dl--wide dt { grid-column: 1 / span 4; font-size: var(--type-h4-size); line-height: var(--type-h4-line); letter-spacing: var(--type-h4-track); }
.site-dl--wide dd { grid-column: 5 / span 8; max-width: 72ch; font-size: var(--type-body-size); line-height: var(--type-body-line); }

/* Preguntas agrupadas por tema (Ayuda): rótulo del grupo sobre su primera pregunta. */
.site-faq__topic { padding: var(--space-8) 0 var(--space-2); border-bottom: var(--border-hair) solid var(--color-border-strong); font-family: var(--font-mono); font-size: var(--type-kicker-size); line-height: var(--type-kicker-line); letter-spacing: var(--type-kicker-track); text-transform: uppercase; font-weight: var(--weight-regular); color: var(--color-text-3); scroll-margin-top: calc(var(--site-top-h) + var(--space-6)); }
.site-faq > .site-faq__topic:first-child { padding-top: var(--space-4); }

/* Canales en las páginas estáticas: título enlazado y ayuda de integración bajo el texto. */
.site-channels h3 a { color: inherit; text-decoration: none; }
.site-channels h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-channels .pricing-integration-fee { font-size: var(--type-sm-size); line-height: 19px; color: var(--color-text-3); }
.site-sec__aside { grid-column: 8 / span 5; display: grid; gap: var(--space-2); font-size: var(--type-sm-size); line-height: 20px; color: var(--color-text-2); }

/* Pasos: 2, 3 o 4 columnas según la página. */
.site-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Panel de condiciones (voz, ayuda de integración): explicación a la izquierda y texto a la derecha, sobre regla. */
.site-panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-4); padding-top: var(--space-5); border-top: var(--border-rule) solid var(--color-rule); }
.site-panel__title { grid-column: 1 / span 4; font-size: var(--type-h3-size); line-height: var(--type-h3-line); letter-spacing: var(--type-h3-track); font-weight: var(--weight-semibold); }
.site-panel__body { grid-column: 5 / span 8; display: grid; gap: var(--space-3); justify-items: start; font-size: var(--type-body-size); line-height: var(--type-body-line); color: var(--color-text-2); }
.site-panel__body p { max-width: 72ch; }

/* Nota «Conviene saber»: regla de tinta a la izquierda sobre papel. */
.site-callout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-6) 0; border-left: var(--border-mark) solid var(--color-text); background: var(--color-bg-subtle); }
.site-callout > div:first-child { grid-column: 1 / span 4; display: grid; gap: var(--space-3); align-content: start; padding-left: var(--space-6); }
.site-callout > div:last-child { grid-column: 5 / span 8; display: grid; gap: var(--space-4); justify-items: start; }
.site-callout h2 { font-size: var(--type-h3-size); line-height: var(--type-h3-line); letter-spacing: var(--type-h3-track); font-weight: var(--weight-semibold); }
.site-callout > div:last-child p { max-width: 64ch; font-size: var(--type-body-size); line-height: var(--type-body-line); color: var(--color-text-2); }

/* Enlaces relacionados sin descripción: el texto ocupa la fila. */
.site-related small:empty { display: none; }
.site-related a { grid-template-columns: 56px minmax(0, 1fr) 24px; }
@media (max-width: 960px) { .site-related a { grid-template-columns: 44px minmax(0, 1fr) 20px; } .site-related .i { grid-column: 3; grid-row: 1; } }
.site-sec > .site-wrap > h2.kicker { margin-bottom: var(--space-4); }

/* ---------- Precios estáticos ---------------------------------------- */
/* La cabecera de la página lleva la moneda y cómo se factura; la tabla empieza justo debajo. */
.site-pricing--page .ptable { margin-top: var(--space-16); }
.site-pricing__cycle { max-width: 46ch; font-size: var(--type-sm-size); line-height: 19px; color: var(--color-text-2); }
.plan__alt { display: inline-block; margin-top: var(--space-3); font-size: var(--type-xs-size); line-height: 16px; font-weight: var(--weight-medium); color: inherit; text-underline-offset: 3px; }
.ptable .is-rec .plan__alt, .ptable-m__plan.is-rec .plan__alt { color: var(--color-on-action); }
.pricing-mini-list li:has(.pricing-integration-fee) { grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr); }
.pricing-mini-list .pricing-integration-fee { margin: 0; font-size: var(--type-sm-size); line-height: 19px; color: var(--color-text-3); }
.pricing-mini-list .pricing-integration-fee a { color: var(--color-text); font-weight: var(--weight-semibold); }

/* ---------- Legales: índice fijo a la izquierda y texto a 64 caracteres ---------- */
.site-legal { align-items: start; }
.site-legal__aside { grid-column: 1 / span 3; position: sticky; top: calc(var(--site-top-h) + var(--space-6)); }
.site-legal__toc { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border-rule) solid var(--color-rule); }
.site-legal__toc ol { display: grid; }
.site-legal__toc a { display: grid; grid-template-columns: 32px minmax(0, 1fr); padding: 7px 0; border-bottom: var(--border-hair) solid var(--color-border); font-size: var(--type-sm-size); line-height: 19px; color: var(--color-text-2); text-decoration: none; }
.site-legal__toc a:hover { color: var(--color-text); }
.site-legal__toc a span { font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--color-text-3); }
.site-legal__body { grid-column: 5 / span 8; max-width: 760px; }
.site-legal__updated { padding-bottom: var(--space-3); border-bottom: var(--border-hair) solid var(--color-border); font-size: var(--type-sm-size); color: var(--color-text-3); }
.site-legal__block { margin-top: var(--space-10); }
.site-legal__block h2 { display: flex; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-4); font-size: var(--type-h3-size); line-height: var(--type-h3-line); letter-spacing: var(--type-h3-track); font-weight: var(--weight-semibold); }
.site-legal__n { font-family: var(--font-mono); font-size: var(--type-mono-size); font-weight: var(--weight-regular); color: var(--color-text-3); }
.site-legal__block p { max-width: var(--measure); margin-top: var(--space-3); font-size: var(--type-body-size); line-height: var(--type-body-line); color: var(--color-text-2); overflow-wrap: anywhere; }
.site-legal__owner { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0 0 var(--space-4); border-top: var(--border-hair) solid var(--color-border-strong); }
.site-legal__owner dt, .site-legal__owner dd { margin: 0; padding: 9px 0; border-bottom: var(--border-hair) solid var(--color-border); font-size: var(--type-ui-size); line-height: 20px; }
.site-legal__owner dt { padding-right: var(--space-6); color: var(--color-text-3); }
.site-legal__owner dd { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }


/* ---------- Responsive ----------------------------------------------- */
@media (max-width: 1100px) {
  .site-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
}
@media (max-width: 960px) {
  .site-page-hero { padding-top: var(--space-6); }
  .site-page-hero__grid { margin-top: var(--space-8); }
  .site-page-hero h1 { font-size: clamp(40px, 10vw, 56px); }
  .site-page-hero__lede { font-size: 20px; }
  .site-page-hero__art { order: 3; }
  .site-sec--tight { margin-top: var(--space-20); }
  .site-steps--2, .site-steps--4 { grid-template-columns: minmax(0, 1fr); }
  .site-panel, .site-callout { grid-template-columns: minmax(0, 1fr); }
  .site-panel > *, .site-callout > * { grid-column: 1 / -1 !important; }
  .site-callout { padding: var(--space-5) var(--space-5) var(--space-5) 0; }
  .site-callout > div { padding-left: var(--space-5) !important; }
  .site-legal__aside { position: static; }
  .site-legal__body { max-width: none; margin-top: var(--space-10); }
}
@media (max-width: 960px) {
  .site-dl--wide > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
  .site-dl--wide :is(dt, dd) { grid-column: 1 / -1; }
  .site-page-hero__art .site-topics, .site-page-hero__art .site-answer { max-width: 440px; }
}
@media (max-width: 480px) {
  .site-legal__owner { grid-template-columns: minmax(0, 1fr); }
  .site-legal__owner dt { padding-bottom: 0; border-bottom: 0; }
  .pricing-mini-list li:has(.pricing-integration-fee) { grid-template-columns: minmax(0, 1fr); }
}