/*
 * PÚA · sitio público. Capa de marketing del sistema de diseño Flowbit.
 * Fuente de verdad: kit Flowbit, rama claude/panif-rediseno-2026-09-25 @6fe5b2381,
 * app/flowbit/tokens.css. Los valores --fb-* se copian tal cual; esta hoja sólo suma
 * lo que una web necesita y el kit no tiene: escala de títulos grandes, grilla editorial,
 * espacios de sección, botones de 48-56 px y piezas de sitio. Nada de colores sueltos:
 * si falta uno, se agrega al kit, no acá.
 */
@font-face{font-family:Haffer;src:url(/sitio/fonts/haffer-0.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Haffer;src:url(/sitio/fonts/haffer-1.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Satoshi;src:url(/sitio/fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(/sitio/fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* Marco (kit) */
  --fb-frame:#121212;--fb-frame-2:#1b1b1b;--fb-frame-3:#262626;--fb-frame-line:rgba(255,255,255,.08);
  --fb-frame-ink:#f4f4f1;--fb-frame-ink-2:#b3b3ae;--fb-frame-ink-3:#83837e;
  /* Hoja y superficies (kit) */
  --fb-sheet:#f6f5f3;--fb-surface:#ffffff;--fb-panel:#f1efec;--fb-panel-2:#e9e7e3;--fb-sunk:#e3e0db;
  --fb-line:#e6e3de;--fb-line-strong:#d2cec7;
  /* Tinta (kit) */
  --fb-ink:#111111;--fb-ink-2:#363636;--fb-ink-3:#5d5d5d;--fb-ink-4:#8f8f8b;
  /* Firma aqua (kit). En claro, el aqua va lleno en campos; como texto, sólo --fb-aqua-700. */
  --fb-aqua:#56b9ba;--fb-action:#56b9ba;--fb-action-hover:#6cc3c4;--fb-on-action:#0d2e2f;
  --fb-aqua-600:#2a9a9b;--fb-aqua-700:#1b7273;--fb-aqua-900:#0d2e2f;--fb-aqua-100:#d8efee;--fb-aqua-50:#ecf7f6;
  --fb-celeste:#93d2d3;--fb-celeste-100:#e0f2f2;
  --fb-hero:#56b9ba;--fb-hero-ink:#0d2e2f;
  /* Estados (kit): sólo para estados, nunca para grupos */
  --fb-flag-good:#2a9a9b;--fb-flag-warn:#ee9a2f;--fb-flag-bad:#e2482a;
  --fb-good-bg:#dcf1f0;--fb-good:#1b7273;--fb-warn-bg:#fcefdc;--fb-warn:#955406;--fb-bad-bg:#fce6e0;--fb-bad:#b5381d;
  --fb-up:#1b7273;--fb-down:#c23d20;
  /* Gráficos (kit) */
  --fb-data-1:#2a9a9b;--fb-data-2:#1b1b1b;--fb-data-3:#a2a29d;--fb-data-ghost:#cfcfca;--fb-grid:#ecebe7;--fb-bar:#e4e3df;--fb-bar-2:#b9b8b3;
  /* Tipografía (kit) */
  --fb-display:Haffer,Satoshi,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fb-ui:Satoshi,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Forma y movimiento (kit) */
  --fb-r-sheet:22px;--fb-r-xl:18px;--fb-r-lg:14px;--fb-r-md:10px;--fb-r-sm:8px;--fb-r-pill:999px;
  --fb-shadow-card:0 1px 2px rgba(17,17,17,.04);
  --fb-shadow-lift:0 1px 2px rgba(17,17,17,.05),0 10px 28px -14px rgba(17,17,17,.22);
  --fb-shadow-float:0 2px 8px rgba(17,17,17,.08),0 38px 80px -30px rgba(17,17,17,.42);
  --fb-shadow-sheet:0 0 0 1px rgba(0,0,0,.04),0 30px 60px -40px rgba(0,0,0,.5);
  --fb-ease:cubic-bezier(.22,1,.36,1);--fb-ease-soft:cubic-bezier(.33,1,.68,1);--fb-ease-inout:cubic-bezier(.65,0,.35,1);
  --fb-t-micro:180ms;--fb-t-ui:320ms;--fb-t-panel:560ms;--fb-t-stage:900ms;

  /* ---- Capa de sitio (nueva, sólo marketing) ---- */
  --fs-display:clamp(46px,7.2vw,112px);   /* titular de portada */
  --fs-display-2:clamp(38px,5.2vw,76px);  /* titular de sección grande */
  --fs-h2:clamp(30px,3.4vw,50px);
  --fs-h3:clamp(19px,1.6vw,23px);
  --fs-lead:clamp(17px,1.35vw,20px);
  --fs-body:16.5px;--fs-small:14px;--fs-meta:12px;
  --fig-xl:clamp(52px,6vw,88px);          /* cifra gigante (redes y portada) */
  --fig-l:clamp(34px,3.2vw,46px);
  --wrap:1240px;--gutter:clamp(16px,4vw,40px);
  --sec-y:clamp(88px,11vw,168px);
  --btn-h:52px;--btn-h-lg:58px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--fb-frame);scroll-padding-top:84px}
body{margin:0;background:var(--fb-sheet);color:var(--fb-ink);font-family:var(--fb-ui);font-size:var(--fs-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--fb-aqua-100);color:var(--fb-ink)}
:focus-visible{outline:2px solid var(--fb-aqua-600);outline-offset:3px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Tipografía */
.num{font-family:var(--fb-display);font-weight:400;font-feature-settings:"pnum" 1,"tnum" 0,"lnum" 1;letter-spacing:-.03em}
.display{font-family:var(--fb-display);font-weight:600;font-size:var(--fs-display);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.display-2{font-family:var(--fb-display);font-weight:600;font-size:var(--fs-display-2);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.h2{font-family:var(--fb-display);font-weight:600;font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
.h3{font-family:var(--fb-ui);font-weight:700;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.012em}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--fb-ink-2);text-wrap:pretty}
.eyebrow{font-size:var(--fs-meta);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fb-aqua-700)}
.meta{font-size:var(--fs-meta);color:var(--fb-ink-3)}
.on-frame .lead{color:var(--fb-frame-ink-2)}
.on-frame .eyebrow{color:var(--fb-aqua)}

/* Grilla */
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y)}
.on-frame{background:var(--fb-frame);color:var(--fb-frame-ink)}

/* Botones: 52-58 px, el principal es el único lleno */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--btn-h);padding:0 24px;border-radius:var(--fb-r-pill);
  font-weight:700;font-size:16px;text-decoration:none;border:1px solid transparent;white-space:nowrap;
  transition:background var(--fb-t-micro) var(--fb-ease),border-color var(--fb-t-micro) var(--fb-ease),transform var(--fb-t-micro) var(--fb-ease)}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--fb-action);color:var(--fb-on-action)}
.btn--primary:hover{background:var(--fb-action-hover)}
.btn--ghost{border-color:var(--fb-line-strong);color:var(--fb-ink)}
.btn--ghost:hover{border-color:var(--fb-ink-3)}
.on-frame .btn--ghost{border-color:rgba(255,255,255,.22);color:var(--fb-frame-ink)}
.on-frame .btn--ghost:hover{border-color:rgba(255,255,255,.5)}
.btn--lg{height:var(--btn-h-lg);padding:0 28px;font-size:17px}
.btn:active{transform:translateY(1px)}

/* Barra de navegación (marco) */
.nav{position:sticky;top:0;z-index:40;background:rgba(18,18,18,.88);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--fb-frame-line);color:var(--fb-frame-ink);padding-top:env(safe-area-inset-top,0px)}
.nav__in{display:flex;align-items:center;gap:28px;height:68px}
.nav__logo{display:flex;align-items:center;color:var(--fb-frame-ink);text-decoration:none}
.nav__logo svg,.nav__logo img{height:26px;width:auto}
.nav__links{display:flex;gap:4px;margin-left:auto}
.nav__links a{padding:8px 12px;border-radius:var(--fb-r-pill);text-decoration:none;font-size:15px;color:var(--fb-frame-ink-2);transition:color var(--fb-t-micro),background var(--fb-t-micro)}
.nav__links a:hover{color:var(--fb-frame-ink);background:var(--fb-frame-3)}
.nav .btn{height:42px;padding:0 18px;font-size:15px}
.nav__menu{display:none;margin-left:auto;background:none;border:1px solid var(--fb-frame-line);border-radius:var(--fb-r-pill);color:var(--fb-frame-ink);height:40px;padding:0 16px;font-weight:700;font-size:14px}
@media (max-width:960px){.nav__links{display:none}.nav__menu{display:inline-flex;align-items:center}.nav .btn{display:none}
  .nav[data-open] .nav__links{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--fb-frame);padding:12px var(--gutter) 20px;border-bottom:1px solid var(--fb-frame-line)}
  .nav[data-open] .nav__links a{padding:14px 4px;font-size:18px;border-radius:0;border-bottom:1px solid var(--fb-frame-line)}}

/* Trama «trazo»: los tres anillos del símbolo en línea fina, quieta (decisión del kit, 28/09) */
.trazo{position:relative;isolation:isolate}
.trazo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:no-repeat;background-position:calc(100% + 260px) -200px;background-size:880px 810px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 376 345' fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='.6'%3E%3Ccircle cx='72.5' cy='168.6' r='72'/%3E%3Ccircle cx='247.7' cy='72.4' r='72'/%3E%3Ccircle cx='243.4' cy='272.4' r='72'/%3E%3Ccircle cx='72.5' cy='168.6' r='52'/%3E%3Ccircle cx='247.7' cy='72.4' r='52'/%3E%3Ccircle cx='243.4' cy='272.4' r='52'/%3E%3C/svg%3E")}

/* Hoja: la superficie clara sobre el marco, como en la plataforma */
.sheet{background:var(--fb-sheet);color:var(--fb-ink);border-radius:var(--fb-r-sheet);box-shadow:var(--fb-shadow-sheet)}
.card{background:var(--fb-surface);border:1px solid var(--fb-line);border-radius:var(--fb-r-lg);box-shadow:var(--fb-shadow-card)}

/* Cifra con su comparación y su «Por qué» (FigureBand del kit, en versión web) */
.fig{display:flex;flex-direction:column;gap:6px;padding:18px 20px;min-width:0}
.fig__label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--fb-ink-2)}
.fig__label svg{width:18px;height:18px;color:var(--fb-aqua-600)}
.fig__value{font-size:var(--fig-l);line-height:1}
.fig__value small{font-size:.5em;letter-spacing:0;margin-left:2px}
.fig__delta{font-size:13px;display:flex;gap:6px;align-items:baseline;color:var(--fb-ink-3)}
.fig__delta b{font-weight:700;color:var(--fb-up)}
.fig__delta b.down{color:var(--fb-down)}
.fig__spark{height:36px;width:100%;margin-top:4px}
.fig--hero{background:var(--fb-hero);color:var(--fb-hero-ink)}
.fig--hero .fig__label,.fig--hero .fig__delta,.fig--hero .fig__delta b{color:var(--fb-hero-ink)}
.fig--hero .fig__label svg{color:var(--fb-hero-ink)}

.porque{font-size:13px}
.porque>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--fb-aqua-700);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.porque>summary::-webkit-details-marker{display:none}
.porque[open]>summary{text-decoration-style:solid}
.porque p{margin-top:8px;color:var(--fb-ink-3);line-height:1.45}
.fig--hero .porque>summary,.fig--hero .porque p{color:var(--fb-hero-ink)}

/* Flowbit IQ: pregunta del dueño y respuesta con su fuente */
.iq{display:flex;flex-direction:column;gap:12px;padding:18px}
.iq__q{align-self:flex-end;max-width:85%;background:var(--fb-aqua-100);color:var(--fb-aqua-900);font-weight:700;padding:10px 14px;border-radius:14px 14px 4px 14px;font-size:15px}
.iq__who{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--fb-ink-2)}
.iq__a{font-size:15px;line-height:1.5;color:var(--fb-ink-2)}
.iq__a b{color:var(--fb-ink)}
.iq__thinking{font-size:13px;color:var(--fb-ink-3)}

/* Conversación de un asistente (sin imitar la interfaz de WhatsApp) */
.chat{display:flex;flex-direction:column;gap:8px}
.msg{max-width:84%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45}
.msg--in{background:var(--fb-panel);color:var(--fb-ink);border-bottom-left-radius:4px}
.msg--out{background:var(--fb-frame);color:var(--fb-frame-ink);align-self:flex-end;border-bottom-right-radius:4px}
.msg__meta{display:block;font-size:11.5px;opacity:.7;margin-top:4px}

/* Chips de estado (sólo estados) */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:var(--fb-r-pill);white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip--good{background:var(--fb-good-bg);color:var(--fb-good)}
.chip--warn{background:var(--fb-warn-bg);color:var(--fb-warn)}
.chip--note{background:var(--fb-panel-2);color:var(--fb-ink-2)}
.chip--note::before{display:none}

/* Movimiento: todo se ve completo en reposo; la entrada es un agregado */
@media (prefers-reduced-motion:no-preference){
  .js [data-rise]{opacity:0;transform:translateY(18px);filter:blur(4px);transition:opacity var(--fb-t-panel) var(--fb-ease),transform var(--fb-t-panel) var(--fb-ease),filter var(--fb-t-panel) var(--fb-ease)}
  .js [data-rise].is-in{opacity:1;transform:none;filter:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}

/* Pie */
.foot{background:var(--fb-frame);color:var(--fb-frame-ink-2);font-size:14px;padding-block:56px 40px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--fb-frame-ink)}