/* ============================================================
   Guías de los agentes — estilo editorial (referencia: documentos de Claude Docs / blog de Anthropic)
   Serif en títulos (Source Serif 4), sans en texto (Inter), fondo blanco, tablas crema, mucho aire.
   Fuentes OFL incluidas en assets/fonts.

   ESCALA TIPOGRÁFICA (única): todo el documento usa solo estos 5 tamaños, definidos en :root.
     --t-display  título del documento (h1)
     --t-h2       títulos de sección y cifras grandes
     --t-body     prosa (párrafos, listas, avisos, bajada del título), subtítulos h3 y nombres destacados
     --t-ui       interfaz: tablas, tarjetas, diagramas, conversaciones, botones, navegación
     --t-meta     etiquetas, chips, código en bloque, pies
   Regla: la prosa va en serif y la interfaz en sans; no se declaran tamaños sueltos fuera de esta escala.

   DISTRIBUCIÓN: cabecera y cuerpo comparten el mismo contenedor (--page-w); el ritmo vertical usa
   --space-block entre bloques y --space-section entre secciones.
   ============================================================ */
@font-face{ font-family:'Source Serif 4'; src:url('fonts/SourceSerif4.ttf') format('truetype'); font-weight:200 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Source Serif 4'; src:url('fonts/SourceSerif4-Italic.ttf') format('truetype'); font-weight:200 900; font-style:italic; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('fonts/Inter.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('fonts/Inter-Italic.ttf') format('truetype'); font-weight:100 900; font-style:italic; font-display:swap; }

:root{
  --t-display:clamp(34px,5.2vw,52px); --t-h2:clamp(26px,3.2vw,32px); --t-body:18px; --t-ui:15px; --t-meta:13px; 
  --lh-body:1.6; --lh-ui:1.5; --lh-meta:1.4;
  --gut:clamp(16px,4vw,48px); --toc-w:240px; --col-gap:72px; --read-w:720px; --page-w:calc(var(--toc-w) + var(--col-gap) + var(--read-w));
  --space-block:28px; --space-section:60px; --bar-h:64px;
  --ink:#141413; --text:#2b2a27; --muted:#5e5d59; --soft:#87867f;
  --oat:#f0eee6; --cream:#f3f1ea; --ivory:#faf9f5; --line:#e6e3d8;
  --clay:#d97757; --clay-d:#b9532f; --olive:var(--ink); --sky:#6a9bcb; --fig:#c46686;
  --serif:'Source Serif 4','Georgia',serif; --sans:'Inter','Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,'Cascadia Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-padding-top:88px; -webkit-text-size-adjust:100%; scrollbar-gutter:stable; }
body{ background:var(--ivory); color:var(--text); font-family:var(--sans); font-size:var(--t-body); line-height:var(--lh-body); font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

/* ---------- scroll suave (Lenis) ---------- */
html.lenis, html.lenis body{ height:auto; }
html.lenis{ scroll-behavior:auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch]{ overscroll-behavior:contain; }
.lenis.lenis-smooth iframe{ pointer-events:none; }
@media (prefers-reduced-motion:no-preference){ html:not(.lenis){ scroll-behavior:smooth; } }

/* ---------- barra de scroll ---------- */
/* Chrome, Edge y Safari: fina, redonda, con aire alrededor (el borde transparente separa el pulgar del extremo). */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width:14px; height:14px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-corner{ background:transparent; }
  ::-webkit-scrollbar-thumb{ background:#d8d4c6; background-clip:padding-box; border:4px solid transparent; border-radius:99px; min-height:56px; transition:background-color .2s; }
  ::-webkit-scrollbar-thumb:hover{ background:#b9b4a2; background-clip:padding-box; }
  ::-webkit-scrollbar-thumb:active{ background:var(--clay); background-clip:padding-box; }
  /* El scroll de la página, con una guía sutil a su lado, como en los documentos de referencia */
  html::-webkit-scrollbar-track{ background:linear-gradient(to right, var(--line) 0, var(--line) 1px, transparent 1px); }
}
/* Firefox y navegadores sin ::-webkit-scrollbar */
@supports not selector(::-webkit-scrollbar){
  *{ scrollbar-width:thin; scrollbar-color:#cfcabb transparent; }
}

/* ---------- barra superior ---------- */
.top{ position:sticky; top:0; z-index:30; padding:0 var(--gut); background:rgba(250,249,245,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); font-size:var(--t-ui); line-height:var(--lh-ui); }
.top-in{ max-width:var(--page-w); margin:0 auto; height:var(--bar-h); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); font-weight:500; }
.brand img{ height:28px; width:auto; }
.brand > span{ font-family:var(--serif); font-weight:400; font-size:var(--t-ui); line-height:1; letter-spacing:-.01em; color:var(--ink); padding-left:14px; border-left:1px solid var(--line); }
.top nav{ display:flex; align-items:center; gap:20px; }
.top nav a{ text-decoration:none; color:var(--muted); }
.top nav a:hover{ color:var(--ink); }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:99px; background:var(--ink); color:#fff !important; font-weight:500; font-size:var(--t-ui); line-height:var(--lh-ui); text-decoration:none; transition:background .2s; white-space:nowrap; }
.btn:hover{ background:#3d3d3a; }
.btn.ghost{ background:var(--oat); color:var(--ink) !important; } .btn.ghost:hover{ background:#e6e3d6; }
.btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- botón de GitHub: el relleno sube como una ola, el icono se agita y la flecha sale en diagonal ---------- */
.top nav .gh{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 12px; border-radius:99px; background:var(--oat); color:var(--ink);
  font-weight:500; font-size:var(--t-ui); line-height:var(--lh-ui); text-decoration:none; white-space:nowrap;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, color .3s .08s; }
.gh-fill{ position:absolute; z-index:-1; left:-12%; right:-12%; top:0; height:100%; background:var(--ink); border-radius:50% 50% 0 0 / 60% 60% 0 0; transform:translateY(104%);
  transition:transform .55s cubic-bezier(.2,.8,.2,1), border-radius .55s cubic-bezier(.2,.8,.2,1); }
.gh-ic{ width:17px; height:17px; flex:none; transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.gh-ar{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.5; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.top nav .gh:hover, .top nav .gh:focus-visible{ color:#fff; transform:translateY(-2px); box-shadow:0 8px 22px rgba(20,20,19,.24); }
.gh:hover .gh-fill, .gh:focus-visible .gh-fill{ transform:translateY(0); border-radius:0; }
.gh:hover .gh-ic, .gh:focus-visible .gh-ic{ transform:scale(1.12); animation:gh-agitar .7s ease-in-out; }
.gh:hover .gh-ar, .gh:focus-visible .gh-ar{ transform:translate(3px,-3px); opacity:1; }
.top nav .gh:active{ transform:translateY(0) scale(.96); box-shadow:none; }
.top nav .gh:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
@keyframes gh-agitar{ 0%{ transform:rotate(0) scale(1); } 20%{ transform:rotate(-16deg) scale(1.2); } 45%{ transform:rotate(12deg) scale(1.2); } 70%{ transform:rotate(-6deg) scale(1.15); } 100%{ transform:rotate(0) scale(1.12); } }
@media (prefers-reduced-motion:reduce){
  .top nav .gh, .gh *{ transition-duration:.01ms !important; transition-delay:0s !important; animation:none !important; }
  .top nav .gh:hover, .top nav .gh:focus-visible{ transform:none; }
}

/* ---------- estructura de la guía ---------- */
.shell{ display:grid; grid-template-columns:var(--toc-w) minmax(0,var(--read-w)); column-gap:var(--col-gap); max-width:calc(var(--page-w) + 2 * var(--gut)); margin:0 auto; padding:52px var(--gut) 96px; }
.toc{ position:sticky; top:calc(var(--bar-h) + 32px); align-self:start; font-size:var(--t-ui); line-height:var(--lh-ui); max-height:calc(100vh - var(--bar-h) - 56px); overflow:auto; padding-right:6px; }
.toc p{ font-size:var(--t-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); margin-bottom:12px; padding-left:12px; }
.toc ol{ list-style:none; display:flex; flex-direction:column; gap:2px; padding:0; }
.toc li{ margin:0; padding:0; }
.toc a{ display:block; padding:7px 12px; border-radius:8px; text-decoration:none; color:var(--muted); transition:background-color .15s, color .15s; }
.toc a:hover{ color:var(--ink); background:var(--cream); }
.toc a.on{ color:var(--ink); background:var(--oat); font-weight:500; }
article{ min-width:0; }

/* ---------- cabecera del documento ---------- */
.kicker{ font-size:var(--t-ui); line-height:var(--lh-ui); font-weight:500; color:var(--muted); margin-bottom:16px; }
h1{ font-family:var(--serif); font-weight:400; font-size:var(--t-display); line-height:1.1; letter-spacing:-.015em; color:var(--ink); }
.dek{ margin-top:20px; font-size:var(--t-body); line-height:1.5; color:var(--muted); font-family:var(--serif); max-width:34em; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; }
.chips > span{ background:var(--oat); color:#3d3d3a; font-size:var(--t-meta); line-height:1; padding:8px 13px; border-radius:99px; }

/* ---------- texto ---------- */
h2{ font-family:var(--serif); font-weight:400; font-size:var(--t-h2); line-height:1.2; letter-spacing:-.01em; color:var(--ink); margin:var(--space-section) 0 18px; }
article > .chips + h2{ margin-top:48px; }
h3{ font-family:var(--serif); font-weight:600; font-size:var(--t-body); line-height:1.4; color:var(--ink); margin:36px 0 10px; }
h4{ font-family:var(--sans); font-weight:600; font-size:var(--t-ui); line-height:1.4; color:var(--muted); margin:26px 0 8px; }
p{ margin:0 0 1.05em; }
/* la prosa (párrafos y listas sueltos, y el texto de los avisos) va en serif, como en el blog de Anthropic; tablas, tarjetas y demás interfaz siguen en sans */
article > :is(p, ul, ol):not([class]), .callout :is(p, ul, ol){ font-family:var(--serif); }
strong{ font-weight:600; color:var(--ink); }
/* enlaces del texto (Animated Link, ruixen.ui): subrayado tenue y, al pasar el cursor, una línea de color que entra desde la izquierda y sale por la derecha;
   una flecha diagonal sube a la esquina del enlace. El subrayado va como fondo, así que sigue cada línea si el enlace se parte en dos. */
a.l{ position:relative; color:var(--ink); text-decoration:none; padding-bottom:1px;
  background:linear-gradient(rgba(20,20,19,.4), rgba(20,20,19,.4)) 0 100% / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) 100% 100% / 0 2px no-repeat;
  transition:background-size .45s cubic-bezier(.2,.8,.2,1), background-position 0s .45s, color .2s; }
a.l:hover, a.l:focus-visible{ color:var(--ink); background-position:0 100%, 0 100%; background-size:100% 1px, 100% 2px;
  transition:background-size .45s cubic-bezier(.2,.8,.2,1), background-position 0s, color .2s; }
a.l:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; border-radius:3px; }
/* la flecha es «en línea» y no ocupa ancho (margen negativo): queda al final de la última línea aunque el enlace se parta, sin mover el texto */
a.l::after{ content:""; display:inline-block; position:relative; top:-.62em; width:.62em; height:.62em; margin:0 -.62em 0 .2em; background:currentColor; opacity:0; transform:translate(-3px, 5px);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:opacity .25s, transform .4s cubic-bezier(.3,1.5,.4,1); pointer-events:none; }
a.l:hover::after, a.l:focus-visible::after{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ a.l, a.l:hover, a.l::after{ transition-duration:.01ms !important; transition-delay:0s !important; } }
ul,ol{ margin:0 0 1.2em; padding-left:1.35em; }
li{ margin:0 0 .5em; padding-left:.25em; }
li::marker{ color:var(--soft); }
li > ul, li > ol{ margin:.5em 0 .3em; }
code{ font-family:var(--mono); font-size:var(--t-ui); background:var(--oat); color:#3b3a36; padding:.12em .38em; border-radius:5px; }
code{ overflow-wrap:anywhere; }
pre{ margin:0 0 var(--space-block); background:var(--ivory); border:1px solid var(--line); border-radius:12px; padding:18px 22px; overflow:auto; font-family:var(--mono); font-size:var(--t-meta); line-height:1.65; color:#2b2a27; }
pre code{ background:none; padding:0; font-size:inherit; overflow-wrap:normal; }
td code, th code, .cards code, .flow code, .lanes code, .chat code, .stats code, .item code, .ag code, .more code{ font-size:var(--t-meta); }
h2 code, h3 code, h4 code{ font-size:inherit; }

/* ---------- tablas ---------- */
.tw{ margin:0 0 var(--space-block); overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
table{ width:100%; border-collapse:collapse; font-size:var(--t-ui); line-height:var(--lh-ui); }
th{ background:var(--cream); text-align:left; font-weight:500; color:var(--muted); padding:12px 16px; }
td{ padding:12px 16px; border-top:1px solid var(--line); vertical-align:top; }
td:first-child{ font-weight:500; color:var(--ink); }

/* ---------- avisos ---------- */
.callout{ margin:0 0 var(--space-block); padding:20px 24px 8px; border-radius:12px; background:var(--cream); }
.callout > .t{ display:block; font-size:var(--t-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.callout p:last-child, .callout ul:last-child, .callout ol:last-child{ margin-bottom:.9em; }
/* los tres tipos de aviso comparten el mismo fondo neutro: los distingue la etiqueta, no el color; «importante» solo es un poco más oscuro */
.callout.importante{ background:var(--oat); } .callout.importante > .t{ color:var(--ink); }

/* ---------- cifras: columnas según cuántas son (y qué tan largas) ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:28px 0 var(--space-block); }
.stats.n2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.stats.n3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.stats.n4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.stats.n4.w{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.stats div{ padding:20px 22px; border-radius:12px; background:var(--cream); }
.stats b{ display:block; font-family:var(--serif); font-weight:400; font-size:var(--t-h2); line-height:1; color:var(--ink); letter-spacing:-.02em; }
.stats span{ display:block; margin-top:10px; font-size:var(--t-ui); line-height:var(--lh-ui); color:var(--muted); }

/* ---------- tarjetas: 2 si son 2 o 4, 3 en los demás casos ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:8px 0 var(--space-block); }
.cards.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cards.c1{ grid-template-columns:1fr; }
.cards div{ padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:var(--t-ui); line-height:var(--lh-ui); }
.cards b{ display:block; font-weight:600; color:var(--ink); margin-bottom:6px; }
.cards span{ color:var(--muted); display:block; }

/* ---------- diagrama de pasos: una fila por 2–4 pasos, varias filas de 3 o 4 desde 5 ---------- */
.flow{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 32px; counter-reset:f; padding:0; margin:8px 0 var(--space-block); font-size:var(--t-ui); line-height:var(--lh-ui); }
.flow.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .flow.c3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.flow li{ position:relative; margin:0; padding:16px; border-radius:12px; background:var(--cream); counter-increment:f; }
.flow li::before{ content:counter(f); display:grid; place-items:center; width:26px; height:26px; margin-bottom:12px; border-radius:50%; background:var(--ink); color:#fff; font-size:var(--t-meta); font-weight:600; line-height:1; }
.flow li:not(:last-child)::after{ content:""; position:absolute; right:-21px; top:calc(50% - 5px); width:10px; height:10px; border-top:2px solid var(--soft); border-right:2px solid var(--soft); transform:rotate(45deg); z-index:2; }
.flow.c2 li:nth-child(2n)::after, .flow.c3 li:nth-child(3n)::after, .flow.c4 li:nth-child(4n)::after{ display:none; }  /* sin flecha al final de cada fila */
.flow b{ display:block; font-weight:600; color:var(--ink); line-height:1.35; margin-bottom:6px; }
.flow span{ display:block; color:var(--muted); }
.flow.v{ grid-template-columns:1fr; }
.flow.v li{ display:grid; grid-template-columns:34px 1fr; column-gap:14px; align-items:start; }
.flow.v li::before{ margin:2px 0 0; grid-row:1 / span 2; }
.flow.v li:not(:last-child)::after{ display:none; }
.flow.v b{ margin:0 0 4px; }

/* ---------- carriles: quién hace qué ---------- */
.lanes{ display:grid; gap:10px 16px; margin:8px 0 var(--space-block); padding:18px 20px; border-radius:12px; background:var(--ivory); border:1px solid var(--line); font-size:var(--t-ui); line-height:var(--lh-ui); }
.lanes .a{ text-align:center; font-size:var(--t-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding-bottom:2px; }
.lanes .s{ padding:12px 14px; border-radius:10px; background:#fff; border:1px solid var(--line); }
.lanes .s i{ display:inline-grid; place-items:center; width:20px; height:20px; margin-right:8px; border-radius:50%; font-style:normal; font-size:var(--t-meta); font-weight:600; color:#fff; vertical-align:-1px; line-height:1; }
/* carriles: se distinguen por la luminosidad del fondo (el tuyo, el del agente, el de un tercero), todos con la misma insignia */
.lanes .l0{ background:var(--oat); } .lanes .l1{ background:#fff; } .lanes .l2{ background:var(--cream); }
.lanes .s i{ background:var(--ink); }

/* ---------- Ejemplos de conversación, como se ven en el chat de la plataforma del agente (Claude o Perplexity) ---------- */
.chat{ --acc:var(--clay); margin:8px 0 var(--space-block); border:1px solid var(--line); border-radius:18px; background:#fff; overflow:hidden; font-size:var(--t-ui); line-height:var(--lh-ui); color:var(--ink); }
.cw-h{ display:flex; align-items:center; gap:10px; padding:12px 18px; background:var(--ivory); border-bottom:1px solid var(--line); }
.cw-h img{ width:22px; height:22px; border-radius:6px; }
.cw-h b{ font-weight:600; }
.cw-h span{ margin-left:auto; font-size:var(--t-meta); line-height:var(--lh-meta); color:var(--soft); }
.cw-b{ display:flex; flex-direction:column; gap:20px; padding:24px 20px 20px; }
.cw-m{ display:flex; max-width:88%; }
.cw-t{ min-width:0; }
.cw-t i{ display:inline-grid; place-items:center; width:20px; height:20px; margin-right:8px; border-radius:50%; font-style:normal; font-size:var(--t-meta); font-weight:600; color:#fff; vertical-align:-1px; line-height:1; background:var(--soft); }
.cw-m.u .cw-t i{ background:var(--acc); }
.cw-av{ width:22px; height:22px; border-radius:6px; }
.cw-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 18px 18px; padding:10px 10px 10px 18px; border:1px solid var(--line); background:#fff; color:var(--soft); box-shadow:0 2px 8px rgba(20,20,19,.05); }
.cw-send{ flex:none; display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--acc); color:#fff; }
.cw-send svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
/* Claude: tus mensajes en burbuja a la derecha; el agente responde sin burbuja, con el destello de Claude y letra con serifa */
.chat.claude .cw-m.u{ align-self:flex-end; }
.chat.claude .cw-m.u .cw-t{ background:var(--oat); padding:11px 18px; border-radius:20px 20px 6px 20px; }
.chat.claude .cw-m.a{ align-self:flex-start; gap:12px; }
.chat.claude .cw-m.a .cw-who{ flex:none; padding-top:2px; } .chat.claude .cw-who span{ display:none; }
.chat.claude .cw-m.a .cw-t{ font-family:var(--serif); font-size:var(--t-body); line-height:1.55; padding-top:1px; }
.chat.claude .cw-m.a .cw-t i{ font-family:var(--sans); font-size:var(--t-meta); }
.chat.claude .cw-in{ border-radius:20px; }
/* Perplexity: tu pregunta va como título, y la respuesta bajo una etiqueta turquesa, con filete a la izquierda */
.chat.pplx{ --acc:#20808d; }
.chat.pplx .cw-m{ max-width:100%; }
.chat.pplx .cw-m.u .cw-t{ font-size:var(--t-body); line-height:1.35; font-weight:500; padding-bottom:2px; }
.chat.pplx .cw-m.a{ flex-direction:column; gap:8px; padding-left:14px; border-left:2px solid var(--line); }
.chat.pplx .cw-who{ display:flex; align-items:center; gap:8px; font-size:var(--t-meta); line-height:1; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--acc); }
.chat.pplx .cw-av{ width:18px; height:18px; border-radius:5px; }
.chat.pplx .cw-m.a .cw-t i{ background:var(--acc); }
.chat.pplx .cw-m.a .cw-t{ font-size:var(--t-body); line-height:1.55; }
.chat.pplx .cw-m.a .cw-t i{ font-size:var(--t-meta); }
.chat.pplx .cw-in{ border-radius:99px; }


/* ---------- árbol de carpetas ---------- */
.tree{ white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:hidden; }      /* sin barra de desplazamiento horizontal: si una línea no cabe, pasa a la siguiente */
/* árbol de carpetas: mismo aspecto de consola que los bloques de comandos (fondo negro, texto claro, carpetas en negrita, comentarios atenuados) */
.tree{ background:#141413; border-color:#141413; color:#f0eee6; }
.tree code{ background:none; color:inherit; }
.tree, .code pre{ scrollbar-color:#55534e #141413; }
.tree .d{ color:#fff; font-weight:600; } .tree .c{ color:#8f8d85; }

/* ---------- pie del documento ---------- */
.more{ margin-top:80px; padding-top:28px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between; font-size:var(--t-ui); line-height:var(--lh-ui); color:var(--muted); }
.more nav{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- índice (portada del sitio) ---------- */
.banner{ position:relative; overflow:hidden; padding:0 var(--gut); background:var(--cream); }
.banner::before{ content:""; position:absolute; top:50%; right:calc((100% - var(--page-w)) / 2 - 140px); width:480px; height:480px; transform:translateY(-50%); border-radius:50%;
  background:repeating-radial-gradient(circle, transparent 0 34px, rgba(20,20,19,.09) 34px 35px);
  -webkit-mask-image:radial-gradient(circle, #000 20%, transparent 68%); mask-image:radial-gradient(circle, #000 20%, transparent 68%); pointer-events:none; }
.banner-in{ position:relative; max-width:var(--page-w); margin:0 auto; padding:84px 0 76px; }
.banner .dek{ margin-top:18px; max-width:40em; font-size:var(--t-body); line-height:1.6; }
/* con los iconos a la derecha, el párrafo no pasa de su columna: deja siempre un aire de al menos 56 px hasta ellos (en pantallas estrechas los iconos bajan y el texto usa todo el ancho) */
@media (min-width:1101px){ .banner .dek{ max-width:min(40em, calc(var(--page-w) - 360px - 56px)); } }
/* iconos de Claude y Perplexity flotando en 3D (derecha del banner): flotan siempre, siguen el cursor, giran y brillan al pasar el cursor; contraluz tenue de cada marca */
.banner-art{ position:absolute; top:50%; right:calc((100% - var(--page-w)) / 2 - 20px); width:360px; height:330px; transform:translateY(-50%); pointer-events:none; contain:layout style; }
.ico{ position:absolute; width:var(--s); height:var(--s); pointer-events:auto; perspective:700px; }
.ico-claude{ --s:158px; --glow:rgba(217,119,87,.6); --edge:#b9532f; --edge2:#8f3f24; left:26px; top:24px; }
.ico-pplx{ --s:132px; --glow:rgba(32,184,205,.5); --edge:#2a2a28; --edge2:#0d0d0c; left:188px; top:146px; }
.ico-glow{ position:absolute; inset:-38%; border-radius:50%; background:radial-gradient(circle, var(--glow) 0%, transparent 62%); opacity:.5; animation:ico-pulso 6s ease-in-out infinite; transition:opacity .8s ease, transform .8s ease; }
.ico-pplx .ico-glow{ animation-delay:-2.5s; }
@property --px{ syntax:'<number>'; inherits:false; initial-value:0; }
@property --py{ syntax:'<number>'; inherits:false; initial-value:0; }
@property --hs{ syntax:'<number>'; inherits:false; initial-value:1; }
@property --ax{ syntax:'<number>'; inherits:false; initial-value:0; }
@property --ay{ syntax:'<number>'; inherits:false; initial-value:1; }
.ico-tilt{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transform:rotateX(calc(var(--py) * -14deg)) rotateY(calc(var(--px) * 16deg)) scale(var(--hs, 1)); transition:transform .6s cubic-bezier(.22,.7,.2,1); }
.ico-spin{ width:100%; height:100%; transform-style:preserve-3d; }
.ico-float{ position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:ico-flota 7s ease-in-out infinite; }
.ico-pplx .ico-float{ animation-duration:8.6s; animation-delay:-3.4s; animation-direction:reverse; }
/* el canto: 24 láminas finas (una .ico-s por lámina) apiladas detrás de la cara y teñidas de --edge a --edge2. La cara se queda exactamente en z = 0: si se adelanta,
   la perspectiva la reescala y se ve borrosa. La última lámina lleva la sombra. El resultado es un bloque macizo de esquinas redondeadas, no capas sueltas. */
.ico{ --d:calc(var(--s) * .16); }
.ico-s{ position:absolute; inset:0; border-radius:23%; background:color-mix(in srgb, var(--edge2) calc(var(--k) / var(--n) * 100%), var(--edge)); transform:translateZ(calc(var(--d) * var(--k) / var(--n) * -1)); }
.ico:not(.anim) .ico-s:not(.b){ visibility:hidden; }       /* en reposo solo se dibujan las láminas base; al girar aparecen todas (en el ángulo 0 quedan detrás de la cara: sin saltos) */
/* sombra plana (no 3D): una elipse con degradado bajo el icono (fija: animarla costaba un cálculo por cuadro) */
.ico-sombra{ position:absolute; left:6%; right:2%; bottom:-24%; height:30%; border-radius:50%; background:radial-gradient(ellipse at center, rgba(20,20,19,.24) 0%, rgba(20,20,19,.08) 48%, transparent 74%); }
.ico-face{ position:relative; display:block; width:100%; height:100%; border-radius:23%; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px rgba(255,255,255,.1); }
.ico-face img{ display:block; width:100%; height:100%; object-fit:cover; }
.ico-face::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.4) 50%, transparent 62%); transform:translateX(-130%); }
/* el destello no es una animación continua (costaba un cálculo por cuadro): el script lo dispara cada pocos segundos con .brilla, y el giro con .anim */
.ico.brilla .ico-face::after{ animation:ico-brillo-hover 1.3s ease-in-out both; }
.ico:hover .ico-tilt{ --hs:1.12; }
.ico:hover .ico-glow{ opacity:.95; transform:scale(1.18); }
/* la animación de hover (giro + destello) la dispara el script con la clase .anim y no se corta: termina siempre antes de poder repetirse */
.ico.anim .ico-spin{ animation:ico-giro 1.7s cubic-bezier(.45,.05,.2,1) both; }
.ico.anim .ico-face::after{ animation:ico-brillo-hover 1.3s ease-in-out .2s both; }
@keyframes ico-flota{ 0%,100%{ transform:translateY(0) rotateX(7deg) rotateY(-12deg) rotateZ(-2deg); } 50%{ transform:translateY(-15px) rotateX(-6deg) rotateY(13deg) rotateZ(2deg); } }
@keyframes ico-pulso{ 0%,100%{ opacity:.45; } 50%{ opacity:.78; } }
@keyframes ico-brillo-hover{ from{ transform:translateX(-130%); } to{ transform:translateX(130%); } }
/* el eje (--ax, --ay) lo calcula el script según el movimiento del cursor; por omisión, giro horizontal */
@keyframes ico-giro{ from{ transform:rotate3d(var(--ax, 0), var(--ay, 1), 0, 0deg); } to{ transform:rotate3d(var(--ax, 0), var(--ay, 1), 0, 360deg); } }
/* fuera de la pantalla no se dibuja ni se anima (lo marca el script con IntersectionObserver) */
.banner-art.fuera{ visibility:hidden; }
.banner-art.fuera *, .banner-art.fuera *::after{ animation-play-state:paused !important; }
/* modo ligero (equipos lentos): flotación solo vertical y sin giros 3D, sin pulso ni destello, canto reducido incluso al girar */
@keyframes ico-flota-ligera{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.banner-art.ligero .ico-float{ animation-name:ico-flota-ligera; }
.banner-art.ligero .ico-glow{ animation:none !important; }
.banner-art.ligero .ico-glow{ opacity:.55; }
.banner-art.ligero .ico.brilla .ico-face::after{ animation:none !important; }
.banner-art.ligero .ico-s:not(.b){ visibility:hidden !important; }
@media (prefers-reduced-motion:reduce){ .banner-art *, .banner-art *::after{ animation:none !important; } .ico-tilt{ transition:none; } }
@media (max-width:1100px){
  .banner-in{ padding-bottom:0; }
  .banner-art{ position:relative; top:auto; right:auto; transform:none; width:300px; height:250px; margin:28px auto 36px; }
  .ico-claude{ --s:118px; left:20px; top:12px; } .ico-pplx{ --s:98px; left:150px; top:102px; }
}
/* pestañas (estilo Google) al pie del banner: el indicador desliza de una a otra */
.tabbar{ padding:0 var(--gut); border-bottom:1px solid var(--line); background:var(--ivory); }
.tabbar-in{ max-width:var(--page-w); margin:0 auto; }
.tabs{ display:none; position:relative; gap:4px; }
.js .tabs{ display:flex; }
.js .tabbar-in{ padding-top:8px; }
.tabs button{ appearance:none; border:0; background:none; font:inherit; font-family:var(--sans); font-weight:500; font-size:var(--t-ui); line-height:var(--lh-ui); color:var(--muted);
  padding:15px 22px 16px; border-radius:10px 10px 0 0; cursor:pointer; white-space:nowrap; transition:color .2s, background-color .2s; }
.tabs button:hover{ color:var(--ink); background:rgba(20,20,19,.05); }
.tabs button[aria-selected="true"]{ color:var(--ink); }
.tabs button:focus-visible{ outline:2px solid var(--clay); outline-offset:-2px; }
.tab-ind{ position:absolute; left:0; bottom:-1px; height:3px; width:var(--w,0px); transform:translateX(var(--x,0px)); background:var(--clay); border-radius:3px 3px 0 0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1); }
.panel[hidden]{ display:none; }
.js .panel:not([hidden]){ animation:panel-in .4s cubic-bezier(.2,.8,.2,1); }
@keyframes panel-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .tab-ind{ transition:none; } .js .panel:not([hidden]){ animation:none; } }
.home{ max-width:calc(var(--page-w) + 2 * var(--gut)); margin:0 auto; padding:56px var(--gut) 96px; }
.panel > h2:first-child{ margin-top:0; }
.home h2{ margin:var(--space-section) 0 8px; }
.home .sub{ color:var(--muted); margin-bottom:22px; max-width:40em; }
.agents{ display:grid; gap:0; margin-top:8px; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.ag{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.75fr) auto; gap:8px 28px; align-items:center; padding:20px 24px; font-size:var(--t-ui); line-height:var(--lh-ui); transition:background-color .2s; }
.ag + .ag{ border-top:1px solid var(--line); }
.ag{ position:relative; }
.ag:hover{ background:var(--ivory); }
/* toda la fila es el enlace a la guía: el enlace del título se estira sobre ella; el botón PDF queda por encima */
.ag-link{ color:inherit; text-decoration:none; transition:color .2s; }
.ag-link::after{ content:""; position:absolute; inset:0; }
.ag:hover .ag-link{ color:var(--ink); }
.ag-link:focus-visible{ outline:none; }
.ag-link:focus-visible::after{ outline:2px solid var(--clay); outline-offset:-2px; border-radius:14px; }
/* botón PDF: icono FileDown (AnimateIcons); al pasar el cursor se tiñe y el icono hace su animación: la hoja pulsa y la flecha baja */
.pdf{ position:relative; z-index:1; display:inline-grid; place-items:center; flex:none; width:42px; height:42px; border-radius:50%; background:var(--oat); color:var(--ink); text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s, color .3s, box-shadow .3s; }
.pdf-ic{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pdf-all{ transform-box:view-box; transform-origin:12px 12px; }
.pdf:hover, .pdf:focus-visible{ background:var(--ink); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,20,19,.25); }
.pdf:hover .pdf-all, .pdf:focus-visible .pdf-all{ animation:pdf-pulso .6s ease-in-out; }
.pdf:hover .pdf-arrow, .pdf:focus-visible .pdf-arrow{ animation:pdf-baja .6s ease-in-out; }
.pdf:active{ transform:translateY(0) scale(.92); box-shadow:none; }
.pdf:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
@keyframes pdf-pulso{ 0%{ transform:scale(1); } 40%{ transform:scale(1.08); } 75%{ transform:scale(.98); } 100%{ transform:scale(1); } }
@keyframes pdf-baja{ 0%{ transform:translateY(0); } 35%{ transform:translateY(1.5px); } 70%{ transform:translateY(-.4px); } 100%{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .pdf{ transition-duration:.01ms !important; } .pdf:hover, .pdf:focus-visible{ transform:none; } .pdf *{ animation:none !important; } }
.ag h3{ margin:0; font-family:var(--serif); font-weight:400; font-size:var(--t-body); line-height:1.25; }
.plat{ display:inline-flex; align-items:center; gap:6px; vertical-align:middle; }
.plat img{ width:16px; height:16px; flex:none; border-radius:4px; }
.ag .plat-top{ margin:0 0 6px; }
.ag .plat-bot{ margin-top:8px; }
.chips .plat{ vertical-align:top; } .chips .plat img{ margin:-2px 0; }
.ag small{ display:block; color:var(--soft); font-size:var(--t-meta); line-height:var(--lh-meta); margin-top:3px; }
.ag p{ margin:0; color:var(--muted); }
.ag p b{ display:block; color:var(--ink); font-weight:500; margin-bottom:2px; }
.ag .go{ display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.ag .go small{ margin:0 6px 0 0; }
footer.site{ border-top:1px solid var(--line); padding:26px var(--gut); font-size:var(--t-meta); line-height:var(--lh-meta); color:var(--soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* ---------- adaptable ---------- */
@media (max-width:1060px){
  .shell{ grid-template-columns:minmax(0,var(--read-w)); justify-content:center; }
  .toc{ display:none; }
}
@media (max-width:860px){
  .ag{ grid-template-columns:minmax(0,1fr) auto; }
  .ag p{ grid-column:1 / -1; grid-row:2; }
  .ag .go{ grid-row:1; grid-column:2; }
}
@media (max-width:560px){
  .top nav .gh{ padding:10px; gap:0; }
  .top nav .gh .gh-t, .top nav .gh .gh-ar{ display:none; }
}
@media (max-width:640px){
  :root{ --t-body:17px; --space-section:48px; --bar-h:60px; }
  .brand > span{ display:none; } .top nav a:not(.btn):not(.gh){ display:none; }
  .shell{ padding-top:36px; }
  .home{ padding-top:40px; }
  .banner-in{ padding:52px 0 0; }
  .tabbar-in{ overflow-x:auto; scrollbar-width:none; }            /* cuatro pestañas no caben en 360 px: la barra se desplaza y la activa se centra */
  .tabbar-in::-webkit-scrollbar{ display:none; }
  .tabs{ gap:0; width:max-content; min-width:100%; } .tabs button{ flex:1 0 auto; padding:14px 14px 15px; border-radius:8px 8px 0 0; }
  .tab-ind{ bottom:0; }
  .banner::before{ width:300px; height:300px; right:-130px; }
  .stats, .stats.n2, .stats.n3, .stats.n4, .stats.n4.w{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats.n3 div:last-child{ grid-column:1 / -1; }
  .cards, .cards.c2{ grid-template-columns:1fr; }
  .flow, .flow.c2, .flow.c3, .flow.c4{ grid-template-columns:1fr; }
  .flow li:not(:last-child)::after{ display:none; }
  .ag{ grid-template-columns:1fr; } .ag .go, .ag p{ grid-column:1; grid-row:auto; justify-content:flex-start; }
}

/* ---------- impresión / PDF (A4): misma escala, en puntos ---------- */
@media print{
  :root{ --t-display:30pt; --t-h2:19pt; --t-body:10.5pt; --t-ui:9.5pt; --t-meta:8.5pt; --space-block:20pt; --space-section:30pt; }
  html{ scroll-padding-top:0; }
  body{ background:#fff; line-height:1.58; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .top, .toc, .more, footer.site{ display:none !important; }
  .shell{ display:block; padding:0; max-width:none; }
  article{ max-width:none; }
  .kicker{ margin-bottom:10pt; }
  .dek{ margin-top:12pt; }
  .chips{ margin:16pt 0 4pt; } .chips > span{ padding:6pt 10pt; }
  h2{ margin:var(--space-section) 0 9pt; break-after:avoid; }
  article > .chips + h2{ margin-top:var(--space-section); }
  h3{ margin:20pt 0 6pt; break-after:avoid; }
  h4{ margin:14pt 0 4pt; break-after:avoid; }
  p, li{ orphans:3; widows:3; }
  li{ margin-bottom:.35em; }
  pre{ padding:10pt 13pt; break-inside:avoid; white-space:pre-wrap; }
  .tree{ white-space:pre-wrap; break-inside:auto; }
  .tw{ overflow:visible; break-inside:auto; }
  th, td{ padding:7pt 9pt; } tr{ break-inside:avoid; }
  .callout{ break-inside:avoid; padding:11pt 14pt 3pt; }
  .stats, .cards, .flow, .lanes{ break-inside:avoid; }
  .stats{ margin-top:14pt; }
  .stats div{ padding:12pt 14pt; }
  .cards div{ padding:10pt 12pt; }
  .flow{ gap:8pt 24pt; }
  .flow li{ padding:10pt; } .flow.v li{ padding:9pt 12pt; }
  .lanes{ padding:10pt 12pt; gap:6pt 10pt; } .lanes .s{ padding:7pt 9pt; }
  .cw-b{ gap:12pt; padding:14pt 14pt 10pt; } .cw-m{ break-inside:avoid; } .cw-h{ padding:8pt 14pt; } .cw-in{ margin:0 14pt 14pt; padding:7pt 8pt 7pt 14pt; }
  a.l{ color:var(--ink); background:none; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } a.l::after{ display:none; }
}

/* ============================================================
   EFECTOS DE TEXTO (efectos.js): letter swap y wave text
   ============================================================ */
/* Letter swap: cada letra lleva su copia (::after) justo debajo; al pasar el cursor la letra sube y entra la copia, con escalonado */
.ls-wd{ display:inline-block; white-space:nowrap; }
.ls-o{ display:inline-block; overflow:clip; vertical-align:top; padding:0 .03em; margin:0 -.03em; }
.ls-c{ position:relative; display:inline-block; line-height:1.3; transition:transform .55s cubic-bezier(.7,0,.2,1) calc(var(--i) * 22ms); will-change:transform; }
.ls-c::after{ content:attr(data-c); position:absolute; left:0; top:100%; line-height:1.3; }
[data-ls]:is(:hover,:focus-visible,:has(:focus-visible)) .ls-c{ transform:translateY(-100%); }
.brand > span{ line-height:1.3; }

/* Wave text (título del banner): entrada en ola y una ola nueva al pasar el cursor; la ola no se interrumpe */
.wave{ width:fit-content; }
.wv{ display:inline-block; }
.wv-in .wv{ animation:wv-in .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--e, 0s) + var(--i) * 38ms); }
.wv-on .wv{ animation:wv-ola 1s ease-in-out both; animation-delay:calc(var(--i) * 45ms); }
@keyframes wv-in{ from{ opacity:0; transform:translateY(.55em); } to{ opacity:1; transform:none; } }
@keyframes wv-ola{ 0%,100%{ transform:none; } 35%{ transform:translateY(-.2em); } 70%{ transform:translateY(.05em); } }

/* ============================================================
   CARRUSELES (efectos.js): Card Stack (portadas) y Coverflow (logos)
   ============================================================ */
.cx{ position:relative; margin:var(--space-block) 0 0; --dx:0px; --r:0; }
.cx-stage{ position:relative; perspective:1300px; overflow:hidden; touch-action:pan-y; user-select:none; -webkit-user-select:none; outline:none; }
/* el escenario solo recorta a los lados: así la sombra de la tarjeta central no se corta en seco por abajo */
@supports (overflow:clip){ .cx-stage{ overflow-x:clip; overflow-y:visible; } }
.cx.listo .cx-stage{ cursor:grab; } .cx.listo .cx-stage.drag{ cursor:grabbing; }
.cx-stage:focus-visible{ outline:2px solid var(--clay); outline-offset:4px; border-radius:14px; }
.cx-card{ margin:0; position:absolute; transition:transform .75s cubic-bezier(.22,.9,.28,1), opacity .5s, box-shadow .5s; }
.cx-card figcaption{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cx-card[data-h]{ opacity:0 !important; pointer-events:none; }
.cx-stage.drag .cx-card[data-pos="0"]{ transition:opacity .5s, box-shadow .5s; }

/* barra inferior: flechas, texto de la tarjeta activa y contador */
.cx-bar{ display:grid; grid-template-columns:42px minmax(0,1fr) 42px; align-items:center; column-gap:14px; margin-top:18px; }
.cx-bar .cx-prev{ grid-column:1; grid-row:1 / span 2; } .cx-bar .cx-next{ grid-column:3; grid-row:1 / span 2; }
.cx-cap{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; text-align:center; font-size:var(--t-ui); line-height:var(--lh-ui); color:var(--muted); }
.cx-cap b{ font-family:var(--serif); font-weight:400; font-size:var(--t-body); line-height:1.25; color:var(--ink); }
.cx-bar .cx-cap{ grid-column:2; grid-row:1; }
.cx-n{ grid-column:2; grid-row:2; margin-top:8px; font-size:var(--t-meta); line-height:1; color:var(--soft); font-variant-numeric:tabular-nums; letter-spacing:.04em; text-align:center; }
.cx-btn{ flex:none; display:inline-grid; place-items:center; width:42px; height:42px; border:0; border-radius:50%; background:var(--oat); color:var(--ink); cursor:pointer; transition:background .2s, color .2s, transform .2s, box-shadow .2s; }
.cx-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cx-btn:hover, .cx-btn:focus-visible{ background:var(--ink); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,20,19,.25); outline:none; }
.cx-btn:active{ transform:scale(.94); box-shadow:none; }

/* Card Stack: la pila se abre en abanico al pasar el cursor (--spread); la activa sigue el arrastre (--dx) */
.cs .cx-stage{ height:clamp(190px,33vw,300px); --spread:1; }
.cs .cx-stage:hover, .cs .cx-stage:focus-visible{ --spread:1.5; }
.cs .cx-card{ left:50%; top:50%; width:min(60%,500px); aspect-ratio:792/446; border-radius:14px; background:var(--oat); border:1px solid var(--line); overflow:hidden; cursor:pointer;
  z-index:calc(20 - var(--a,0));
  opacity:clamp(0, calc(1.2 - var(--a,0) * .3), 1);
  transform:translate(-50%,-50%) translateX(calc(var(--o,0) * 13% * var(--spread))) translateY(calc(var(--a,0) * 3%)) translateZ(calc(var(--a,0) * -70px)) rotate(calc(var(--o,0) * 4deg)) rotateY(calc(var(--o,0) * -9deg)) scale(calc(1 - var(--a,0) * .06));
  box-shadow:0 6px 18px rgba(20,20,19,.1); }
.cs .cx-card[data-pos="0"]{ cursor:grab; box-shadow:0 22px 50px -12px rgba(20,20,19,.32), 0 6px 14px rgba(20,20,19,.1);
  transform:translate(-50%,-50%) translateX(var(--dx)) rotate(calc(var(--r, 0) * 1deg)); }
.cx-card img{ opacity:0; transition:opacity .45s; }
.cx-card img.ok{ opacity:1; }
.cs .cx-card img{ width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; }
.cs .cx-card:not([data-pos="0"])::after{ content:""; position:absolute; inset:0; background:rgba(245,244,237,calc(var(--a,0) * .12)); }

/* Coverflow: la activa de frente, las laterales giradas y más atrás; --s es el signo de la posición */
.cf .cx-stage{ height:clamp(170px,27vw,230px); perspective:1000px; }
.cf .cx-card{ left:50%; top:50%; width:clamp(150px,30%,210px); aspect-ratio:4/3; display:grid; place-items:center; border-radius:16px; cursor:pointer;
  background:#fff; border:1px solid var(--line);
  z-index:calc(20 - var(--a,0));
  opacity:clamp(0, calc(1.25 - var(--a,0) * .33), 1);
  transform:translate(-50%,-50%) translateX(calc(var(--o,0) * 44% + var(--s,0) * 34%)) translateZ(calc(var(--a,0) * -60px)) rotateY(calc(var(--s,0) * -55deg)) scale(calc(1 - var(--a,0) * .04));
  box-shadow:0 6px 18px rgba(20,20,19,.08); }
.cf .cx-card[data-pos="0"]{ box-shadow:0 22px 44px -14px rgba(20,20,19,.3), 0 6px 14px rgba(20,20,19,.08);
  transform:translate(-50%,-50%) translateZ(40px) translateX(var(--dx)); }
.cf .cx-card:not([data-pos="0"]){ opacity:clamp(0, calc(1.1 - var(--a,0) * .3), .75); }
/* logos a color (WebP con transparencia), contenidos en su casilla sin deformarse */
.cf-logo{ display:block; width:68%; height:54%; }
.cf-logo img{ width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; }

/* sin JS (o antes de que cargue): las tarjetas se ven en una cuadrícula */
.cx:not(.listo) .cx-stage{ height:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; overflow:visible; }
.cx:not(.listo) .cx-card{ position:static; width:auto; transform:none; margin:0; opacity:1; }
.cx:not(.listo) .cx-bar{ display:none; }

@media (max-width:640px){
  .cs .cx-card{ width:74%; } .cs .cx-card, .cf .cx-card{ transition-duration:.6s; }
  .cf .cx-card{ width:46%; }
  .cx-btn{ width:38px; height:38px; }
}
@media (prefers-reduced-motion:reduce){
  .ls-c, .cx-card, .cx-btn{ transition-duration:.01ms !important; transition-delay:0s !important; }
  [data-ls]:is(:hover,:focus-visible,:has(:focus-visible)) .ls-c{ transform:none; }
  .wv{ animation:none !important; }
}
/* en el PDF las tarjetas se imprimen en cuadrícula, cada una con su texto */
@media print{
  .cx .cx-stage{ height:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:8pt; overflow:visible; perspective:none; }
  .cf .cx-stage{ grid-template-columns:repeat(5,1fr); }
  .cx .cx-card{ position:static; width:auto; transform:none !important; opacity:1 !important; box-shadow:none !important; break-inside:avoid; }
  .cx .cx-card::after{ display:none; }
  .cx .cx-card figcaption{ position:static; width:auto; height:auto; clip:auto; overflow:visible; white-space:normal; font-size:var(--t-meta); line-height:1.3; color:var(--muted); padding:4pt 2pt 0; text-align:center; }
  .cs .cx-card, .cf .cx-card{ display:block; background:none; border:0; border-radius:0; aspect-ratio:auto; }
  .cs .cx-card img{ border:1px solid var(--line); border-radius:4pt; height:auto; }
  .cf .cx-card .cf-logo{ width:100%; height:34pt; }
  .cx-card img{ opacity:1 !important; }
  .cx-bar{ display:none; }
  .ls-c{ transform:none !important; }
}

/* ============================================================
   SOCIAL PREVIEW DOCK (pie del índice): iconos que crecen al pasar el cursor y muestran la vista previa del perfil
   ============================================================ */
footer.site{ align-items:center; }
.dock{ display:flex; align-items:flex-end; gap:8px; padding:6px; border-radius:18px; background:var(--oat); }
.dock-i{ position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:#fff; border:1px solid var(--line); color:var(--ink); text-decoration:none;
  transition:transform .35s cubic-bezier(.3,1.6,.5,1), background-color .2s, color .2s, border-color .2s, box-shadow .3s; transform-origin:50% 100%; }
.dock-i svg{ width:20px; height:20px; }
.dock-i:hover, .dock-i:focus-visible{ transform:translateY(-8px) scale(1.22); color:#fff; border-color:transparent; box-shadow:0 10px 22px rgba(20,20,19,.22); outline:none; z-index:2; }
.dock-gh:hover, .dock-gh:focus-visible{ background:var(--ink); }
.dock-li:hover, .dock-li:focus-visible{ background:#0a66c2; }
.dock-i:has(+ .dock-i:hover), .dock-i:hover + .dock-i{ transform:translateY(-3px) scale(1.08); }   /* los vecinos se inclinan hacia el que tiene el cursor, como en un dock */
.dock-i:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
/* vista previa: tarjeta oscura que sube desde el icono, anclada a la derecha del pie (hecha con HTML/CSS; la cuadrícula son 210 <i>) */
.dock-pv{ position:absolute; right:-8px; bottom:calc(100% + 18px); width:min(340px, calc(100vw - 2 * var(--gut))); border-radius:16px; overflow:hidden; background:#16181d; color:#e9e8e3; text-align:left;
  border:1px solid rgba(255,255,255,.09); box-shadow:0 24px 54px -12px rgba(20,20,19,.5), 0 6px 14px rgba(20,20,19,.15); opacity:0; visibility:hidden; transform:translateY(10px) scale(.96); transform-origin:90% 100%; pointer-events:none;
  transition:opacity .25s, transform .35s cubic-bezier(.22,.9,.28,1), visibility 0s .35s; cursor:default; }
.dock-i:hover .dock-pv, .dock-i:focus-visible .dock-pv{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.pv-av{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; background:#2a2d34; }
.pv-id, .pv-body{ display:flex; flex-direction:column; min-width:0; }
.dock-pv b{ font-size:var(--t-ui); line-height:var(--lh-ui); font-weight:600; color:#fff; }
.dock-pv .pv-id > span, .dock-pv .pv-body > span{ font-size:var(--t-meta); line-height:var(--lh-meta); color:#9d9ca6; }
/* GitHub: perfil + mini cuadrícula de contribuciones (7 filas × semanas, de arriba abajo y de izquierda a derecha) */
.pv-head{ display:flex; align-items:center; gap:12px; padding:14px 16px 12px; }
.pv-grid{ display:grid; grid-template-rows:repeat(7,1fr); grid-auto-flow:column; grid-auto-columns:1fr; gap:3px; padding:0 16px 16px; }
.pv-grid i{ aspect-ratio:1; border-radius:2px; background:#23262d; }
.pv-grid i.l1{ background:#0e4429; } .pv-grid i.l2{ background:#006d32; } .pv-grid i.l3{ background:#26a641; } .pv-grid i.l4{ background:#39d353; }
/* LinkedIn: banda de color, foto que la cruza, nombre, titular, ciudad y botón */
.pv-ban{ display:block; height:58px; background:radial-gradient(120% 160% at 85% 0%, #3f8f66 0%, transparent 60%), linear-gradient(120deg, #0b1220 0%, #16283f 55%, #1f4a3a 100%); }
.pv-av-lg{ width:56px; height:56px; margin:-28px 0 0 16px; border:3px solid #16181d; position:relative; }
.pv-body{ padding:8px 16px 0; gap:2px; }
.pv-body b{ font-size:var(--t-ui); }
.dock-pv .pv-body .pv-loc{ margin-top:4px; }
.pv-btn{ display:inline-flex; margin:-30px 16px 16px auto; float:right; padding:7px 16px; border-radius:99px; background:#e9e8e3; color:#16181d; font-size:var(--t-meta); line-height:1; font-weight:600; }
.dock-pv-li::after{ content:""; display:block; clear:both; }
@media (prefers-reduced-motion:reduce){ .dock-i, .dock-pv{ transition-duration:.01ms !important; transition-delay:0s !important; } .dock-i:hover, .dock-i:focus-visible, .dock-i:has(+ .dock-i:hover), .dock-i:hover + .dock-i{ transform:none; } }

/* tablas de comandos «!»: la primera columna (el comando) no se parte */
table.cmd td:first-child, table.cmd th:first-child{ width:1%; white-space:nowrap; }

/* ============================================================
   «Inicio» (instalación y primeros pasos): pestañas de la guía, selector (switch), bloques con «Copiar»,
   los dos repositorios, la línea de tiempo de publicación y la ubicación de archivos en un Proyecto.
   Los componentes que arrancan ocultos o animados dependen de .fx (clase que pone el <head>); sin JavaScript se ven completos.
   ============================================================ */
/* selector (switch): dos o más paneles; la «pastilla» blanca desliza con un pequeño rebote */
.sw{ margin:8px 0 var(--space-block); }
.sw-bar{ display:none; position:relative; grid-auto-flow:column; grid-auto-columns:1fr; padding:5px; border-radius:18px; background:var(--oat); border:1px solid var(--line); }
.fx .sw-bar{ display:grid; }
.sw-bar button{ position:relative; z-index:1; appearance:none; border:0; background:none; font:inherit; font-weight:500; font-size:var(--t-ui); line-height:var(--lh-ui); color:var(--muted);
  display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 14px; border-radius:13px; cursor:pointer; transition:color .25s; }
.sw-bar button:hover{ color:var(--ink); }
.sw-bar button[aria-selected="true"]{ color:var(--ink); }
.sw-bar button:focus-visible{ outline:2px solid var(--clay); outline-offset:-2px; }
.sw-bar svg{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s cubic-bezier(.3,1.5,.4,1), stroke .25s; }
.sw-bar img{ width:18px; height:18px; flex:none; border-radius:5px; }
.sw-bar button[aria-selected="true"] svg{ stroke:var(--ink); transform:scale(1.12) rotate(-6deg); }
.sw-thumb{ position:absolute; z-index:0; top:5px; bottom:5px; left:0; width:var(--w,0px); transform:translateX(var(--x,0px)); border-radius:13px; background:#fff;
  box-shadow:0 1px 2px rgba(20,20,19,.08), 0 8px 18px -8px rgba(20,20,19,.25); transition:transform .5s cubic-bezier(.3,1.35,.4,1), width .5s cubic-bezier(.3,1.35,.4,1); }
/* desplegable (variante «menu»): un botón con la opción elegida y una lista que se abre con un pequeño rebote; las opciones entran en escalera */
.sw-menu{ position:relative; }
.sw.menu .sw-thumb{ display:none; }
.sw-trig{ display:none; align-items:center; gap:12px; width:100%; appearance:none; padding:11px 14px; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--ink);
  font:inherit; text-align:left; cursor:pointer; box-shadow:0 1px 2px rgba(20,20,19,.05); transition:border-color .2s, box-shadow .25s; }
.fx .sw-trig{ display:flex; }
.sw-trig:hover{ border-color:#d3cfc0; box-shadow:0 10px 22px -14px rgba(20,20,19,.35); }
.sw-trig:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; }
.sw-trig[aria-expanded="true"]{ border-color:var(--line); box-shadow:0 12px 26px -16px rgba(20,20,19,.4); }
.sw-cur{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.sw-cur img, .sw.menu .sw-bar img{ flex:none; width:32px; height:32px; border-radius:9px; }
.sw-chev{ flex:none; width:20px; height:20px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s cubic-bezier(.3,1.5,.4,1); }
.sw-trig[aria-expanded="true"] .sw-chev{ transform:rotate(180deg); }
.fx .sw.menu .sw-bar{ position:absolute; z-index:20; top:calc(100% + 8px); left:0; right:0; display:flex; flex-direction:column; gap:2px; max-height:min(430px, 62vh); overflow:auto; padding:6px;
  border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 26px 54px -22px rgba(20,20,19,.5);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:top center; pointer-events:none;
  transition:opacity .2s, transform .32s cubic-bezier(.2,.9,.3,1.25), visibility 0s .32s; }
.fx .sw.menu.abierto .sw-bar{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; }
.sw.menu .sw-bar button{ width:100%; justify-content:flex-start; gap:12px; padding:9px 12px; border-radius:11px; text-align:left; }
.sw.menu .sw-bar button:hover, .sw.menu .sw-bar button:focus-visible{ background:var(--ivory); outline:none; }
.sw.menu .sw-bar button[aria-selected="true"]{ background:var(--oat); }
.sw.menu .sw-bar button[aria-selected="true"]::after{ content:""; flex:none; width:6px; height:11px; margin:0 6px 3px auto; border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(45deg); }
.fx .sw.menu.abierto .sw-bar button{ animation:opt-in .32s cubic-bezier(.2,.8,.2,1) calc(var(--o, 0) * 30ms) both; }
@keyframes opt-in{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }
.sw.menu .sw-panel{ padding-top:22px; }
.sw-l{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sw-l b{ overflow-wrap:anywhere; font-weight:600; font-size:var(--t-ui); line-height:1.25; color:var(--ink); }
.sw-l small{ font-size:var(--t-meta); line-height:var(--lh-meta); color:var(--soft); }

/* ficha del agente: cabecera con cifras que cuentan y tres pasos unidos por una línea que se dibuja */
.pj-h{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--ivory); }
.pj-h > img{ flex:none; width:40px; height:40px; border-radius:11px; box-shadow:0 6px 14px -8px rgba(20,20,19,.4); }
.pj-t{ display:flex; flex-direction:column; min-width:0; }
.pj-t b{ font-family:var(--serif); font-weight:400; font-size:var(--t-body); line-height:1.2; color:var(--ink); }
.pj-t span{ font-size:var(--t-meta); line-height:var(--lh-meta); color:var(--soft); }
.pj-st{ display:flex; gap:22px; margin-left:auto; }
.pj-st span{ display:flex; align-items:baseline; gap:7px; font-size:var(--t-meta); line-height:var(--lh-meta); color:var(--muted); }
.pj-st b{ font-family:var(--serif); font-weight:400; font-size:var(--t-body); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.pj-steps{ position:relative; list-style:none; padding:0; margin:22px 0 0; }
.pj-steps::before{ content:""; position:absolute; left:15px; top:16px; bottom:16px; width:2px; border-radius:2px; background:linear-gradient(var(--box-line), var(--line)); transform-origin:top; }
.pj-s{ position:relative; display:flex; gap:18px; padding-bottom:26px; }
.pj-s:last-child{ padding-bottom:0; }
.pj-n{ position:relative; z-index:1; flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; font-size:var(--t-ui); font-weight:600; line-height:1; box-shadow:0 0 0 5px #fff; }
.pj-n.pj-x{ background:var(--soft); }
.pj-b{ flex:1; min-width:0; }
.pj-b h4{ margin:4px 0 4px; font-size:var(--t-body); line-height:1.3; color:var(--ink); }
.pj-b h4 em{ margin-left:8px; padding:3px 10px; border-radius:99px; background:var(--oat); color:var(--muted); font-style:normal; font-size:var(--t-meta); font-weight:600; vertical-align:2px; }
.pj-b > p{ margin:0 0 14px; font-size:var(--t-ui); line-height:var(--lh-ui); color:var(--muted); }
.pj-b .prompt{ margin:0; }
.pj-g{ margin:0 0 14px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.pj-gl{ display:block; margin-bottom:10px; font-size:var(--t-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
.pj-gl em{ margin-left:6px; font-style:normal; letter-spacing:0; color:var(--muted); }
.pj-g small{ display:block; margin-top:10px; font-size:var(--t-meta); line-height:var(--lh-meta); color:var(--soft); }
.pj-fs{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.pj-f{ display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:5px 10px 5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--ivory); color:var(--text);
  font-size:var(--t-meta); line-height:1.3; overflow-wrap:anywhere; word-break:break-all; transition:transform .25s cubic-bezier(.3,1.5,.4,1), background-color .2s, border-color .2s; }
.pj-f::before{ content:""; flex:none; width:10px; height:12px; border:1.5px solid currentColor; border-radius:2px 5px 2px 2px; opacity:.55; }
.pj-f:hover{ transform:translateY(-2px); background:#fff; border-color:var(--soft); }
.pj-f.pj-main{ background:var(--oat); border-color:var(--soft); color:var(--ink); font-weight:600; }
.pj-f.pj-no{ background:var(--oat); color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(94,93,89,.45); }
.pj-r{ display:flex; flex-direction:column; gap:7px; padding:12px 0; border-top:1px solid var(--line); }
.pj-g .pj-r:first-of-type{ border-top:0; padding-top:0; }
.pj-r:last-child{ padding-bottom:0; }
.pj-r > span:not(.pj-fs){ font-size:var(--t-meta); line-height:var(--lh-meta); color:var(--muted); }
.pj-b > .pj-r:first-of-type{ border-top:0; padding-top:0; }
/* entrada: al elegir un agente (o al verse) la línea se dibuja, los pasos suben en escalera y los archivos aparecen uno a uno */
.fx .sw.menu.on .sw-panel.on .pj-steps::before{ animation:pj-linea .9s cubic-bezier(.2,.8,.2,1) both; }
.fx .sw.menu.on .sw-panel.on .pj-h{ animation:pj-sube .5s cubic-bezier(.2,.8,.2,1) both; }
.fx .sw.menu.on .sw-panel.on .pj-s{ animation:pj-sube .6s cubic-bezier(.2,.8,.2,1) calc(120ms + var(--i) * 140ms) both; }
.fx .sw.menu.on .sw-panel.on .pj-n{ animation:pj-pop .55s cubic-bezier(.3,1.6,.4,1) calc(220ms + var(--i) * 140ms) both; }
.fx .sw.menu.on .sw-panel.on .pj-f{ animation:pj-pop .45s cubic-bezier(.3,1.6,.4,1) calc(380ms + var(--k) * 32ms) both; }
.fx .sw.menu:not(.on) .pj-h, .fx .sw.menu:not(.on) .pj-s, .fx .sw.menu:not(.on) .pj-n, .fx .sw.menu:not(.on) .pj-f{ opacity:0; }
@keyframes pj-linea{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes pj-sube{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes pj-pop{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:none; } }

/* variante «chips»: muchas opciones (por ejemplo los siete agentes) en una fila que se ajusta; la opción elegida se rellena de blanco */
.fx .sw.chips .sw-bar{ display:flex; flex-wrap:wrap; gap:6px; padding:6px; border-radius:18px; }
.sw.chips .sw-thumb{ display:none; }
.sw.chips .sw-bar button{ flex:0 0 auto; padding:9px 15px; border-radius:99px; transition:color .25s, background-color .25s, box-shadow .25s; }
.sw.chips .sw-bar button:hover{ background:rgba(255,255,255,.6); }
.sw.chips .sw-bar button[aria-selected="true"]{ background:#fff; box-shadow:0 1px 2px rgba(20,20,19,.08), 0 6px 14px -8px rgba(20,20,19,.3); }
.sw-panel{ padding-top:28px; }
.sw-panel > :last-child{ margin-bottom:0; }
.sw-title{ margin:0 0 14px; padding-top:6px; font-size:var(--t-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.fx .sw-title{ display:none; }
.fx .sw-panel:not(.on){ display:none; }
.fx .sw-panel.on.anim{ animation:panel-in .45s cubic-bezier(.2,.8,.2,1); }
.sw-panel h3:first-child{ margin-top:0; }
/* «Inicio» dentro del índice: usa la misma rejilla que las guías (índice lateral + texto), sin el relleno propio de .shell */
.panel .shell{ padding:0; max-width:none; margin:0; }
.panel article > h2:first-child{ margin-top:0; }

/* mensaje para la IA y bloques de comandos, con botón «Copiar» */
.prompt{ margin:8px 0 var(--space-block); border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 14px 34px -20px rgba(20,20,19,.35); }
.pr-h, .code-h{ display:flex; align-items:center; gap:10px; min-height:46px; padding:7px 10px 7px 18px; background:var(--ivory); border-bottom:1px solid var(--line);
  font-size:var(--t-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pr-h em{ margin-left:auto; font-style:normal; font-weight:400; letter-spacing:0; text-transform:none; color:var(--soft); }
.pr-h .copy, .code-h .copy{ margin-left:auto; }
.pr-h em + .copy{ margin-left:10px; }
.pr-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--clay); animation:pr-pulso 2.4s ease-out infinite; }
@keyframes pr-pulso{ 0%{ box-shadow:0 0 0 0 rgba(217,119,87,.55); } 70%,100%{ box-shadow:0 0 0 9px rgba(217,119,87,0); } }
/* los cuadros con scroll propio: barra fina, inercia (suave.js) y un degradado al pie mientras queda texto por ver */
.prompt{ position:relative; }
.prompt::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:56px; pointer-events:none; background:linear-gradient(rgba(255,255,255,0), #fff 85%); opacity:0; transition:opacity .3s; }
.prompt.mas::after{ opacity:1; }
.prompt pre, .fx .sw.menu .sw-bar{ scrollbar-width:thin; scrollbar-color:#d3cfc0 transparent; overscroll-behavior:contain; }
.prompt pre{ margin:0; border:0; border-radius:0; background:#fff; max-height:360px; overflow:auto; padding:18px 22px; white-space:pre-wrap; overflow-wrap:anywhere;
  font-family:var(--sans); font-size:var(--t-ui); line-height:1.65; color:var(--text); }
.code{ margin:0 0 var(--space-block); border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--ivory); }
.code pre{ margin:0; border:0; border-radius:0; }
/* Terminal y PowerShell: fondo negro y texto claro (como una consola) */
.code pre{ white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:hidden; }
.code{ border-color:#141413; background:#141413; }
.code-h{ background:#1f1f1e; border-bottom-color:rgba(255,255,255,.1); color:#a8a69d; }
.code pre{ background:#141413; color:#f0eee6; }
.code pre code{ background:none; color:inherit; }
.code .copy{ background:transparent; border-color:rgba(255,255,255,.28); color:#f0eee6; }
.code .copy:hover{ background:#f0eee6; border-color:#f0eee6; color:#141413; }
.code .copy.ok{ background:var(--ink); border-color:var(--ink); color:#fff; }
.copy{ appearance:none; display:inline-flex; align-items:center; gap:7px; padding:7px 14px 7px 11px; border:1px solid var(--line); border-radius:99px; background:#fff; color:var(--ink);
  font:inherit; font-weight:500; font-size:var(--t-meta); line-height:1; letter-spacing:0; text-transform:none; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s, transform .2s; }
.copy svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.copy .ck{ display:none; }
.copy:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.copy:active{ transform:scale(.95); }
.copy:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; }
.copy.ok{ background:var(--ink); border-color:var(--ink); color:#fff; }
.copy.ok .cp{ display:none; } .copy.ok .ck{ display:block; animation:ck-in .35s cubic-bezier(.3,1.6,.4,1); }
@keyframes ck-in{ from{ transform:scale(.3) rotate(-30deg); opacity:0; } to{ transform:none; opacity:1; } }

/* los dos repositorios: dos pasos (antes y después) con el estado de la carpeta; en el segundo, el contenido del repositorio 2 va entrando dentro de ella */
.repos{ margin:8px 0 var(--space-block); }
.rp-path{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0 0 18px; }
.rp-path small, .rp-lab, .rp-cmd small{ font-size:var(--t-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
.rp-path code{ background:none; padding:0; font-size:var(--t-meta); color:var(--muted); overflow-wrap:anywhere; }
.rp-cols{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-rows:repeat(6, auto); column-gap:16px; row-gap:0; }
/* cada paso es una subcuadrícula de las 6 filas: así los dos árboles quedan alineados aunque los textos tengan distinta longitud */
.rp-a, .rp-b{ min-width:0; padding:18px 20px 20px; display:grid; grid-row:1 / span 6; grid-template-rows:subgrid; }
.rp-a > *, .rp-b > *{ align-self:start; }
.rp-step{ margin:0 0 14px; font-size:var(--t-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.rp-h{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; }
.rp-h b{ font-family:var(--mono); font-size:var(--t-ui); line-height:var(--lh-ui); font-weight:600; color:var(--ink); }
.rp-h i{ font-style:normal; font-size:var(--t-meta); line-height:var(--lh-meta); color:var(--soft); }
.rp-n{ display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff; font-size:var(--t-meta); font-weight:600; line-height:1; }
.rp-d{ margin:8px 0 0; font-size:var(--t-ui); line-height:var(--lh-ui); color:var(--muted); }
.rp-lab{ margin:18px 0 8px; }
.rp-tree{ display:flex; flex-direction:column; padding:14px 16px; border:1px solid var(--box-line-2); background:var(--oat); font-family:var(--mono); font-size:var(--t-meta); line-height:1.7; color:var(--text); overflow-x:auto; }
.rp-l{ white-space:pre; }
.rp-root{ font-weight:600; color:var(--ink); }
.rp-dir{ color:var(--ink); }
.rp-hole{ color:var(--soft); font-style:italic; }
.rp-new{ color:var(--ink); font-weight:600; background:#e4e1d3; transition:opacity .5s calc(.35s + var(--i) * .22s), transform .6s calc(.35s + var(--i) * .22s) cubic-bezier(.3,1.35,.4,1); }
.fx .repos:not(.on) .rp-new{ opacity:0; transform:translateX(-14px); }
.rp-nota{ margin:12px 0 0; font-size:var(--t-ui); line-height:var(--lh-ui); color:var(--muted); }
.rp-nota code{ font-size:var(--t-meta); }
.rp-go{ display:grid; place-items:center; align-self:center; grid-row:1 / span 6; grid-column:2; }
.rp-go svg{ width:28px; height:28px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.repos figcaption, .pub figcaption{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-top:16px; font-size:var(--t-meta); line-height:var(--lh-meta); color:var(--muted); }
.rp-cmd{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.rp-cmd code{ overflow-wrap:anywhere; }
.rp-replay{ display:none; appearance:none; padding:6px 13px; border:1px solid var(--box-line-2); border-radius:99px; background:var(--box-bg); color:var(--muted); font:inherit; font-weight:500; font-size:var(--t-meta); line-height:1.2; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s; }
.fx .rp-replay{ display:inline-block; }
.rp-replay:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.rp-replay:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; }
@media (max-width:760px){ .rp-cols{ grid-template-columns:1fr; grid-template-rows:none; row-gap:16px; } .rp-a, .rp-b{ display:block; grid-row:auto; } .rp-go{ grid-row:auto; grid-column:auto; transform:rotate(90deg); } }

/* publicación: la barra avanza, los puntos se encienden en orden y el globo marca el tiempo aproximado */
.pub{ --T:6s; margin:8px 0 var(--space-block); padding:52px 22px 22px; border:1px solid var(--line); border-radius:16px; background:var(--ivory); }
.pub ol{ position:relative; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); list-style:none; padding:0; margin:0; }
.pub ol::before, .pub ol::after{ content:""; position:absolute; top:14px; left:calc(50% / var(--n)); right:calc(50% / var(--n)); height:2px; border-radius:2px; }
.pub ol::before{ background:var(--line); }
.pub ol::after{ background:var(--ink); transform-origin:left; }
.fx .pub:not(.on) ol::after{ transform:scaleX(0); }
.fx .pub.on ol::after{ animation:pub-fill var(--T) linear both; }
@keyframes pub-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.pub li:not(.pub-run){ position:relative; padding:0 6px; text-align:center; font-size:var(--t-ui); line-height:var(--lh-ui); }
.pub li b{ display:block; margin-top:10px; font-weight:600; color:var(--ink); }
.pub li:not(.pub-run) > span:not(.pub-dot){ display:block; margin-top:3px; font-size:var(--t-meta); line-height:var(--lh-meta); color:var(--muted); }
.pub-dot{ position:relative; z-index:1; display:grid; place-items:center; width:30px; height:30px; margin:0 auto; border-radius:50%; border:2px solid var(--ink); background:var(--ink); color:#fff;
  font-size:var(--t-meta); font-weight:600; line-height:1; }
.pub li:nth-last-child(2) .pub-dot{ border-color:var(--ink); background:var(--ink); }
.fx .pub:not(.on) .pub-dot{ border-color:var(--line); background:#fff; color:var(--soft); }
.fx .pub.on .pub-dot{ animation:pub-dot .55s calc(var(--T) * var(--i) / var(--k)) both; }
.fx .pub.on li:nth-last-child(2) .pub-dot{ animation-name:pub-dot-ok; }
@keyframes pub-dot{ from{ border-color:var(--line); background:#fff; color:var(--soft); transform:scale(1); } 55%{ transform:scale(1.28); } to{ border-color:var(--ink); background:var(--ink); color:#fff; transform:scale(1); } }
@keyframes pub-dot-ok{ from{ border-color:var(--line); background:#fff; color:var(--soft); transform:scale(1); } 55%{ transform:scale(1.28); } to{ border-color:var(--ink); background:var(--ink); color:#fff; transform:scale(1); } }
.pub-run{ position:absolute; top:-38px; left:0; right:0; height:0; pointer-events:none; }
.pub-time{ position:absolute; top:0; left:calc(100% - 50% / var(--n)); transform:translateX(-50%); padding:5px 12px; border-radius:99px; background:var(--ink); color:#fff;
  font-size:var(--t-meta); font-weight:600; line-height:1.2; white-space:nowrap; }
.pub-time::after{ content:""; position:absolute; left:50%; bottom:-4px; width:8px; height:8px; margin-left:-4px; background:var(--ink); transform:rotate(45deg); }
.fx .pub:not(.on) .pub-time{ left:calc(50% / var(--n)); }
.fx .pub.on .pub-time{ animation:pub-run var(--T) linear both; }
@keyframes pub-run{ from{ left:calc(50% / var(--n)); } to{ left:calc(100% - 50% / var(--n)); } }

  font-size:var(--t-ui); line-height:var(--lh-ui); transition:background-color .2s, opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1); }

@media (max-width:640px){
  .sw-bar button{ padding:12px 8px; gap:7px; }
  .pr-h em{ display:none; } .pr-h .copy{ margin-left:auto; }
  .pj-st{ margin-left:0; width:100%; } .pj-s{ gap:12px; } .pj-g{ padding:12px; } .pj-steps::before{ left:15px; }
  .pub{ padding:48px 12px 18px; } .pub li:not(.pub-run){ padding:0 2px; } .pub li:not(.pub-run) > span:not(.pub-dot){ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .sw-thumb, .sw-bar svg, .rp-new, .pj-f, .sw-bar button, .copy, .sw-chev, .sw-trig, .fx .sw.menu .sw-bar{ transition-duration:.01ms !important; transition-delay:0s !important; }
  .fx .sw.menu.abierto .sw-bar button, .pr-dot, .fx .sw-panel.on.anim, .copy.ok .ck, .fx .sw.menu .sw-panel.on .pj-steps::before, .fx .sw.menu .sw-panel.on .pj-h, .fx .sw.menu .sw-panel.on .pj-s, .fx .sw.menu .sw-panel.on .pj-n, .fx .sw.menu.on .sw-panel.on .pj-f{ animation:none !important; }
  .fx .pub.on ol::after, .fx .pub.on .pub-dot, .fx .pub.on .pub-time{ animation-duration:.01ms !important; animation-delay:0s !important; }
}
@media print{
  .copy, .rp-replay, .sw-bar, .sw-trig{ display:none !important; }
  .sw-panel{ display:block !important; animation:none !important; padding-top:6pt; }
  .sw-title{ display:block !important; margin-top:14pt; }
  .prompt, .code, .repos, .pub, .pj-s{ break-inside:avoid; box-shadow:none; }
  .prompt pre{ max-height:none; overflow:visible; }
  .prompt::after{ display:none; }
  .pr-dot, .pub *, .pub ol::after, .pj-steps::before, .pj-h, .pj-s, .pj-n, .pj-f{ animation:none !important; }
  .fx .sw.menu .pj-h, .fx .sw.menu .pj-s, .fx .sw.menu .pj-n, .fx .sw.menu .pj-f{ opacity:1 !important; }
  .fx .repos .rp-new{ opacity:1 !important; transform:none !important; }
  .fx .pub ol::after{ transform:none !important; }
  .fx .pub .pub-dot{ border-color:var(--ink) !important; background:var(--ink) !important; color:#fff !important; transform:none !important; }
  .fx .pub li:nth-last-child(2) .pub-dot{ border-color:var(--ink) !important; background:var(--ink) !important; }
  .fx .pub .pub-time{ left:calc(100% - 50% / var(--n)) !important; }
  .repos, .pub{ padding:12pt; } .pub{ padding-top:36pt; }
}

/* paleta de colores: franja proporcional + una tarjeta por color; al pulsar se copia el HEX */
.pal{ margin:8px 0 var(--space-block); }
.pal-bar{ display:flex; height:14px; gap:3px; margin-bottom:16px; }
.pal-bar i{ flex:1; border-radius:99px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(20,20,19,.1); transform-origin:left; transition:flex .45s cubic-bezier(.3,1.4,.4,1); }
.pal-bar i.hot{ flex:3.2; }
.pal-g{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.pal-c{ appearance:none; height:100%; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:0 0 12px; border:0; border-radius:16px; background:transparent; font:inherit; text-align:left; color:var(--text); cursor:pointer;
  transition:transform .35s cubic-bezier(.3,1.5,.4,1); }
.pal-c:hover, .pal-c:focus-visible{ transform:translateY(-4px); }
.pal-c:active{ transform:translateY(-1px) scale(.98); }
.pal-c:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
.pal-s{ position:relative; align-self:stretch; display:grid; place-items:center; height:92px; margin-bottom:8px; border-radius:16px; background:var(--c); color:var(--t); overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(20,20,19,.1), 0 14px 26px -18px var(--c); transition:box-shadow .35s, border-radius .35s; }
.pal-s::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 60%); opacity:0; transition:opacity .3s; }
.pal-c:hover .pal-s::before{ opacity:1; }
.pal-c:hover .pal-s{ box-shadow:inset 0 0 0 1px rgba(20,20,19,.1), 0 22px 34px -18px var(--c); }
.pal-ct{ position:relative; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:99px; background:rgba(255,255,255,.18); color:var(--t); font-size:var(--t-meta); font-weight:600; line-height:1.2;
  opacity:0; transform:translateY(6px); transition:opacity .25s, transform .3s cubic-bezier(.3,1.5,.4,1); }
.pal-c:hover .pal-ct, .pal-c:focus-visible .pal-ct, .pal-c.ok .pal-ct{ opacity:1; transform:none; }
.pal-c.ok .pal-s{ animation:pal-ok .5s cubic-bezier(.3,1.5,.4,1); }
@keyframes pal-ok{ 0%{ transform:scale(1); } 40%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
.pal-c b{ font-size:var(--t-body); line-height:1.3; font-weight:600; color:var(--ink); }
.pal-c code{ font-size:var(--t-meta); }
.pal-r{ font-size:var(--t-meta); line-height:var(--lh-meta); color:var(--muted); }
.fx .pal:not(.on) .pal-c{ opacity:0; transform:translateY(16px) scale(.95); }
.fx .pal:not(.on) .pal-bar i{ transform:scaleX(0); }
.fx .pal.on .pal-c{ animation:pal-in .55s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 60ms) backwards; }
.fx .pal.on .pal-bar i{ animation:pal-barra .7s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 50ms) backwards; }
@keyframes pal-in{ from{ opacity:0; transform:translateY(16px) scale(.95); } to{ opacity:1; transform:none; } }
@keyframes pal-barra{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (max-width:640px){ .pal-g{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .pal-s{ height:74px; } }
@media (prefers-reduced-motion:reduce){ .pal-c, .pal-s, .pal-ct, .pal-bar i{ transition-duration:.01ms !important; } .fx .pal.on .pal-c, .fx .pal.on .pal-bar i, .pal-c.ok .pal-s{ animation-duration:.01ms !important; animation-delay:0s !important; } }
@media print{
  .pal-g{ grid-template-columns:repeat(4,1fr); gap:8pt; } .pal-s{ height:42pt; box-shadow:inset 0 0 0 1px rgba(20,20,19,.15); } .pal-ct{ display:none; } .pal-c{ break-inside:avoid; }
  .fx .pal .pal-c, .fx .pal .pal-bar i{ opacity:1 !important; transform:none !important; animation:none !important; }
}

/* ============================================================
   ENTRADA A LA WEB
   1) Cortina (.intro): la primera vez de cada sesión aparecen el logo y el nombre sobre una línea de color que crece desde el centro;
      la línea se apaga y la cortina se abre por la mitad (el logo sube con la mitad de arriba, el nombre baja con la de abajo).
   2) Escalonado: la barra superior baja y el contenido sube, uno tras otro. --e es la espera: 0 en una visita normal, lo que dura la cortina en la primera.
   Solo en pantalla y sin «reducir movimiento»; en el PDF y con movimiento reducido no existe nada de esto (la cortina ni siquiera se activa: lo decide el <head>).
   Sin JavaScript la cortina se retira sola (intro-fin); las animaciones usan «backwards», así que al terminar no queda ningún transform (el índice lateral sigue pegajoso).
   ============================================================ */
.intro{ display:none; }
@media screen and (prefers-reduced-motion:no-preference){
  html{ --e:0s; }
  html.entra{ --e:1.35s; }

  html.entra .intro{ display:block; position:fixed; inset:0; z-index:100; pointer-events:none; animation:intro-fin 0s 2.15s forwards; }
  .intro-t, .intro-b{ position:absolute; left:0; right:0; height:50%; display:flex; justify-content:center; background:var(--ivory); }
  .intro-t{ top:0; align-items:flex-end; padding-bottom:22px; animation:intro-arriba .75s cubic-bezier(.77,0,.18,1) 1.35s forwards; }
  .intro-b{ bottom:0; align-items:flex-start; padding-top:20px; animation:intro-abajo .75s cubic-bezier(.77,0,.18,1) 1.35s forwards; }
  .intro-t img{ height:46px; width:auto; animation:intro-logo .8s cubic-bezier(.2,.8,.2,1) .1s backwards; }
  .intro-w{ display:flex; font-family:var(--serif); font-size:var(--t-h2); line-height:1.25; letter-spacing:-.01em; color:var(--ink); }
  .intro-w > span{ display:block; overflow:hidden; padding-bottom:.14em; }
  .intro-w b{ display:block; font-weight:400; animation:intro-letra .7s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i) * 24ms) backwards; }
  .intro-l{ position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:var(--clay);
    animation:intro-linea 1s cubic-bezier(.65,0,.25,1) .15s backwards, intro-apaga .25s ease 1.3s forwards; }
  @keyframes intro-linea{ from{ transform:scaleX(0); } }
  @keyframes intro-apaga{ to{ opacity:0; } }
  @keyframes intro-logo{ from{ opacity:0; transform:translateY(14px) scale(.94); } }
  @keyframes intro-letra{ from{ transform:translateY(105%); } }
  @keyframes intro-arriba{ to{ transform:translateY(-101%); } }
  @keyframes intro-abajo{ to{ transform:translateY(101%); } }
  @keyframes intro-fin{ to{ visibility:hidden; } }

  @keyframes ent-baja{ from{ opacity:0; translate:0 -100%; } }
  @keyframes ent-sube{ from{ opacity:0; translate:0 22px; } }
  @keyframes ent-titulo{ from{ opacity:0; translate:0 .32em; filter:blur(8px); } }
  @keyframes ent-izq{ from{ opacity:0; translate:-18px 0; } }
  @keyframes ent-art{ from{ opacity:0; translate:70px 0; scale:.82; } }

  .fx .top{ animation:ent-baja .7s cubic-bezier(.2,.8,.2,1) var(--e) backwards; }
  /* portada del sitio */
  .fx .banner-in .dek{ animation:ent-sube .8s cubic-bezier(.2,.8,.2,1) calc(var(--e) + .4s) backwards; }
  .fx .banner-art{ animation:ent-art 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--e) + .3s) backwards; }
  .fx .tabbar{ animation:ent-sube .7s cubic-bezier(.2,.8,.2,1) calc(var(--e) + .55s) backwards; }
  /* guías */
  .fx body > .shell > .toc{ animation:ent-izq .8s cubic-bezier(.2,.8,.2,1) calc(var(--e) + .35s) backwards; }
  .fx body > .shell > article > .kicker{ animation:ent-sube .6s cubic-bezier(.2,.8,.2,1) calc(var(--e) + .15s) backwards; }
  .fx body > .shell > article > h1{ animation:ent-titulo .9s cubic-bezier(.2,.8,.2,1) calc(var(--e) + .25s) backwards; }
  .fx body > .shell > article > .dek{ animation:ent-sube .8s cubic-bezier(.2,.8,.2,1) calc(var(--e) + .4s) backwards; }
  .fx body > .shell > article > .chips{ animation:ent-sube .8s cubic-bezier(.2,.8,.2,1) calc(var(--e) + .52s) backwards; }
}
@media print{ .intro{ display:none !important; } }

/* ============================================================
   ESTÁNDAR DE CONTENEDORES (tablas, cuadros y marcos)
   Una sola gramática para todo lo que encierra contenido, tomada de las tablas y gráficas del blog de Anthropic:
   · MARCO: línea de 1 px en gris cálido (--box-line, suave: nunca negra), esquinas rectas (--box-r), fondo marfil, sin sombra y con el relleno --box-pad.
   · DIVISOR: la misma línea en las tablas y en las cabeceras de bloque; en los elementos internos de un marco, la línea suave --box-line-2.
   · RELLENO DE APOYO (--oat): solo para elementos internos o para un aviso destacado. Sin sombras ni degradados dentro de la página.
   · REDONDEO: únicamente en botones, etiquetas y círculos (insignias, avatares); nunca en un marco.
   · SEPARACIÓN: --box-gap entre marcos hermanos y --space-block debajo de cada bloque.
   · TEXTO: la prosa va en serif (--t-body); todo lo que está dentro de un marco, en sans (--t-ui); las etiquetas, en --t-meta.
   Esta capa va al final para que se aplique sobre los estilos de cada componente.
   ============================================================ */
:root{ --box-line:#a3a095; --box-line-2:#dcd9cd; --box-r:0px; --box-pad:20px 24px; --box-gap:16px; --box-bg:var(--ivory); }
@media (max-width:640px){ :root{ --box-pad:16px 18px; --box-gap:12px; } }

/* marcos */
.callout, .stats div, .cards div, .flow li, .lanes, .chat, .prompt, .rp-a, .rp-b, .pub, .pj-h, .agents, .sw-bar, .sw-trig, .sw.menu .sw-bar, pre{
  border:1px solid var(--box-line); border-radius:var(--box-r); background:var(--box-bg); box-shadow:none; }
.callout.importante{ background:var(--oat); }
.sw.menu .sw-bar{ box-shadow:0 18px 40px -22px rgba(20,20,19,.45); }          /* la lista desplegable flota sobre la página: es la única sombra */
.stats div, .cards div, .flow li, .lanes, .pj-h{ padding:var(--box-pad); }
.stats, .cards{ gap:var(--box-gap); } .flow{ row-gap:var(--box-gap); }
.lanes{ gap:12px var(--box-gap); }

/* tablas: rejilla completa, cabecera y primera columna en semibold, sin rellenos */
.tw{ border:0; border-radius:0; overflow-x:auto; }
table{ border:1px solid var(--box-line); border-collapse:collapse; background:var(--box-bg); }
th, td{ padding:14px 20px; border:1px solid var(--box-line); text-align:left; vertical-align:top; font-size:var(--t-ui); line-height:var(--lh-ui); color:var(--text); }
th{ background:var(--box-bg); font-weight:600; color:var(--ink); }
td:first-child{ font-weight:600; color:var(--ink); }
@media (max-width:640px){ th, td{ padding:12px 14px; } }

/* cabeceras de bloque (mensaje para la IA, comandos, conversaciones): divisor de tinta */
.pr-h, .code-h, .cw-h{ background:var(--box-bg); border-bottom:1px solid var(--box-line); border-radius:0; }
.code{ border:1px solid #141413; border-radius:var(--box-r); }       /* la consola es negra: su borde también */
.code-h{ background:#1f1f1e; border-bottom-color:rgba(255,255,255,.14); }
.prompt pre{ background:var(--box-bg); }
.prompt::after{ background:linear-gradient(rgba(250,249,245,0), var(--ivory) 85%); }
.prompt .copy, .code .copy{ border-radius:99px; }

/* elementos internos de un marco: relleno de apoyo y línea suave */
.lanes .s, .pj-g, .pj-f{ border:1px solid var(--box-line-2); border-radius:var(--box-r); box-shadow:none; }
.lanes .l0{ background:var(--oat); } .lanes .l1{ background:var(--box-bg); } .lanes .l2{ background:var(--oat); }
.pj-g{ background:var(--box-bg); } .pj-f{ background:var(--box-bg); }
.pj-f:hover{ background:var(--oat); border-color:var(--box-line); }

/* conversaciones: burbujas y campo de texto rectos y sin acento de color */
.chat, .chat.pplx{ --acc:var(--ink); }
.chat.claude .cw-m.u .cw-t, .chat.claude .cw-in, .chat.pplx .cw-in{ border-radius:var(--box-r); }
.cw-in{ background:var(--box-bg); border:1px solid var(--box-line-2); box-shadow:none; }
.cw-send, .cw-h img, .cw-av{ border-radius:50%; }
.chat.pplx .cw-who{ color:var(--muted); }

/* lista de agentes del índice */
.agents{ overflow:hidden; }
.ag + .ag{ border-top:1px solid var(--box-line); }
.ag:hover{ background:var(--oat); }
.ag-link:focus-visible::after{ border-radius:0; }

/* selector, pestañas e índice lateral */
.sw-bar button, .sw-thumb, .sw.menu .sw-bar button{ border-radius:var(--box-r); }
.sw-thumb{ background:var(--oat); box-shadow:none; }
.sw-trig{ background:var(--box-bg); }
.tabs button, .toc a{ border-radius:0; }

/* paleta y carruseles */
.pal-c, .pal-s{ border-radius:var(--box-r); }
.pal-s{ border:1px solid var(--box-line); box-shadow:none; }
.pal-c:hover .pal-s{ box-shadow:none; }
.pal-g{ gap:var(--box-gap); }
.cs .cx-card, .cf .cx-card, .cs .cx-card img, .cf .cx-card img{ border-radius:var(--box-r); }

/* dentro de una conversación todo el texto es de interfaz: sans a --t-ui (el agente ya no usa la serif de prosa) */
.chat.claude .cw-m.u .cw-t, .chat.claude .cw-m.a .cw-t, .chat.pplx .cw-m.u .cw-t, .chat.pplx .cw-m.a .cw-t{ font-family:var(--sans); font-size:var(--t-ui); line-height:var(--lh-ui); padding-top:0; padding-bottom:0; }
.chat.claude .cw-m.u .cw-t{ padding:11px 18px; }
.chat.pplx .cw-m.u .cw-t{ font-weight:600; }

/* el fragmento de código en línea lleva su propio fondo: sobre una superficie de apoyo (--oat) se usa uno más oscuro para que no se pierda */
.callout.importante code, .lanes .l0 code, .lanes .l2 code, .toc a.on code, .ag:hover code, .sw-thumb code{ background:#e4e1d3; }

/* ============================================================
   DOCK FLOTANTE
   El dock de GitHub y LinkedIn queda fijo en la esquina inferior derecha (donde estaba en el pie) y acompaña al scroll. Al llegar al final de la página
   coincide con su lugar de siempre: el pie reserva su altura y el margen es el mismo. En la impresión no existe (el pie se oculta).
   ============================================================ */
footer.site{ min-height:calc(56px + 2 * 26px); }                               /* reserva el hueco del dock: el pie no encoge al volverse fijo */
.dock{ position:fixed; z-index:40; right:var(--gut); bottom:26px; padding:6px; border-radius:18px; background:rgba(240,238,230,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--box-line-2); box-shadow:0 8px 18px -14px rgba(20,20,19,.2); }          /* flota sobre el contenido: es una capa, por eso lleva borde y sombra suave */
@media (max-width:640px){ .dock{ right:16px; bottom:16px; } footer.site{ min-height:calc(56px + 2 * 16px); } }
@media screen and (prefers-reduced-motion:no-preference){
  @keyframes ent-dock{ from{ opacity:0; translate:0 26px; } }
  .fx .dock{ animation:ent-dock .7s cubic-bezier(.2,.8,.2,1) calc(var(--e) + .9s) backwards; }
}
@media print{ .dock{ display:none !important; } }

/* ---------- elementos pegados a las esquinas ----------
   La barra superior, el pie y el dock comparten un solo margen lateral (--edge): la marca queda en la esquina izquierda y el botón de GitHub en la derecha,
   a todo el ancho de la ventana, mientras el contenido sigue en su columna de lectura. */
:root{ --edge:clamp(14px, 2vw, 28px); }
/* en reposo (arriba, o al subir) la marca y el botón de GitHub van pegados a las esquinas; al bajar se recogen a la columna de lectura (clase .interior, la pone efectos.js) */
.top{ padding:0 var(--edge); transition:padding .55s cubic-bezier(.2,.8,.2,1); }
.top-in{ max-width:100%; margin:0 auto; transition:max-width .55s cubic-bezier(.2,.8,.2,1); }
.top.interior{ padding:0 var(--gut); }
.top.interior .top-in{ max-width:var(--page-w); }
@media (prefers-reduced-motion:reduce){ .top, .top-in{ transition:none; } }
footer.site{ padding-left:var(--edge); padding-right:var(--edge); }
.dock{ right:var(--edge); }
@media (max-width:640px){ .dock{ right:var(--edge); } }