/* ===================== Product Shell de las páginas públicas (FLUYO-SHELL-001) =====================
   /ejemplos, /docs, las legales, soporte y el 404. Se cargan DESPUÉS de identity.css y system.css, como el Viewer
   (decisión 130): los colores, voces, radios, alturas y sombras salen de los tokens del producto; aquí solo se coloca
   y se fija la escala de LECTURA (una página se lee; el editor se maneja). Ningún valor de color suelto fuera de :root.

   Lo que comparten con el editor: tokens, marca, voces (Playfair = significado, Plex Mono = lo demás), botones,
   rótulos y el marco del lienzo. Lo que NO: la densidad de herramienta, el tema oscuro de la interfaz (las páginas
   son papel, como el Viewer) ni el runtime.
   Idiomas: propiedades lógicas (inline/block) y nada de anchos fijos en texto. Las pilas tipográficas por idioma
   (ja, zh-Hans) son de FLUYO-I18N-002 · S4 en system.css; las de aquí son tokens que S4 puede redefinir bajo :lang(). */

:root{
  /* ---- Ancho ---- */
  --page-wide:1120px;          /* contenedor: cabecera, contenido ancho (galería) y pie */
  --page-read:38rem;           /* columna de lectura: ≈ 70 caracteres de la mono de lectura. En rem y no en ch, porque ch
                                  se mide con la fuente de cada elemento (en un h2 de Playfair a 24 px, 68ch eran ~1 000 px) */
  --page-gutter:24px;
  /* ---- Ritmo: la escala del sistema (--s-1…--s-5) más tres pasos de página ---- */
  --s-6:32px; --s-7:48px; --s-8:64px;
  /* ---- Escala de lectura ---- */
  --fs-page-h1:34px;
  --fs-page-h2:24px;
  --fs-page-h2-item:21px;      /* título de un elemento de galería */
  --fs-page-h3:var(--fs-label);
  --fs-page-body:14.5px;
  --fs-page-lead:16px;
  --fs-page-small:12px;
  --fs-page-code:13px;
  --lh-page:1.7;
  /* ---- Rótulos: mayúsculas y espaciado. En CJK no hay mayúsculas: I18N-002 · S4 los redefine bajo :lang() ---- */
  --case-kicker:uppercase;
  --track-kicker:var(--track-micro);
  /* ---- Lienzo: un diagrama mostrado en una página lleva el fondo del tema oscuro del documento (THEMES.dark.bg,
     js/config.js), enmarcado como en el editor (decisión 124). Es contenido, no chrome. ---- */
  --canvas-dark:#161616;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--surface); color:var(--ink);
  font:400 var(--fs-page-body)/var(--lh-page) var(--font-mono);
}
main{ flex:1 0 auto; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
:focus-visible{ outline:var(--focus); outline-offset:2px; }

/* Ir al contenido: invisible hasta que llega el foco del teclado. */
.skip{
  position:absolute; inset-inline-start:var(--s-2); top:var(--s-2); z-index:20;
  transform:translateY(-200%); padding:var(--s-2) var(--s-3);
  background:var(--surface-raised); color:var(--ink); border:1px solid var(--rule-2); border-radius:var(--r-sm);
  font:500 var(--fs-ui)/1 var(--font-mono); text-decoration:none;
}
.skip:focus{ transform:none; }

/* ---- Contenedor: la marca, el título y el pie comparten el mismo borde de inicio ---- */
.bar, .wrap{ width:min(var(--page-wide), calc(100% - 2 * var(--page-gutter))); margin-inline:auto; }
.wrap{ padding-block:var(--s-7) 0; }
.wrap > *{ max-inline-size:var(--page-read); }
.wrap > .gallery{ max-inline-size:none; }

/* ===================== Cabecera ===================== */
.siteHead{
  position:sticky; top:0; z-index:10;
  background:var(--surface); border-block-end:1px solid var(--rule-2);
}
/* 50 px con el filete dentro, como la cabecera del editor y la del Viewer (border-box). */
.siteHead .bar{ display:flex; align-items:center; gap:var(--s-2); min-height:calc(var(--hdr-h) - 1px); }
/* Marca: la del editor y el Viewer (styles.css, share.css): símbolo Ruta + «fluyo» (identity.css, FLUYO-BRAND-RUTA-001). */
.siteHead .logo{
  display:flex; align-items:center; gap:calc(8em / 21); flex:none; margin-inline-end:var(--s-4);
  font-family:var(--font-serif); font-weight:400; font-size:var(--fs-display); line-height:1; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none;
}
.siteNav{ display:flex; align-items:center; gap:var(--s-1); min-width:0; }
.siteNav a{
  display:inline-flex; align-items:center; min-height:var(--ctl-h); padding:0 var(--s-2);
  border-block-end:2px solid transparent;
  font:500 var(--fs-ui)/1 var(--font-mono); color:var(--ink-3); text-decoration:none; white-space:nowrap;
}
.siteNav a:hover{ color:var(--ink); }
.siteNav a[aria-current="page"]{ color:var(--ink); border-block-end-color:var(--active); }
.siteOpen{ margin-inline-start:auto; }

/* ===================== Botones (los de system.css, para enlaces) =====================
   .btn = secundario (papel levantado con borde) · .btn.primary = terracota, una por vista · .btn.ghost = sin caja. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--ctl-h); padding:0 calc(var(--ctl-pad) + 2px);
  background:var(--surface-raised); color:var(--ink); border:1px solid var(--rule-2); border-radius:var(--r-sm);
  font:500 var(--fs-ui)/1 var(--font-mono); text-decoration:none; white-space:nowrap;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover{ background:var(--surface-hover); border-color:var(--rule-hover); color:var(--ink); }
.btn:active{ background:var(--surface-sunken); }
.btn.primary{ background:var(--attention-fill); border-color:var(--attention-fill); color:var(--ink-inverse); }
.btn.primary:hover{ background:var(--attention-fill-hover); border-color:var(--attention-fill-hover); color:var(--ink-inverse); }
.btn.ghost{ background:transparent; border-color:transparent; color:var(--ink-2); }
.btn.ghost:hover{ background:var(--hover-veil); border-color:transparent; color:var(--ink); }
.btn.ghost:active{ background:var(--press-veil); }

/* ===================== Tipografía de lectura ===================== */
h1, h2{ font-family:var(--font-serif); font-weight:400; color:var(--ink); }
h1{ font-size:var(--fs-page-h1); line-height:1.15; letter-spacing:-.01em; margin:0 0 var(--s-4); }
h2{
  font-size:var(--fs-page-h2); line-height:1.25; margin:var(--s-7) 0 var(--s-3);
  padding-block-start:var(--s-5); border-block-start:1px solid var(--rule);
}
h3{
  font:500 var(--fs-page-h3)/1.4 var(--font-mono); letter-spacing:var(--track-kicker); text-transform:var(--case-kicker);
  color:var(--ink-3); margin:var(--s-6) 0 var(--s-2);
}
h4{ font:500 var(--fs-page-body)/1.5 var(--font-mono); color:var(--ink); margin:var(--s-5) 0 var(--s-2); }
p{ margin:0 0 var(--s-4); color:var(--ink-2); }
.lead{ font-size:var(--fs-page-lead); line-height:1.6; color:var(--ink); margin-block-end:var(--s-5); }
ul, ol{ margin:0 0 var(--s-4); padding-inline-start:var(--s-5); color:var(--ink-2); }
li{ margin-block-end:var(--s-2); }
li::marker{ color:var(--ink-3); }
strong, b{ color:var(--ink); font-weight:500; }
a{
  color:var(--ink); text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:var(--rule-hover); text-underline-offset:3px;
}
a:hover{ text-decoration-color:var(--ink); }
code{
  font:400 var(--fs-page-code)/1.5 var(--font-mono); color:var(--ink);
  background:var(--surface-sunken); border-radius:var(--r-xs); padding:1px 4px; overflow-wrap:anywhere;
}
pre{
  margin:0 0 var(--s-5); padding:var(--s-3) var(--s-4); overflow-x:auto;
  background:var(--surface-raised); border:1px solid var(--rule); border-radius:var(--r-md);
}
pre code{ display:block; background:none; padding:0; border-radius:0; line-height:1.65; overflow-wrap:normal; white-space:pre; }
kbd{ font:500 var(--fs-label)/1 var(--font-mono); padding:2px 5px; }
hr{ border:none; border-block-start:1px solid var(--rule); margin:var(--s-7) 0; }

/* Tablas: nunca ensanchan la página; si no caben, se desplazan dentro de su caja. */
table{ display:block; overflow-x:auto; width:100%; border-collapse:collapse; margin:0 0 var(--s-5); font-size:var(--fs-page-code); }
th, td{ text-align:start; vertical-align:top; padding:var(--s-2) var(--s-3); border-block-end:1px solid var(--rule); }
th{
  font:500 var(--fs-micro)/1.4 var(--font-mono); letter-spacing:var(--track-kicker); text-transform:var(--case-kicker);
  color:var(--ink-3); border-block-end-color:var(--rule-2);
}
td{ color:var(--ink-2); }
td code{ white-space:nowrap; }

/* Nota: un aparte, sin borde de color. */
.note{ background:var(--surface-sunken); border-radius:var(--r-md); padding:var(--s-3) var(--s-4); margin:0 0 var(--s-5); }
.note p:last-child{ margin-block-end:0; }

/* ===================== Galería (estructura; el contenido es de FLUYO-EXAMPLES-001) =====================
   Filetes y aire en vez de tarjetas: el único marco es el del lienzo. */
.gallery{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap:var(--s-7) var(--s-6); margin:var(--s-5) 0 var(--s-7);
}
.card{ display:flex; flex-direction:column; min-width:0; }
.card .preview{
  display:block; padding:var(--s-4); background:var(--canvas-dark);
  border-radius:var(--r-md); box-shadow:var(--shadow-frame);
}
.card .preview img{ display:block; width:100%; height:auto; aspect-ratio:16 / 7; object-fit:contain; }
.card .body{ display:flex; flex-direction:column; flex:1; padding-block-start:var(--s-4); }
.card h2{ font-size:var(--fs-page-h2-item); margin:0 0 var(--s-2); padding:0; border:none; }
.card p{ flex:1; }
.card .actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }
.card .actions .meta{ margin-inline-start:auto; font-size:var(--fs-label); }
/* Qué se aprende y las Historias: la acción principal es reproducir (▶), una por Historia, porque el Viewer reproduce la primera. */
.card .learn{ flex:none; color:var(--ink-2); }
.card .stories{ list-style:none; margin:0 0 var(--s-3); padding:0; display:flex; flex-direction:column; gap:var(--s-2); }
.card .stories .btn{ display:flex; width:100%; justify-content:flex-start; text-align:start; }
.card .stories .kind{ margin-inline-start:auto; padding-inline-start:var(--s-3); font:400 var(--fs-label)/1.4 var(--font-mono); opacity:.8; }

/* ===================== Estado: 404 ===================== */
.state{ padding-block:var(--s-8); }
.state .kicker{ display:block; margin-block-end:var(--s-3); font-size:var(--fs-label); letter-spacing:var(--track-kicker); text-transform:var(--case-kicker); }
.state .actions{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-block-start:var(--s-5); }

/* ===================== Pie: lo legal y el proyecto, igual en todas las páginas ===================== */
.siteFoot{ margin-block-start:var(--s-8); border-block-start:1px solid var(--rule); }
.siteFoot .bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-1) var(--s-4);
  padding-block:var(--s-4) var(--s-5);
  font:400 var(--fs-label)/1.6 var(--font-mono); color:var(--ink-3);
}
.siteFoot p{ margin:0; color:inherit; }
.siteFoot nav{ display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-4); }
.siteFoot a{ display:inline-flex; align-items:center; gap:2px; color:var(--ink-3); text-decoration:none; }
.siteFoot a:hover, .siteFoot a[aria-current="page"]{ color:var(--ink); }
.siteFoot a[aria-current="page"]{ text-decoration:underline; text-decoration-color:var(--active); text-underline-offset:3px; }
.siteFoot .ic{ width:12px; height:12px; }
.siteLang{ margin-inline-start:auto; }

/* ===================== Responsive ===================== */
@media (max-width:620px){
  :root{ --page-gutter:16px; --fs-page-h1:28px; --fs-page-h2:21px; --fs-page-h2-item:19px; --fs-page-body:14px; --fs-page-lead:15px; }
  .wrap{ padding-block-start:var(--s-6); }
  h2{ margin-block-start:var(--s-6); }
  .siteHead .logo{ margin-inline-end:var(--s-2); }
  .siteHead .logo .still{ display:inline; } .siteHead .logo :is(.loop, .loop *){ display:none; animation:none; }   /* donde iban sin puntos: el símbolo fijo */
  .card .preview{ padding:var(--s-3); }
  .siteLang{ margin-inline-start:0; }
}
/* Sin sitio para el texto: «Abrir Fluyo» se queda en icono, con su nombre accesible (como «Abrir» en el Viewer). */
@media (max-width:440px){
  .siteOpen{ width:var(--ctl-h); padding:0; }
  .siteOpen > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
/* Con el dedo: objetivos de 44 px (FLUYO-018.17, D6) en la navegación, las acciones y el pie. */
@media (pointer:coarse){
  .siteNav a, .btn{ min-height:var(--ctl-h-touch); }
  .siteOpen{ min-width:var(--ctl-h-touch); }
  .siteFoot a{ min-height:var(--ctl-h-touch); }
  .siteFoot .bar{ row-gap:0; }
}
@media (pointer:coarse) and (max-width:440px){ .siteOpen{ width:var(--ctl-h-touch); } }
@media (prefers-reduced-motion:reduce){ .btn{ transition:none; } }