/* ============================================================================
   Hilos Design System — bundle
   Copiado literal desde el proyecto de diseño (58d52be7…) para el sitio de Scriba.
   No editar acá: los añadidos propios de Scriba viven en scriba.css.
   ========================================================================== */

/* ── Fuentes ──────────────────────────────────────────────────────────────── */

@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;
  src:url(./fonts/c3cb240f9c892514-s.270md_-rr62el.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;
  src:url(./fonts/5c285b27cdda1fe8-s.p.0lsanbtneewqp.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(./fonts/5ce348bf30bf5439-s.27spqqad3wyeo.woff2) format("woff2");
  unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(./fonts/4fa387ec64143e14-s.3f4zuumv8svu0.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(./fonts/6306c77e7c8268e4-s.34r5yzckw0h2s.woff2) format("woff2");
  unicode-range:U+2500-259F}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(./fonts/7d817b4c03b0c5f1-s.2jyz_zw3a8jit.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(./fonts/bbc41e54d2fcbd21-s.30bdpjkrtcces.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(./fonts/797e433ab948586e-s.p.1v5bejj26fx9h.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(./fonts/0fb96d1b5bc8468e-s.3hcunrvt_bt_o.woff2) format("woff2");
  unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(./fonts/1a36275c0a5dae4b-s.452ifmvv-9yum.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(./fonts/4516abe641523af1-s.1kbk5odn53sdi.woff2) format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(./fonts/8b28f59145c251c9-s.0vjnn8p66njqx.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(./fonts/6809fa33fa73d760-s.288shi68pyvg7.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(./fonts/cef856781ea24bd1-s.p.0i67n8kf07qoy.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(./fonts/a5a3076f5a3c2968-s.2yekaq-lsxzxl.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(./fonts/23f1a98b08006014-s.32g3_4t-7pe44.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(./fonts/54fc36028e2bb174-s.p.1h6pn64pmfi2q.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Fallbacks con métricas ajustadas: el layout no salta mientras cargan. */
@font-face{font-family:"DM Sans Fallback";src:local(Arial);ascent-override:94.9%;descent-override:29.66%;line-gap-override:0.0%;size-adjust:104.53%}
@font-face{font-family:"Geist Mono Fallback";src:local(Arial);ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.0%;size-adjust:134.59%}
@font-face{font-family:"Source Serif 4 Fallback";src:local("Times New Roman");ascent-override:87.87%;descent-override:28.41%;line-gap-override:0.0%;size-adjust:117.91%}
@font-face{font-family:"Fraunces Fallback";src:local("Times New Roman");ascent-override:84.71%;descent-override:22.09%;line-gap-override:0.0%;size-adjust:115.45%}

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root, .light{
  --radius:.625rem;
  --background:#fff; --foreground:#0c0c09;
  --card:#fff; --card-foreground:#0c0c09;
  --popover:#fff; --popover-foreground:#0c0c09;
  --primary:#1d1d16; --primary-foreground:#fbfbf9;
  --secondary:#f4f4f0; --secondary-foreground:#1d1d16;
  --muted:#f4f4f0; --muted-foreground:#70705c;
  --accent:#f4f4f0; --accent-foreground:#1d1d16;
  --destructive:#e40014; --destructive-foreground:#fbfbf9;
  --border:#e8e8e3; --input:#e8e8e3; --ring:#abab9c;

  --state-human:#4cb782; --state-agent:#7c7c67; --state-working:#e0a93b;
  --state-approve:#4cb782; --state-reject:#e40014; --state-offline:#abab9c;
  --state-open:#2e9e52; --state-merged:#8451c9; --state-closed:#de3b3d;

  --bg-agent-msg:#f4f4f0;
  --illustration-ink:#10100c; --illustration-highlight:#fefefb;

  --sidebar:#fbfbf9; --sidebar-foreground:#0c0c09; --sidebar-accent:#f4f4f0; --sidebar-border:#e8e8e3;

  --moment-yellow:#f5df8d; --moment-yellow-ink:#2f2107;
  --moment-blue:#b5d5f4;   --moment-blue-ink:#0f253b;
  --moment-pink:#f6cedf;   --moment-pink-ink:#361927;
  --moment-coral:#f9b59f;  --moment-coral-ink:#3c180f;
  --moment-yellow-on-ink:#fbfaf6; --moment-blue-on-ink:#f7fafe;
  --moment-pink-on-ink:#fef8fb;   --moment-coral-on-ink:#fef9f7;
}

.dark{
  --background:#0c0c09; --foreground:#fbfbf9;
  --card:#1d1d16; --card-foreground:#fbfbf9;
  --popover:#1d1d16; --popover-foreground:#fbfbf9;
  --primary:#fbfbf9; --primary-foreground:#1d1d16;
  --secondary:#2b2b22; --secondary-foreground:#fbfbf9;
  --muted:#2b2b22; --muted-foreground:#abab9c;
  --accent:#2b2b22; --accent-foreground:#fbfbf9;
  --destructive:#ff6568; --destructive-foreground:#0c0c09;
  --border:#ffffff1a; --input:#ffffff26; --ring:#7c7c67;
  --bg-agent-msg:#2b2b22;
  --sidebar:#1d1d16; --sidebar-foreground:#fbfbf9; --sidebar-accent:#2b2b22; --sidebar-border:#ffffff1a;
  --moment-yellow:#796000; --moment-blue:#0061bf; --moment-pink:#ae1173; --moment-coral:#b62c00;
  --moment-yellow-on-ink:var(--moment-yellow); --moment-blue-on-ink:var(--moment-blue);
  --moment-pink-on-ink:var(--moment-pink);     --moment-coral-on-ink:var(--moment-coral);
}

:root{
  --font-sans:"DM Sans","DM Sans Fallback","SF Pro Display",-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --font-display:"Fraunces","Fraunces Fallback",ui-serif,Georgia,Cambria,"Times New Roman",serif;
  --font-mono:"Geist Mono","Geist Mono Fallback",ui-monospace,"SF Mono",Menlo,Monaco,"Cascadia Code",monospace;
  --font-serif:"Source Serif 4","Source Serif 4 Fallback",ui-serif,Georgia,Cambria,"Times New Roman",serif;

  /* La superficie del landing. Papel y tinta son la paleta de marketing;
     no giran con el tema. */
  --paper:#F1F2EE; --ink:#141510; --ink-muted:#6A6C62;
  --ink-hairline:rgba(20,21,16,0.12); --ink-wash:rgba(20,21,16,0.04); --chip:#E8EAE2;

  --presence-online:#3F9D6E; --presence-working:#C98A1E;
  --diff-added:#3F9D6E; --diff-removed:#C0492F;

  --tone-yellow:oklch(0.905 0.105 95);  --tone-yellow-ink:oklch(0.26 0.045 80);
  --tone-blue:oklch(0.86 0.055 248);    --tone-blue-ink:oklch(0.26 0.05 250);
  --tone-pink:oklch(0.89 0.05 350);     --tone-pink-ink:oklch(0.26 0.05 350);
  --tone-coral:oklch(0.83 0.085 38);    --tone-coral-ink:oklch(0.26 0.06 35);

  --radius-sm:calc(var(--radius) - 4px); --radius-md:var(--radius);
  --radius-lg:calc(var(--radius) + 4px); --radius-xl:calc(var(--radius) + 8px);
  --radius-2xl:1rem; --radius-3xl:1.5rem; --radius-pill:9999px; --radius-agent:28%;

  --shadow-nav:0 8px 30px rgba(28,29,24,0.12);
  --shadow-lifted:0 8px 30px rgba(28,29,24,0.16);
  --shadow-hero:0 18px 80px rgba(0,0,0,0.18);
  --shadow-pane:0 24px 60px -30px rgba(0,0,0,0.28);
  --shadow-hover:0 18px 50px -24px rgba(0,0,0,0.35);
  --shadow-film:0 24px 80px rgba(20,21,16,0.16);

  --duration-fast:120ms; --duration-base:180ms; --duration-slow:280ms;
  --ease-out:cubic-bezier(0,0,0.2,1); --ease-in-out:cubic-bezier(0.4,0,0.2,1);
  --ease-spring:cubic-bezier(0.16,1,0.3,1);
  --tracking-tight:-0.025em; --tracking-eyebrow:0.24em; --content-width:1100px;
}

/* El cromo del landing (PillNav, HeroCard, IconButton) se queda literalmente
   negro sobre blanco: esa superficie es solo-clara en hilos.sh. */
.dark{
  --paper:var(--background); --ink:var(--foreground); --ink-muted:var(--muted-foreground);
  --ink-hairline:var(--border); --ink-wash:rgba(255,255,255,0.04); --chip:var(--secondary);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

/* DM Sans es la voz por defecto de todo el documento, exactamente como lo fija
   el sitio. Sin esto, lo que se renderice fuera del ThemeProvider cae en la
   serif del navegador. */
body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.hl-root{font-family:var(--font-sans);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.hl-root *,.hl-root *::before,.hl-root *::after{box-sizing:border-box;}
.hl-surface-paper{background:var(--paper);color:var(--ink);}
.hl-surface-ink{background:var(--ink);color:var(--paper);}
.hl-surface-app{background:var(--background);color:var(--foreground);}

/* ── Tipografía ───────────────────────────────────────────────────────────── */

.hl-display{font-family:var(--font-display);font-kerning:normal;
  font-feature-settings:"kern","liga","calt";font-optical-sizing:auto;
  font-variation-settings:"SOFT" 40,"WONK" 0;font-weight:400;
  letter-spacing:-0.01em;line-height:1.05;margin:0;}
.hl-display-xl{font-size:clamp(2.4rem,7vw,5.4rem);line-height:0.98;letter-spacing:-0.02em;}
.hl-display-lg{font-size:clamp(1.9rem,4.5vw,3.4rem);line-height:1.03;}
.hl-display-md{font-size:clamp(1.9rem,4vw,3rem);}
.hl-display-sm{font-size:1.45rem;line-height:1.1;font-weight:600;}
.hl-eyebrow{font-family:var(--font-sans);font-size:0.75rem;font-weight:600;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ink-muted);margin:0;}
.hl-text{margin:0;font-family:var(--font-sans);font-size:0.875rem;line-height:1.6;color:var(--ink);}
.hl-text-muted{color:var(--ink-muted);}
.hl-text-lg{font-size:1.25rem;line-height:1.5;}
.hl-text-sm{font-size:0.8125rem;line-height:1.5;}
.hl-text-xs{font-size:0.6875rem;line-height:1.45;}
.hl-mono{font-family:var(--font-mono);font-size:0.75rem;font-variant-numeric:tabular-nums;}
.hl-serif{font-family:var(--font-serif);}

/* ── Press + botones ──────────────────────────────────────────────────────── */

.hl-press{transition:filter var(--duration-fast) var(--ease-out),
  background-color var(--duration-fast) var(--ease-out),
  color var(--duration-fast) var(--ease-out),
  border-color var(--duration-fast) var(--ease-out),
  opacity var(--duration-fast) var(--ease-out),
  box-shadow var(--duration-fast) var(--ease-out);}
.hl-press:active{filter:brightness(0.92);}

.hl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;
  border-radius:var(--radius-pill);font-family:var(--font-sans);font-weight:600;cursor:pointer;
  text-decoration:none;white-space:nowrap;}
.hl-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.hl-btn-sm{padding:.375rem 1rem;font-size:.8125rem;}
.hl-btn-md{padding:.5rem 1.25rem;font-size:.875rem;}
.hl-btn-lg{padding:.75rem 1.5rem;font-size:.875rem;}
.hl-btn-primary{background:var(--ink);color:var(--paper);}
.hl-btn-outline{background:transparent;color:var(--ink);border:2px solid #000;}
.hl-btn-paper{background:var(--paper);color:var(--ink);border:2px solid #000;box-shadow:var(--shadow-lifted);}
.hl-btn-paper:hover{background:#fff;}
.hl-btn-ghost{background:transparent;color:var(--ink);}
.hl-btn-ghost:hover{background:rgba(0,0,0,.05);}
.hl-btn-tone{background:var(--tone-ink,var(--ink));color:var(--tone,var(--paper));}
.hl-btn-square{border-radius:var(--radius-md);}
.hl-btn[disabled],.hl-btn[aria-disabled="true"]{opacity:.5;pointer-events:none;}

.hl-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;
  height:2.25rem;padding:0;border-radius:var(--radius-pill);border:2px solid #000;background:#fff;
  color:#000;cursor:pointer;box-shadow:0 10px 40px rgba(0,0,0,.16);}
.hl-icon-btn:hover{background:var(--muted);}

/* ── Nav pill ─────────────────────────────────────────────────────────────── */

.hl-pillnav{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem;
  border-radius:var(--radius-pill);border:2px solid #000;background:#fff;box-shadow:var(--shadow-nav);}
.hl-pillnav-brand{border-radius:var(--radius-pill);padding:.375rem .75rem;font-size:1rem;
  font-weight:600;letter-spacing:var(--tracking-tight);color:var(--ink);text-decoration:none;}
.hl-pillnav-item{border-radius:var(--radius-pill);padding:.375rem .75rem;font-size:.875rem;
  color:rgba(20,21,16,.75);text-decoration:none;
  transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out);}
.hl-pillnav-item:hover,.hl-pillnav-item[aria-current="page"]{background:rgba(0,0,0,.05);color:var(--ink);}

/* ── Badges y menciones ───────────────────────────────────────────────────── */

.hl-badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--radius-sm);
  padding:1px .25rem;font-size:.5625rem;font-weight:600;letter-spacing:.025em;
  text-transform:uppercase;background:var(--chip);color:var(--ink-muted);}
.hl-badge-open{background:color-mix(in srgb,var(--state-open) 16%,transparent);color:var(--state-open);}
.hl-badge-merged{background:color-mix(in srgb,var(--state-merged) 16%,transparent);color:var(--state-merged);}
.hl-badge-closed{background:color-mix(in srgb,var(--state-closed) 16%,transparent);color:var(--state-closed);}
.hl-badge-working{background:color-mix(in srgb,var(--state-working) 18%,transparent);color:var(--presence-working);}
.hl-badge-approve{background:color-mix(in srgb,var(--state-approve) 18%,transparent);color:var(--presence-online);}
.hl-mention{border-radius:var(--radius-sm);padding:0 .25rem;font-weight:500;background:var(--chip);color:var(--ink);}

/* ── Avatares. La forma ES la semántica: personas círculo, agentes squircle. ── */

.hl-avatar{position:relative;display:inline-block;flex-shrink:0;vertical-align:middle;}
.hl-avatar-img{display:block;width:100%;height:100%;overflow:hidden;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--ink-hairline);}
.hl-avatar-img > img,.hl-avatar-img > svg{width:100%;height:100%;object-fit:cover;display:block;}
.hl-avatar-human .hl-avatar-img{border-radius:var(--radius-pill);}
.hl-avatar-agent .hl-avatar-img{border-radius:var(--radius-agent);}
.hl-avatar-presence{position:absolute;right:0;bottom:0;width:.625rem;height:.625rem;
  border-radius:var(--radius-pill);box-shadow:0 0 0 2px #fff;}
.hl-avatar-stack > * + *{margin-left:-.375rem;transition:margin var(--duration-base) var(--ease-out);}
.hl-avatar-stack:hover > * + *{margin-left:.125rem;}

/* ── Superficies ──────────────────────────────────────────────────────────── */

.hl-card{border-radius:var(--radius-xl);background:var(--card);box-shadow:inset 0 0 0 1px var(--ink-hairline);}
.hl-card-raised{box-shadow:var(--shadow-pane),inset 0 0 0 1px var(--ink-hairline);}
.hl-card-pad{padding:1.75rem;}

.hl-hero-card{position:relative;width:100%;max-width:42rem;border-radius:var(--radius-3xl);
  border:3px solid #000;background:#fff;padding:2.5rem 1.5rem;text-align:center;
  color:var(--ink);box-shadow:var(--shadow-hero);}
@media (min-width:640px){.hl-hero-card{padding-left:2.5rem;padding-right:2.5rem;}}

.hl-moment{display:flex;flex-direction:column;height:100%;border-radius:var(--radius-2xl);
  padding:1.75rem;background:var(--tone);color:var(--tone-ink);}
.hl-moment-art{display:flex;flex:1;align-items:center;justify-content:center;padding:.5rem 0;}
.hl-moment-art img{height:8rem;width:auto;max-width:100%;object-fit:contain;}
.hl-moment-body p{opacity:.82;}

.hl-feature-col{padding:1.5rem 0;border-top:1px solid var(--ink-hairline);}
.hl-feature-col:first-child{border-top:0;}
.hl-feature-col img{height:6rem;width:auto;margin-bottom:1.25rem;}
@media (min-width:640px){
  .hl-feature-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  .hl-feature-col{border-top:0;border-left:1px solid var(--ink-hairline);padding:.25rem 2rem;}
  .hl-feature-col:first-child{border-left:0;padding-left:0;}
}

/* ── Superficie de producto ───────────────────────────────────────────────── */

.hl-pane{border-radius:var(--radius-xl);background:var(--card);
  box-shadow:var(--shadow-pane),inset 0 0 0 1px var(--ink-hairline);overflow:hidden;}
.hl-pane-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.75rem 1rem;box-shadow:inset 0 -1px 0 var(--ink-hairline);}
.hl-pane-body{padding:1rem;display:grid;gap:.875rem;}
.hl-msg{display:flex;gap:.625rem;align-items:flex-start;}
.hl-msg-bubble{border-radius:var(--radius-lg);padding:.625rem .875rem;font-size:.8125rem;
  line-height:1.55;background:var(--muted);color:var(--foreground);max-width:34rem;}
.hl-msg-agent .hl-msg-bubble{background:var(--bg-agent-msg);}
.hl-msg-name{font-size:.75rem;font-weight:600;color:var(--ink);}
.hl-msg-time{font-family:var(--font-mono);font-size:.6875rem;color:var(--ink-muted);}
.hl-typing{display:inline-flex;gap:.25rem;align-items:center;}
.hl-typing-dot{width:.3125rem;height:.3125rem;border-radius:var(--radius-pill);background:var(--ink-muted);}
.hl-typing-dot:nth-child(2){animation-delay:.16s;}
.hl-typing-dot:nth-child(3){animation-delay:.32s;}

/* ── Report card. Una tarjeta sin salvedades es una mentira. ──────────────── */

.hl-report{max-width:28rem;border-radius:var(--radius-xl);background:var(--card);
  box-shadow:inset 0 0 0 1px var(--ink-hairline);padding:1.125rem;
  transition:box-shadow var(--duration-base) var(--ease-out);}
.hl-report:hover{box-shadow:var(--shadow-hover),inset 0 0 0 1px var(--ink-hairline);}
.hl-report-title{font-family:var(--font-display);font-variation-settings:"SOFT" 40,"WONK" 0;
  font-size:1.0625rem;line-height:1.2;margin:0 0 .25rem;}
.hl-report-indent{margin-left:42px;}
.hl-report-caveat{display:flex;gap:.5rem;font-size:.75rem;line-height:1.5;color:var(--ink-muted);}
.hl-report-caveat::before{content:"—";flex:none;}

.hl-chip-solid{display:inline-flex;align-items:center;gap:.375rem;border-radius:var(--radius-pill);
  padding:.25rem .625rem;font-size:.75rem;font-weight:600;background:var(--ink);color:var(--paper);}
.hl-chip-outline{display:inline-flex;align-items:center;gap:.375rem;border-radius:var(--radius-pill);
  padding:.25rem .625rem;font-size:.75rem;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-hairline);}
.hl-diffstat-add{color:var(--diff-added);font-family:var(--font-mono);font-size:.75rem;}
.hl-diffstat-del{color:var(--diff-removed);font-family:var(--font-mono);font-size:.75rem;}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.hl-faq-item{border-top:1px solid var(--ink-hairline);}
.hl-faq-item:last-child{border-bottom:1px solid var(--ink-hairline);}
.hl-faq-trigger{display:grid;grid-template-columns:1.75rem 1fr auto;align-items:start;gap:1rem;
  width:100%;padding:1.5rem 0;background:none;border:0;text-align:left;cursor:pointer;color:var(--ink);}
.hl-faq-index{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-muted);padding-top:.35rem;}
.hl-faq-question{font-family:var(--font-display);font-variation-settings:"SOFT" 40,"WONK" 0;
  font-size:1.15rem;line-height:1.25;margin:0;}
@media (min-width:640px){.hl-faq-question{font-size:1.35rem;}}
.hl-faq-caret{flex:none;transition:transform var(--duration-base) var(--ease-out);margin-top:.35rem;}
.hl-faq-item[data-open="true"] .hl-faq-caret{transform:rotate(180deg);}
.hl-faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration-slow) var(--ease-out);}
.hl-faq-item[data-open="true"] .hl-faq-panel{grid-template-rows:1fr;}
.hl-faq-panel > div{overflow:hidden;}
.hl-faq-answer{max-width:65ch;padding:0 0 1.5rem 2.75rem;font-size:.9375rem;line-height:1.65;color:var(--ink-muted);margin:0;}

/* ── Testimonios, logos, CTA, footer ──────────────────────────────────────── */

.hl-testimonial{border-radius:var(--radius-2xl);padding:1.75rem;
  background:color-mix(in srgb,var(--muted) 40%,transparent);
  transition:background-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out);}
.hl-testimonial:hover{background:var(--tone);}
.hl-testimonial:hover .hl-testimonial-quote,.hl-testimonial:hover .hl-testimonial-name{color:var(--tone-ink);}
.hl-testimonial-quote{font-family:var(--font-serif);font-size:1.0625rem;line-height:1.6;margin:0 0 1.25rem;}
.hl-testimonial-name{font-size:.8125rem;font-weight:600;}
.hl-testimonial-role{font-size:.75rem;color:var(--ink-muted);}

.hl-logowall{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2.5rem;opacity:.7;}
.hl-logowall span{font-family:var(--font-display);font-variation-settings:"SOFT" 40,"WONK" 0;
  font-size:1.25rem;color:var(--ink-muted);}

.hl-cta{border-radius:var(--radius-3xl);background:var(--tone);color:var(--tone-ink);
  padding:3rem 1.5rem;text-align:center;}
.hl-cta img{height:7rem;width:auto;margin:0 auto 1.5rem;display:block;}
@media (min-width:640px){.hl-cta{padding:4rem 3rem;} .hl-cta img{height:8rem;}}

.hl-footer{background:var(--ink);color:var(--paper);}
.hl-footer-inner{margin:0 auto;max-width:var(--content-width);padding:4rem 1.5rem;}
.hl-footer-tagline{font-family:var(--font-display);font-variation-settings:"SOFT" 40,"WONK" 0;
  font-size:1.375rem;font-weight:600;line-height:1.2;margin:0;}
.hl-footer a{color:var(--paper);opacity:.7;text-decoration:none;font-size:.8125rem;}
.hl-footer a:hover{opacity:1;}
.hl-footer-cta{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--radius-pill);
  background:#fff;color:var(--ink);padding:.5rem 1.25rem;font-size:.875rem;font-weight:600;
  text-decoration:none;opacity:1;}

/* ── Formularios ──────────────────────────────────────────────────────────── */

.hl-input,.hl-textarea,.hl-select{width:100%;border-radius:var(--radius-md);background:var(--background);
  color:var(--foreground);font-family:var(--font-sans);font-size:.875rem;padding:.5rem .75rem;
  border:1px solid var(--input);outline:none;
  transition:box-shadow var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);}
.hl-input:focus-visible,.hl-textarea:focus-visible,.hl-select:focus-visible{
  border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 40%,transparent);}
.hl-switch{position:relative;display:inline-flex;align-items:center;width:2.25rem;height:1.25rem;
  border-radius:var(--radius-pill);background:var(--muted);border:1px solid var(--input);cursor:pointer;padding:0;}
.hl-switch[aria-checked="true"]{background:var(--ink);border-color:var(--ink);}
.hl-switch-thumb{position:absolute;width:.875rem;height:.875rem;border-radius:var(--radius-pill);
  background:#fff;transform:translateX(.125rem);transition:transform var(--duration-base) var(--ease-out);}
.hl-switch[aria-checked="true"] .hl-switch-thumb{transform:translateX(1.125rem);}
.hl-checkbox{width:1rem;height:1rem;border-radius:var(--radius-sm);border:1px solid var(--input);
  display:inline-grid;place-items:center;background:var(--background);cursor:pointer;}
.hl-checkbox[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.hl-tabs-list{display:inline-flex;gap:.25rem;padding:.25rem;border-radius:var(--radius-pill);background:var(--muted);}
.hl-tab{border:0;background:none;border-radius:var(--radius-pill);padding:.375rem .875rem;
  font-size:.8125rem;font-weight:600;color:var(--ink-muted);cursor:pointer;}
.hl-tab[aria-selected="true"]{background:var(--background);color:var(--ink);box-shadow:var(--shadow-nav);}
.hl-tooltip{border-radius:var(--radius-md);background:var(--ink);color:var(--paper);
  padding:.375rem .625rem;font-size:.75rem;box-shadow:var(--shadow-lifted);}
.hl-dialog-overlay{position:fixed;inset:0;background:rgba(20,21,16,.4);}
.hl-dialog{border-radius:var(--radius-xl);background:var(--card);padding:1.75rem;
  box-shadow:var(--shadow-film),inset 0 0 0 1px var(--ink-hairline);}

/* ── El gentío ────────────────────────────────────────────────────────────── */

.hl-crowd{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--paper);}
.hl-crowd-figure{position:absolute;height:auto;max-width:none;user-select:none;
  pointer-events:none;transform-origin:50% 72%;
  transition:transform 90ms cubic-bezier(0.2,0,0,1),filter 260ms ease;}
.hl-crowd-stage{position:relative;isolation:isolate;display:flex;min-height:100%;
  flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  background:var(--paper);color:var(--ink);padding:6rem 1rem;}
.hl-sound-toggle{position:absolute;bottom:1rem;left:1rem;z-index:60;}

/* ── Movimiento ───────────────────────────────────────────────────────────── */

.hl-breathe{animation:hl-breathe 2s var(--ease-in-out) infinite;}
.hl-typing-dot{animation:hl-typing-dot 1.3s var(--ease-in-out) infinite;}
.hl-landing-enter{animation:hl-landing-enter .55s var(--ease-spring) both;}
.hl-poke{animation:hl-crowd-poke 420ms var(--ease-out);}
.hl-reveal{transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);will-change:opacity,transform;}
.hl-reveal[data-pending="true"]{opacity:0;transform:translateY(var(--reveal-shift,14px));}
@keyframes hl-breathe{0%,100%{opacity:1;}50%{opacity:.45;}}
@keyframes hl-typing-dot{0%,70%,100%{opacity:.3;}35%{opacity:1;}}
@keyframes hl-landing-enter{0%{opacity:0;transform:translateY(10px);}100%{opacity:1;transform:none;}}
@keyframes hl-crowd-poke{0%,100%{rotate:none;}30%{rotate:-7deg;}65%{rotate:5deg;}}
@keyframes hl-fade-in{0%{opacity:0;}100%{opacity:1;}}
@keyframes hl-scale-in{0%{opacity:0;transform:scale(.98);}100%{opacity:1;transform:scale(1);}}
@media (prefers-reduced-motion:reduce){
  .hl-breathe,.hl-typing-dot,.hl-landing-enter,.hl-poke{animation:none;}
  .hl-reveal[data-pending="true"]{opacity:1;transform:none;}
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

.hl-section{margin:0 auto;max-width:var(--content-width);padding:4rem 1.5rem;}
.hl-stack{display:grid;gap:1rem;}
.hl-row{display:flex;align-items:center;gap:.75rem;}
.hl-grid-2{display:grid;gap:1rem;}
.hl-grid-3{display:grid;gap:1rem;}
@media (min-width:640px){
  .hl-section{padding:6rem 1.5rem;}
  .hl-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1024px){.hl-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}}


/* ESQUELETO DE CARGA — Socrates 19-sep-2026. La forma de la respuesta que viene. */
.sw-esq{display:grid;gap:.5rem;width:100%;margin-top:.5rem}
.sw-esq-b{display:block;height:.7rem;border-radius:var(--radius-pill,6px);background:var(--surface-soft,rgba(127,127,127,.14));position:relative;overflow:hidden}
.sw-esq-b::after{content:'';position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0%,var(--surface,rgba(255,255,255,.5)) 50%,transparent 100%);transform:translateX(-100%);animation:sw-esq-brillo 1.45s var(--ease-in-out,ease-in-out) infinite}
.sw-esq-b.w95{width:95%}.sw-esq-b.w88{width:88%}.sw-esq-b.w64{width:64%}
@keyframes sw-esq-brillo{100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.sw-esq-b::after{animation:none;opacity:0}}