/* ═════════════════════════════════════════════════════════════════════════
   GestiwIA · gestiwia.com
   Clara con punto rojo: blanco, negro y el rojo de Gestiweb como único acento;
   titulares Raleway 800 con el punto final en rojo, cifras en Montserrat.
   Sin sombras ni degradados: líneas, planos y movimiento. Todo el movimiento
   se apaga con prefers-reduced-motion.
   ═════════════════════════════════════════════════════════════════════════ */
@layer tokens, base, layout, componentes, paginas, utilidades;

/* ── Fuentes (las del kit de la casa, servidas desde aquí) ── */
@font-face {
  font-family: 'Raleway'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('../fuentes/Raleway-Variable-latin.woff2') format('woff2');
  unicode-range: U+0000-002F, U+003A-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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: 'Raleway'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('../fuentes/Raleway-Variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* las cifras, con Montserrat: más legibles */
@font-face {
  font-family: 'Raleway'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('../fuentes/Montserrat-Variable-latin.woff2') format('woff2');
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: 'Montserrat'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('../fuentes/Montserrat-Variable-latin.woff2') format('woff2');
}

@layer tokens {
  :root {
    --acento: #b90e2b;
    --acento-oscuro: #900b22;
    --acento-suave: #fbe9ec;
    --negro: #0b0b0c;
    --tinta: #26262a;
    --tinta-suave: #5c5c64;
    --tinta-tenue: #8a8a92;
    --linea: #e4e4e8;
    --linea-fuerte: #c9c9cf;
    --panel: #f4f4f5;
    --blanco: #ffffff;
    --ok: #00a870;
    --ok-texto: #00764f;
    --aviso: #9a5b00;

    --letra: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cifras: 'Montserrat', 'Raleway', system-ui, sans-serif;
    --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --ancho: 1180px;
    --gutter: 16px;
    --cab: 72px;
    --seccion: clamp(64px, 9vw, 136px);
    --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem; --e8: 4rem;

    --t-h1: clamp(2.35rem, 1.15rem + 4.6vw, 5rem);
    --t-h2: clamp(1.9rem, 1.1rem + 3vw, 3.4rem);
    --t-h3: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
    --t-frase: clamp(2rem, 1rem + 4vw, 4.4rem);
    --t-entrada: clamp(1.15rem, 1.02rem + .55vw, 1.45rem);

    --ease: cubic-bezier(.2, .7, .2, 1);
    --rapido: .18s;
    --medio: .45s;
    --lento: .8s;
    color-scheme: light;
  }
  @media (min-width: 720px) { :root { --gutter: 24px; } }
  @media (min-width: 1100px) { :root { --gutter: 32px; } }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 16px); }
  body {
    margin: 0; background: var(--blanco); color: var(--tinta);
    font-family: var(--letra); font-size: 1.0625rem; line-height: 1.6; font-weight: 450;
    font-feature-settings: 'lnum' 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  @media (min-width: 720px) { body { font-size: 1.125rem; } }
  img, svg, video, canvas { display: block; max-width: 100%; }
  img { height: auto; }
  h1, h2, h3, h4 { color: var(--negro); font-weight: 800; line-height: 1.06; letter-spacing: -.025em; margin: 0 0 var(--e4); text-wrap: balance; }
  h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.035em; }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.01em; }
  p { margin: 0 0 var(--e4); text-wrap: pretty; }
  ul, ol { margin: 0 0 var(--e4); padding-left: 1.2em; }
  a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: .18em; }
  a:hover { color: var(--acento-oscuro); text-decoration-thickness: 2px; }
  strong, b { font-weight: 750; color: var(--negro); }
  :focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
  ::selection { background: var(--acento); color: #fff; }
  button, input, textarea, select { font: inherit; color: inherit; }
  [hidden] { display: none !important; }
}

@layer layout {
  .ajuste { width: 100%; max-width: calc(var(--ancho) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .estrecho { max-width: calc(780px + 2 * var(--gutter)); }
  .seccion { padding-block: var(--seccion); position: relative; }
  .seccion + .seccion:not(.seccion-panel):not(.seccion-negra):not(.seccion-roja) { border-top: 1px solid var(--linea); }
  .seccion-panel { background: var(--panel); }
  .seccion-negra { background: var(--negro); color: #d9d9de; }
  .seccion-roja { background: var(--acento); color: #fff; }
  .seccion-negra :is(h1, h2, h3, strong), .seccion-roja :is(h1, h2, h3, strong) { color: #fff; }
  .seccion-negra a:not(.boton), .seccion-roja a:not(.boton) { color: #fff; }
  .seccion-roja .con-punto::after { color: var(--negro); }
  .cabeza-seccion { max-width: 820px; margin-bottom: clamp(var(--e6), 5vw, var(--e8)); }
  .cabeza-seccion.centro { margin-inline: auto; text-align: center; }
  .dos-col { display: grid; gap: clamp(var(--e6), 5vw, var(--e8)); align-items: center; }
  @media (min-width: 960px) {
    .dos-col { grid-template-columns: 1fr 1fr; }
    .dos-col.texto-ancho { grid-template-columns: 1.15fr .85fr; }
    .dos-col.visual-ancho { grid-template-columns: .85fr 1.15fr; }
  }
  .rejilla { display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .rejilla-3 { display: grid; gap: var(--e5); }
  @media (min-width: 840px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }
}

@layer componentes {
  /* ── Saltar al contenido ── */
  .saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--negro); color: #fff; padding: 12px 16px; font-weight: 700; text-decoration: none; }
  .saltar:focus { top: 12px; color: #fff; }

  /* ── Tipografía de la casa ── */
  .antetitulo { display: inline-flex; align-items: center; gap: .6em; font-size: .8125rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; color: var(--acento); margin: 0 0 var(--e4); }
  .antetitulo::before { content: ''; width: 22px; height: 2px; background: currentColor; }
  .seccion-negra .antetitulo, .seccion-roja .antetitulo { color: #fff; }
  .seccion-negra .antetitulo::before { background: var(--acento); }
  .con-punto::after { content: '.'; color: var(--acento); }
  .entrada { font-size: var(--t-entrada); line-height: 1.5; color: var(--tinta-suave); font-weight: 500; max-width: 60ch; }
  .seccion-negra .entrada { color: #bdbdc4; }
  .seccion-roja .entrada { color: #fff; }
  .nota { font-size: .9rem; color: var(--tinta-suave); }
  .cifra { font-family: var(--cifras); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.03em; }
  .rojo { color: var(--acento); }

  /* ── Botones ── */
  .botones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }
  .boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: .75em 1.35em;
    border: 2px solid var(--negro); background: var(--negro); color: #fff; font-weight: 750; font-size: 1rem; line-height: 1.2;
    text-decoration: none; cursor: pointer; transition: background-color var(--rapido), color var(--rapido), border-color var(--rapido);
  }
  .boton .ico { width: 1.15em; height: 1.15em; transition: transform var(--rapido) var(--ease); }
  .boton:hover { background: var(--acento); border-color: var(--acento); color: #fff; text-decoration: none; }
  .boton:hover .ico { transform: translateX(4px); }
  .boton-rojo { background: var(--acento); border-color: var(--acento); }
  .boton-rojo:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
  .boton-borde { background: transparent; color: var(--negro); }
  .boton-borde:hover { background: var(--negro); border-color: var(--negro); }
  .boton-claro { background: transparent; color: #fff; border-color: #fff; }
  .boton-claro:hover { background: #fff; color: var(--negro); border-color: #fff; }
  .seccion-roja .boton-rojo { background: var(--negro); border-color: var(--negro); }
  .enlace-flecha { display: inline-flex; align-items: center; gap: .45em; min-height: 32px; font-weight: 750; text-decoration: none; color: var(--negro); }
  .enlace-flecha .ico { width: 1.1em; height: 1.1em; color: var(--acento); transition: transform var(--rapido) var(--ease); }
  .enlace-flecha:hover { color: var(--acento); }
  .enlace-flecha:hover .ico { transform: translateX(4px); }

  .ico { width: 24px; height: 24px; flex: none; }

  /* ── Cabecera ── */
  .cabecera { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); border-bottom: 1px solid transparent; transition: border-color var(--medio); }
  @supports (backdrop-filter: blur(8px)) { .cabecera { background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.4) blur(12px); } }
  .cabecera.con-linea { border-bottom-color: var(--linea); }
  .cabecera-in { display: flex; align-items: center; justify-content: space-between; gap: var(--e5); height: var(--cab); }
  .marca { display: inline-flex; align-items: baseline; gap: .55em; text-decoration: none; color: var(--negro); }
  .marca:hover { color: var(--negro); }
  .marca-nombre { font-size: 1.6rem; font-weight: 850; letter-spacing: -.045em; line-height: 1; }
  .marca-ia { color: var(--acento); }
  .marca-by { font-size: .75rem; font-weight: 650; color: var(--tinta-suave); letter-spacing: .02em; white-space: nowrap; }
  .menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(.75rem, 1.6vw, 1.75rem); }
  .menu a:not(.boton) { color: var(--negro); text-decoration: none; font-weight: 650; font-size: .98rem; position: relative; padding-block: .5em; }
  .menu a:not(.boton)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--acento); transform: scaleX(0); transform-origin: left; transition: transform var(--medio) var(--ease); }
  .menu a:not(.boton):hover::after, .menu a[aria-current]::after { transform: scaleX(1); }
  .menu-boton { display: none; width: 48px; height: 48px; border: 0; background: none; padding: 12px; cursor: pointer; color: var(--negro); }
  .menu-boton .ico-cerrar { display: none; }
  .menu-cta { min-height: 44px; padding: .55em 1.1em; }
  @media (min-width: 1040px) {
    .menu { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
  }
  @media (max-width: 1039.98px) {
    .menu-boton { display: inline-flex; }
    .menu {
      position: fixed; inset: var(--cab) 0 0 0; background: var(--blanco); padding: var(--e6) var(--gutter) calc(var(--e7) + env(safe-area-inset-bottom));
      display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto;
      visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--medio) var(--ease), transform var(--medio) var(--ease), visibility 0s linear var(--medio);
    }
    .menu ul { flex-direction: column; gap: 0; }
    .menu li { border-bottom: 1px solid var(--linea); }
    .menu a:not(.boton) { display: flex; align-items: center; min-height: 64px; font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
    .menu a:not(.boton)::after { display: none; }
    .menu a[aria-current] { color: var(--acento); }
    .menu-cta { margin-top: var(--e6); width: 100%; min-height: 56px; font-size: 1.1rem; }
    body.menu-abierto { overflow: hidden; }
    body.menu-abierto .menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
    body.menu-abierto .menu-boton .ico-abrir { display: none; }
    body.menu-abierto .menu-boton .ico-cerrar { display: block; }
  }

  /* ── Revelado al hacer scroll (solo con JS; sin JS todo se ve) ── */
  .js .rv { opacity: 0; transform: translateY(24px); transition: opacity var(--lento) var(--ease), transform var(--lento) var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .rv.visto { opacity: 1; transform: none; }

  /* ── Etiqueta de estado de un agente ── */
  .estado { display: inline-flex; flex: none; white-space: nowrap; align-items: center; gap: .5em; font-size: .78rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; padding: .35em .7em; border: 1px solid currentColor; line-height: 1.2; }
  .estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .estado-marcha { color: var(--ok-texto); }
  .estado-medida { color: var(--acento); }
  .estado-marcha::before { animation: latido 2.4s var(--ease) infinite; }

  /* ── Tarjetas de agente ── */
  .tarjetas { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); grid-template-columns: 1fr; }
  @media (min-width: 640px) { .tarjetas { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 980px) { .tarjetas { grid-template-columns: repeat(3, 1fr); } }
  .tarjetas.programas { background: transparent; border: 0; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .tarjetas.programas .tarjeta { border: 1px solid var(--linea-fuerte); min-height: 0; padding: var(--e5); }
  .tarjeta { position: relative; background: var(--blanco); padding: var(--e6) var(--e5) var(--e5); display: flex; flex-direction: column; gap: var(--e3); min-height: 280px; text-decoration: none; color: var(--tinta); transition: background-color var(--medio); }
  .tarjeta::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--acento); transform: scaleX(0); transform-origin: left; transition: transform var(--medio) var(--ease); }
  .tarjeta:hover { background: #fcfcfd; color: var(--tinta); }
  .tarjeta:hover::before, .tarjeta:focus-visible::before { transform: scaleX(1); }
  .tarjeta-ico { width: 52px; height: 52px; display: grid; place-items: center; background: var(--panel); color: var(--negro); transition: background-color var(--medio), color var(--medio); }
  .tarjeta-ico .ico { width: 28px; height: 28px; }
  .tarjeta:hover .tarjeta-ico { background: var(--acento); color: #fff; }
  .tarjeta h3 { margin: var(--e2) 0 0; font-size: 1.35rem; }
  .tarjeta p { margin: 0; color: var(--tinta-suave); font-size: 1rem; }
  .tarjeta .estado { align-self: flex-start; margin-top: auto; }
  .tarjeta-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-top: auto; padding-top: var(--e4); }
  .tarjeta-pie .ico { color: var(--acento); transition: transform var(--rapido) var(--ease); }
  .tarjeta:hover .tarjeta-pie .ico { transform: translateX(5px); }

  /* ── Lista con números 01 / 02 / 03 ── */
  .numerada { list-style: none; padding: 0; margin: 0; counter-reset: n; display: grid; gap: 0; }
  .numerada > li { counter-increment: n; display: grid; grid-template-columns: 3.2rem 1fr; gap: var(--e3); padding: var(--e5) 0; border-top: 1px solid var(--linea); }
  .numerada > li:last-child { border-bottom: 1px solid var(--linea); }
  .numerada > li::before { content: counter(n, decimal-leading-zero); font-family: var(--cifras); font-weight: 800; color: var(--acento); font-size: 1.05rem; padding-top: .15em; }
  .numerada strong { display: block; font-size: 1.2rem; margin-bottom: .2em; }
  .numerada p { margin: 0; color: var(--tinta-suave); }
  .seccion-negra .numerada > li { border-color: #2c2c31; }
  .seccion-negra .numerada p { color: #bdbdc4; }

  /* ── Lista con ✓ ── */
  .marcas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
  .marcas li { display: grid; grid-template-columns: 28px 1fr; gap: var(--e3); align-items: start; }
  .marcas .ico { width: 22px; height: 22px; color: var(--ok); margin-top: .15em; }
  .marcas .no .ico { color: var(--acento); }

  /* ── Flujo animado: llega → lo entiende → … → tú revisas ── */
  .flujo { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e5); --avance: 0; }
  .flujo::before, .flujo::after { content: ''; position: absolute; background: var(--linea-fuerte); }
  .flujo::after { background: var(--acento); transition: transform 1s var(--ease); }
  .flujo-paso { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--e4); align-items: start; }
  .flujo-num { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; background: var(--blanco); border: 2px solid var(--linea-fuerte); color: var(--tinta-suave); font-family: var(--cifras); font-weight: 800; font-size: 1rem; transition: background-color var(--medio), border-color var(--medio), color var(--medio), transform var(--medio) var(--ease); }
  .flujo-num .ico { width: 26px; height: 26px; }
  .flujo-paso h3 { margin: .35em 0 .25em; color: var(--tinta-suave); transition: color var(--medio); }
  .flujo-paso p { margin: 0; color: var(--tinta-suave); font-size: 1rem; }
  .flujo-paso.on .flujo-num { background: var(--negro); border-color: var(--negro); color: #fff; }
  .flujo-paso.on h3 { color: var(--negro); }
  .flujo-paso.ahora .flujo-num { background: var(--acento); border-color: var(--acento); transform: scale(1.08); }
  .flujo-paso:last-child.on .flujo-num { background: var(--ok); border-color: var(--ok); }
  .flujo::before { left: 27px; top: 28px; bottom: 28px; width: 2px; }
  .flujo::after { left: 27px; top: 28px; bottom: 28px; width: 2px; transform-origin: top; transform: scaleY(var(--avance)); }
  @media (min-width: 900px) {
    .flujo { grid-template-columns: repeat(var(--n, 5), 1fr); gap: var(--e4); }
    .flujo-paso { grid-template-columns: 1fr; gap: var(--e3); }
    .flujo::before, .flujo::after { left: 28px; right: calc(100% / var(--n, 5) - 28px); top: 27px; bottom: auto; width: auto; height: 2px; }
    .flujo::after { transform-origin: left; transform: scaleX(var(--avance)); }
  }
  .seccion-panel .flujo-num { background: var(--panel); }

  /* ── Frase grande ── */
  .frase { font-size: var(--t-frase); line-height: 1.04; letter-spacing: -.035em; max-width: 18ch; margin-bottom: var(--e5); }
  .frase-ancha { max-width: 24ch; }
  .chips { list-style: none; padding: 0; margin: var(--e6) 0 0; display: flex; flex-wrap: wrap; gap: var(--e3); }
  .chips li { border: 1px solid #3a3a40; padding: .55em 1em; font-weight: 650; font-size: 1rem; color: #fff; display: inline-flex; align-items: center; gap: .55em; }
  .chips .ico { width: 20px; height: 20px; color: var(--acento); }
  .seccion-roja .chips li { border-color: rgba(255, 255, 255, .55); }
  .seccion-roja .chips .ico { color: #fff; }

  /* ── Panel de interfaz (las maquetas y el panel del agente) ── */
  .ventana { background: var(--blanco); border: 1px solid var(--linea-fuerte); position: relative; }
  .ventana-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: .8rem 1.1rem; background: var(--negro); color: #fff; font-weight: 700; font-size: .95rem; }
  .ventana-barra small { font-weight: 600; color: #bdbdc4; font-size: .82rem; display: inline-flex; align-items: center; gap: .45em; }
  .ventana-barra small::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: latido 2s var(--ease) infinite; }
  .ventana-cuerpo { padding: var(--e4) 1.1rem; }
  .ventana-etiqueta { position: absolute; top: -12px; right: 14px; z-index: 2; background: var(--acento-suave); color: var(--acento-oscuro); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .3em .6em; border: 1px solid #f1c7cf; }
  .fila { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--e3); align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--linea); }
  .fila:last-child { border-bottom: 0; }
  .fila-ico { width: 36px; height: 36px; display: grid; place-items: center; background: var(--panel); color: var(--negro); }
  .fila-ico .ico { width: 20px; height: 20px; }
  .fila-texto { font-weight: 650; color: var(--negro); line-height: 1.3; font-size: .98rem; }
  .fila-texto small { display: block; font-weight: 500; color: var(--tinta-suave); font-size: .84rem; }
  .fila-fin { display: inline-flex; align-items: center; gap: .4em; font-size: .84rem; font-weight: 700; color: var(--ok-texto); white-space: nowrap; }
  .fila-fin .ico { width: 18px; height: 18px; }
  .fila-fin.duda { color: var(--aviso); }
  .fila-fin.rojo { color: var(--acento); }
  .fila-total { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; border-top: 1px solid var(--linea); font-weight: 750; color: var(--negro); }
  .insignia { min-width: 2rem; height: 2rem; padding: 0 .5rem; display: inline-grid; place-items: center; background: var(--acento); color: #fff; font-family: var(--cifras); font-weight: 800; font-size: 1rem; }
  /* secuencias: lo que aparece paso a paso */
  .js [data-secuencia="aparece"] [data-paso] { opacity: 0; transform: translateY(10px); transition: opacity var(--medio) var(--ease), transform var(--medio) var(--ease); }
  .js [data-secuencia="aparece"] [data-paso].on { opacity: 1; transform: none; }

  /* ── Burbujas (chat y maquetas de preguntas) ── */
  .burbujas { display: grid; gap: var(--e3); }
  .burbuja { max-width: 88%; padding: .75rem 1rem; line-height: 1.45; font-size: .98rem; }
  .burbuja-tu { justify-self: end; background: var(--negro); color: #fff; }
  .burbuja-ia { justify-self: start; background: var(--panel); color: var(--tinta); border-left: 3px solid var(--acento); }
  .burbuja-ia b { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); margin-bottom: .2em; }
  .burbuja-cita { display: block; margin-top: .5em; font-size: .84rem; color: var(--tinta-suave); font-style: italic; }

  /* ── Figuras (capturas reales) ── */
  .figura { margin: 0; }
  .figura a { display: block; border: 1px solid var(--linea-fuerte); background: var(--panel); overflow: hidden; }
  .figura img { width: 100%; transition: transform var(--lento) var(--ease); }
  .figura a:hover img { transform: scale(1.015); }
  .figura figcaption { margin-top: var(--e3); font-size: .9rem; color: var(--tinta-suave); display: flex; gap: .5em; }
  .figura figcaption::before { content: ''; flex: none; width: 14px; height: 2px; background: var(--acento); margin-top: .7em; }
  .figuras { display: grid; gap: var(--e6); align-items: start; }
  @media (min-width: 900px) { .figuras { grid-template-columns: 1fr 1fr; } .figuras > :first-child { grid-column: 1 / -1; } }

  /* ── Contadores ── */
  .contadores { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  .contador { background: var(--blanco); padding: var(--e5); }
  .contador .cifra { display: block; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1; color: var(--negro); }
  .contador span:last-child { display: block; margin-top: var(--e2); color: var(--tinta-suave); font-weight: 600; font-size: .95rem; }
  .seccion-negra .contadores { background: #2c2c31; border-color: #2c2c31; }
  .seccion-negra .contador { background: var(--negro); }
  .seccion-negra .contador .cifra { color: #fff; }

  /* ── Migas ── */
  .migas { font-size: .88rem; margin-bottom: var(--e5); }
  .migas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4em; }
  .migas li:not(:last-child)::after { content: '/'; margin-left: .4em; color: var(--tinta-tenue); }
  .migas a { color: var(--tinta-suave); text-decoration: none; font-weight: 600; }
  .migas a:hover { color: var(--acento); }
  .migas [aria-current] { color: var(--negro); font-weight: 650; }

  /* ── Cabeza de página interior ── */
  .cabeza { padding-block: clamp(48px, 7vw, 104px) clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--linea); position: relative; overflow: hidden; }
  .cabeza h1 { max-width: 20ch; }
  .cabeza .entrada { margin-top: var(--e5); }

  /* ── Bloque «¿Y mis datos?» y avisos ── */
  .aviso { border-left: 3px solid var(--acento); background: var(--acento-suave); padding: var(--e4) var(--e5); color: var(--tinta); }
  .aviso p:last-child { margin: 0; }
  .seccion-negra .aviso a:not(.boton), .seccion-roja .aviso a:not(.boton) { color: var(--acento-oscuro); }
  .seccion-negra .aviso, .seccion-roja .aviso { color: var(--tinta); }
  h3 > .ico:first-child { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: .3em; color: var(--acento); }

  /* ── Formulario ── */
  .formulario { display: grid; gap: var(--e5); }
  .campo { display: grid; gap: var(--e2); }
  .campo label, .campo .etiqueta { font-weight: 700; color: var(--negro); }
  .campo .ayuda { font-size: .9rem; color: var(--tinta-suave); margin: 0; }
  .campo input, .campo textarea { width: 100%; min-height: 52px; padding: .8rem 1rem; border: 2px solid var(--linea-fuerte); background: var(--blanco); border-radius: 0; font-size: 1rem; transition: border-color var(--rapido); }
  .campo textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
  .campo input:hover, .campo textarea:hover { border-color: var(--tinta-tenue); }
  .campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--acento); outline-offset: 0; border-color: var(--negro); }
  .campo.con-error input, .campo.con-error textarea { border-color: var(--acento); }
  .error-campo { color: var(--acento); font-weight: 700; font-size: .95rem; margin: 0; display: flex; gap: .4em; align-items: center; }
  .error-campo .ico { width: 18px; height: 18px; }
  .casilla { display: grid; grid-template-columns: 28px 1fr; gap: var(--e3); align-items: start; font-weight: 500; }
  .casilla input { width: 24px; height: 24px; margin: 0; accent-color: var(--acento); }
  .resumen-errores { border: 2px solid var(--acento); padding: var(--e4) var(--e5); }
  .resumen-errores h2 { font-size: 1.2rem; margin-bottom: var(--e2); }
  .resumen-errores ul { margin: 0; }
  .trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

  /* ── Textos largos (legales, explicaciones) ── */
  .prosa { max-width: 72ch; }
  .prosa h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-top: var(--e7); }
  .prosa h3 { margin-top: var(--e6); }
  .prosa table { width: 100%; border-collapse: collapse; margin: var(--e4) 0 var(--e5); font-size: .98rem; }
  .prosa th, .prosa td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
  .prosa th { color: var(--negro); font-weight: 750; background: var(--panel); }

  /* ── Preguntas (detalles) ── */
  .preguntas { border-top: 1px solid var(--linea); }
  .preguntas details { border-bottom: 1px solid var(--linea); }
  .preguntas summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--e4); padding: var(--e5) 0; font-weight: 750; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--negro); }
  .preguntas summary::-webkit-details-marker { display: none; }
  .preguntas summary::after { content: '+'; font-size: 1.8rem; font-weight: 500; color: var(--acento); line-height: 1; transition: transform var(--medio) var(--ease); }
  .preguntas details[open] summary::after { transform: rotate(45deg); }
  .preguntas details > div { padding: 0 0 var(--e5); max-width: 68ch; color: var(--tinta-suave); }

  /* ── Pie ── */
  .pie { background: var(--negro); color: #bdbdc4; padding-block: clamp(56px, 7vw, 96px) var(--e6); font-size: .98rem; }
  .pie a { color: #fff; text-decoration: none; }
  .pie a:hover { color: #fff; text-decoration: underline; }
  .pie-rejilla { display: grid; gap: var(--e7) var(--e6); }
  @media (min-width: 720px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1040px) { .pie-rejilla { grid-template-columns: 1.4fr 1fr 1.1fr 1.2fr; } }
  .marca-pie .marca-nombre { color: #fff; font-size: 2rem; }
  .pie .marca-ia, .chat-barra .marca-ia { color: #ff5c73; }
  .pie-marca p { margin: var(--e4) 0 var(--e5); max-width: 34ch; }
  .pie-gestiweb { display: inline-flex; flex-direction: column; gap: var(--e2); font-size: .8rem; color: #bdbdc4 !important; }
  .pie-gestiweb img { width: 170px; height: auto; align-self: flex-start; }
  .pie-titulo { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--e4); font-weight: 750; }
  .pie-lista { list-style: none; padding: 0; margin: 0 0 var(--e6); display: grid; gap: .2rem; }
  .pie-lista a { display: inline-flex; align-items: center; min-height: 32px; }
  .pie-contacto a, .pie-contacto span { display: inline-flex; align-items: center; gap: .6em; min-height: 32px; }
  .pie-contacto .ico { width: 18px; height: 18px; color: var(--acento); }
  .pie-legal { margin-top: var(--e7); padding-top: var(--e5); border-top: 1px solid #2c2c31; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e3) var(--e6); font-size: .88rem; }
  .pie-legal p { margin: 0; }
  .pie-legal ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); }
  .pie-legal a { color: #bdbdc4; min-height: 32px; display: inline-flex; align-items: center; gap: .4em; }
  .punto-rojo { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }

  /* ── Botón y panel del chat ── */
  .chat-lanzar {
    position: fixed; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
    display: inline-flex; align-items: center; gap: .6em; min-height: 56px; padding: .8em 1.2em; border: 0; cursor: pointer;
    background: var(--negro); color: #fff; font-weight: 750; font-size: 1rem;
    transition: transform var(--medio) var(--ease), background-color var(--rapido);
  }
  .chat-lanzar b { color: #ff5c73; font-weight: 850; }
  .chat-lanzar:hover { background: var(--acento); }
  .chat-lanzar:hover b { color: #fff; }
  .chat-lanzar .ico { width: 22px; height: 22px; }
  .chat-lanzar.oculto { transform: translateY(140%); }
  @media (max-width: 520px) { .chat-lanzar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .chat-lanzar { width: 60px; height: 60px; padding: 0; justify-content: center; } }

  .chat {
    position: fixed; z-index: 70; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
    width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 32px));
    display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--negro);
    opacity: 0; transform: translateY(16px); visibility: hidden;
    transition: opacity var(--medio) var(--ease), transform var(--medio) var(--ease), visibility 0s linear var(--medio);
  }
  .chat.abierto { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  @media (max-width: 520px) { .chat { inset: 0; width: 100%; height: 100dvh; border: 0; } }
  .chat-barra { display: flex; align-items: center; gap: var(--e3); padding: .7rem .8rem .7rem 1.1rem; background: var(--negro); color: #fff; }
  .chat-barra h2 { margin: 0; color: #fff; font-size: 1.05rem; letter-spacing: -.01em; flex: 1; display: flex; flex-direction: column; }
  .chat-barra h2 small { font-size: .78rem; font-weight: 600; color: #bdbdc4; letter-spacing: 0; }
  .chat-barra h2 .marca-ia { color: #ff5c73; }
  .chat-barra button { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid #3a3a40; color: #fff; cursor: pointer; }
  .chat-barra button:hover { border-color: #fff; }
  .chat-barra button .ico { width: 20px; height: 20px; }
  .chat-mensajes { flex: 1; overflow-y: auto; padding: var(--e4); display: flex; flex-direction: column; gap: var(--e3); overscroll-behavior: contain; }
  .chat-mensajes .burbuja { max-width: 92%; }
  .burbuja-ia p { margin: 0 0 .6em; }
  .burbuja-ia p:last-child, .burbuja-ia ul:last-child { margin-bottom: 0; }
  .burbuja-ia ul { padding-left: 1.1em; margin: 0 0 .6em; }
  .chat-fuentes { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .6em; }
  .chat-fuentes a { font-size: .8rem; font-weight: 700; border: 1px solid var(--linea-fuerte); padding: .2em .55em; text-decoration: none; color: var(--negro); background: var(--blanco); }
  .chat-fuentes a:hover { border-color: var(--acento); color: var(--acento); }
  .chat-sugerencias { display: flex; flex-wrap: wrap; gap: .5em; }
  .chat-sugerencias button { border: 1px solid var(--linea-fuerte); background: var(--blanco); padding: .55em .8em; min-height: 44px; cursor: pointer; font-size: .92rem; font-weight: 650; text-align: left; color: var(--negro); }
  .chat-sugerencias button:hover { border-color: var(--acento); color: var(--acento); }
  .chat-escribiendo { display: inline-flex; gap: 5px; padding: .9rem 1rem; background: var(--panel); justify-self: start; align-self: flex-start; border-left: 3px solid var(--acento); }
  .chat-escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-suave); animation: puntos 1.2s infinite; }
  .chat-escribiendo i:nth-child(2) { animation-delay: .15s; }
  .chat-escribiendo i:nth-child(3) { animation-delay: .3s; }
  .chat-error { align-self: stretch; border-left: 3px solid var(--acento); background: var(--acento-suave); padding: .7rem 1rem; font-size: .92rem; }
  .chat-form { border-top: 1px solid var(--linea); padding: .7rem; display: grid; grid-template-columns: 1fr 52px; gap: .5rem; padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); }
  .chat-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .chat-form textarea { resize: none; min-height: 52px; max-height: 140px; padding: .8rem; border: 2px solid var(--linea-fuerte); font-size: 1rem; line-height: 1.35; border-radius: 0; }
  .chat-form textarea:focus-visible { outline: 3px solid var(--acento); outline-offset: 0; border-color: var(--negro); }
  .chat-form button { background: var(--acento); color: #fff; border: 0; cursor: pointer; display: grid; place-items: center; min-height: 52px; }
  .chat-form button:disabled { background: var(--linea-fuerte); cursor: wait; }
  .chat-form button .ico { width: 22px; height: 22px; }
  .chat-nota { font-size: .76rem; color: var(--tinta-suave); padding: 0 .9rem .6rem; margin: 0; }
}

@layer paginas {
  /* ── Portada: hero ── */
  .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--linea); }
  .hero-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .hero-rejilla { position: relative; display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; padding-block: clamp(48px, 8vw, 112px) clamp(56px, 8vw, 112px); min-height: min(calc(100svh - var(--cab)), 900px); }
  @media (min-width: 1040px) { .hero-rejilla { grid-template-columns: 1.25fr .75fr; } }
  .hero h1 { max-width: 15ch; }
  .subraya { position: relative; white-space: nowrap; }
  .subraya::after { content: ''; position: absolute; left: 0; right: .05em; bottom: .02em; height: .1em; background: var(--acento); transform-origin: left; transform: scaleX(1); }
  .js .subraya::after { transform: scaleX(0); animation: subrayar 1s .5s var(--ease) forwards; }
  .hero .entrada { margin-top: var(--e5); }
  .cinta-ia { display: inline-flex; align-items: center; gap: .6em; margin-top: var(--e6); padding: .55em .9em; border: 1px solid var(--linea-fuerte); background: rgba(255, 255, 255, .9); font-size: .9rem; font-weight: 650; color: var(--negro); text-decoration: none; max-width: 100%; }
  .cinta-ia:hover { border-color: var(--acento); color: var(--negro); }
  .cinta-ia .punto-rojo { animation: latido 2s infinite; flex: none; }
  .cinta-ia .ico { width: 18px; height: 18px; color: var(--acento); flex: none; }
  .hero-panel { position: relative; max-width: 460px; width: 100%; justify-self: center; }
  @media (min-width: 1040px) { .hero-panel { justify-self: end; } }
  .hero-panel .ventana { background: rgba(255, 255, 255, .97); }
  .reloj-fila { font-family: var(--cifras); font-size: .78rem; color: var(--tinta-suave); font-weight: 600; }

  /* comparar chat y agente */
  .comparar { display: grid; gap: 1px; background: var(--linea-fuerte); border: 1px solid var(--linea-fuerte); }
  @media (min-width: 720px) { .comparar { grid-template-columns: 1fr 1fr; } }
  .comparar > div { background: var(--blanco); padding: var(--e6) var(--e5); }
  .comparar > div:last-child { background: var(--negro); color: #d9d9de; }
  .comparar > div:last-child h3 { color: #fff; }
  .comparar h3 { display: flex; align-items: center; gap: .5em; margin-bottom: var(--e2); }
  .comparar .marcas { margin-top: var(--e4); }
  .comparar > div:first-child .marcas .ico { color: var(--tinta-tenue); }

  /* la cadena de agentes */
  .cadena { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border: 1px solid var(--linea-fuerte); background: var(--blanco); }
  .cadena li { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--e3); align-items: center; padding: .9rem 1.1rem; border-bottom: 1px solid var(--linea); position: relative; }
  .cadena li:last-child { border-bottom: 0; background: var(--panel); }
  .cadena .fila-ico { width: 44px; height: 44px; }
  .cadena b { display: block; color: var(--negro); }
  .cadena small { color: var(--tinta-suave); font-size: .9rem; }
  .cadena .fila-fin { opacity: 0; transition: opacity var(--medio); }
  .cadena li.on .fila-fin { opacity: 1; }
  .js .cadena li .fila-ico { transition: background-color var(--medio), color var(--medio); }
  .js .cadena li.ahora .fila-ico { background: var(--acento); color: #fff; }

  .ideas { display: grid; gap: var(--e7) var(--e6); }
  @media (min-width: 840px) { .ideas { grid-template-columns: 1fr 1fr; } }
  .columna-ideas h3 { display: flex; align-items: center; gap: .5em; padding-bottom: var(--e3); border-bottom: 2px solid var(--negro); margin-bottom: var(--e4); }
  .columna-ideas h3 .ico { color: var(--acento); }
  .columna-ideas ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e4); }
  .columna-ideas li strong { display: block; font-size: 1.05rem; }
  .columna-ideas li span { color: var(--tinta-suave); font-size: .98rem; }

  .maneras { display: grid; gap: var(--e5); }
  @media (min-width: 840px) { .maneras { grid-template-columns: 1fr 1fr; } }
  .manera { border: 1px solid var(--linea-fuerte); padding: clamp(var(--e5), 4vw, var(--e7)); background: var(--blanco); display: flex; flex-direction: column; gap: var(--e3); }
  .manera:last-child { border-color: var(--negro); border-width: 2px; }
  .manera h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0; }
  .manera .estado { align-self: flex-start; }
  .manera p { color: var(--tinta-suave); margin: 0; }

  /* ── El lector de pedidos ── */
  .lector { border: 1px solid var(--negro); background: var(--blanco); }
  .lector-barra { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; justify-content: space-between; padding: .8rem 1rem; background: var(--negro); color: #fff; }
  .lector-barra strong { color: #fff; font-size: 1rem; }
  .lector-ejemplos { display: flex; flex-wrap: wrap; gap: .4rem; }
  .lector-ejemplos button { min-height: 40px; padding: .45em .9em; border: 1px solid #55555c; background: transparent; color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45em; }
  .lector-ejemplos button .ico { width: 18px; height: 18px; }
  .lector-ejemplos button[aria-pressed='true'] { background: #fff; color: var(--negro); border-color: #fff; }
  .lector-ejemplos button:hover:not([aria-pressed='true']) { border-color: #fff; }
  .lector-etapas { list-style: none; margin: 0; padding: .7rem 1rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; border-bottom: 1px solid var(--linea); font-size: .88rem; font-weight: 700; color: var(--tinta-suave); }
  .lector-etapas li { display: inline-flex; align-items: center; gap: .45em; transition: color var(--medio); }
  .lector-etapas li::before { content: ''; width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; transition: background-color var(--medio); }
  .lector-etapas li.on { color: var(--negro); }
  .lector-etapas li.on::before { background: var(--ok); border-color: var(--ok); }
  .lector-etapas li.ahora { color: var(--acento); }
  .lector-etapas li.ahora::before { animation: latido 1s infinite; background: var(--acento); border-color: var(--acento); }
  .lector-cuerpo { display: grid; }
  @media (min-width: 900px) { .lector-cuerpo { grid-template-columns: .82fr 1.18fr; } }
  .lector-doc { position: relative; background: var(--panel); padding: var(--e4); display: grid; place-items: center; border-bottom: 1px solid var(--linea); min-height: 280px; overflow: hidden; }
  @media (min-width: 900px) { .lector-doc { border-bottom: 0; border-right: 1px solid var(--linea); } }
  .lector-doc img { max-height: 520px; width: auto; border: 1px solid var(--linea-fuerte); background: #fff; }
  .lector-doc .lector-escaner { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--acento); opacity: 0; }
  .lector.leyendo .lector-escaner { opacity: 1; animation: escanear 1.6s var(--ease) infinite alternate; }
  .lector-res { padding: var(--e4); min-width: 0; }
  .lector-res-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); margin-bottom: var(--e3); }
  .lector-res-cabeza strong { font-size: 1.05rem; }
  .lector-res-cabeza span { font-size: .85rem; color: var(--tinta-suave); font-weight: 600; }
  .lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .linea { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .2rem .8rem; padding: .7rem 0; border-top: 1px solid var(--linea); align-items: start; }
  .js .linea { opacity: 0; transform: translateX(14px); transition: opacity var(--medio) var(--ease), transform var(--medio) var(--ease); }
  .js .linea.on { opacity: 1; transform: none; }
  .linea-n { font-family: var(--cifras); font-weight: 800; font-size: .85rem; color: var(--tinta-suave); padding-top: .15em; }
  .linea-desc { min-width: 0; }
  .linea-desc b { display: block; color: var(--negro); font-size: .96rem; line-height: 1.3; overflow-wrap: anywhere; }
  .linea-desc span { display: flex; flex-wrap: wrap; gap: .2rem .6rem; font-size: .82rem; color: var(--tinta-suave); margin-top: .15em; }
  .linea-desc span i { font-style: normal; }
  .linea-desc .motivo { display: block; margin-top: .3em; font-size: .82rem; color: var(--aviso); font-weight: 600; }
  .linea-cant { text-align: right; }
  .linea-cant b { font-family: var(--cifras); font-size: 1.15rem; color: var(--negro); display: block; }
  .linea-cant small { display: inline-flex; align-items: center; gap: .25em; font-size: .74rem; font-weight: 750; color: var(--ok-texto); text-transform: uppercase; letter-spacing: .04em; }
  .linea-cant small.media { color: var(--aviso); }
  .linea-cant small.baja { color: var(--acento); }
  .linea.anulada .linea-desc b { text-decoration: line-through; color: var(--tinta-suave); }
  .linea.anulada .linea-cant small { color: var(--acento); }
  .lector-pie { padding: .8rem 1rem; border-top: 1px solid var(--linea); font-size: .86rem; color: var(--tinta-suave); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: center; }
  .lector-pie details { width: 100%; }
  .lector-pie summary { cursor: pointer; font-weight: 700; color: var(--negro); min-height: 32px; display: inline-flex; align-items: center; }
  .lector-pie pre { margin: .6rem 0 0; max-height: 280px; overflow: auto; background: var(--negro); color: #e6e6ea; padding: 1rem; font-size: .78rem; line-height: 1.45; font-family: var(--mono); white-space: pre; }
  .lector-avisos { margin: var(--e3) 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--tinta-suave); }

  /* ── Ficha de un agente ── */
  .ficha-cabeza { display: grid; gap: var(--e6); align-items: end; }
  @media (min-width: 960px) { .ficha-cabeza { grid-template-columns: 1.3fr .7fr; } }
  .ficha-cabeza .estado { margin-bottom: var(--e4); }
  .ficha-icono { width: clamp(88px, 12vw, 140px); height: clamp(88px, 12vw, 140px); display: grid; place-items: center; background: var(--acento); color: #fff; justify-self: start; }
  @media (min-width: 960px) { .ficha-icono { justify-self: end; } }
  .ficha-icono .ico { width: 55%; height: 55%; stroke-width: 1.4; }
  .caso { font-size: 1.05rem; border-left: 3px solid var(--negro); padding-left: var(--e4); color: var(--tinta); }
  .revisa { display: grid; grid-template-columns: 56px 1fr; gap: var(--e4); align-items: start; background: var(--negro); color: #d9d9de; padding: var(--e6) var(--e5); }
  .revisa .ico { width: 44px; height: 44px; color: var(--ok); }
  .revisa h3 { color: #fff; margin-bottom: var(--e2); }
  .revisa p { margin: 0; }
  .otros { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
  @media (min-width: 720px) { .otros { grid-template-columns: repeat(3, 1fr); } }

  /* maquetas de las fichas */
  .maqueta-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
  .maqueta-tabla th, .maqueta-tabla td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--linea); }
  .maqueta-tabla th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 750; }
  .maqueta-tabla td.num { text-align: right; font-family: var(--cifras); font-variant-numeric: tabular-nums; }
  .maqueta-par { display: grid; grid-template-columns: 9rem 1fr; gap: .2rem .8rem; padding: .5rem 0; border-bottom: 1px solid var(--linea); font-size: .95rem; }
  .maqueta-par dt { color: var(--tinta-suave); font-weight: 600; }
  .maqueta-par dd { margin: 0; color: var(--negro); font-weight: 650; }
  .cita-ley { border-left: 3px solid var(--acento); padding: .2rem 0 .2rem 1rem; margin: .8rem 0 0; font-size: .92rem; color: var(--tinta); }
  .cita-ley cite { display: block; margin-top: .5em; font-style: normal; font-weight: 750; font-size: .8rem; color: var(--acento); letter-spacing: .02em; }
  .acta-voz { font-size: .9rem; margin: 0 0 .6rem; }
  .acta-voz b { color: var(--acento); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; display: block; }
  .correo-de { font-size: .82rem; color: var(--tinta-suave); }

  /* ── Hecha con IA ── */
  .linea-tiempo { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linea-fuerte); }
  .linea-tiempo li { position: relative; padding: 0 0 var(--e5) var(--e5); }
  .linea-tiempo li::before { content: ''; position: absolute; left: -7px; top: .45em; width: 12px; height: 12px; background: var(--blanco); border: 2px solid var(--acento); }
  .linea-tiempo li:last-child::before { background: var(--acento); }
  .linea-tiempo time { font-family: var(--cifras); font-size: .82rem; font-weight: 700; color: var(--tinta-suave); }
  .linea-tiempo b { display: block; color: var(--negro); line-height: 1.35; margin: .15em 0; }
  .linea-tiempo small { color: var(--tinta-suave); font-family: var(--cifras); font-size: .8rem; }
  .linea-tiempo code { font-family: var(--mono); font-size: .8rem; color: var(--acento); }
  .quien { display: grid; gap: var(--e5); }
  @media (min-width: 840px) { .quien { grid-template-columns: 1fr 1fr; } }
  .quien > div { border: 1px solid var(--linea-fuerte); padding: var(--e6) var(--e5); }
  .quien > div:first-child { border-color: var(--negro); border-width: 2px; }
  .quien h3 { display: flex; gap: .5em; align-items: center; }
  .quien h3 .ico { color: var(--acento); }

  /* ── 404 ── */
  .error-404 .cifra { font-size: clamp(6rem, 4rem + 12vw, 14rem); line-height: .85; color: var(--acento); display: block; margin-bottom: var(--e5); }
}

@layer utilidades {
  .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
  .mt-5 { margin-top: var(--e5); } .mt-6 { margin-top: var(--e6); } .mt-7 { margin-top: var(--e7); }
  .centro { text-align: center; }
  .solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes subrayar { to { transform: scaleX(1); } }
@keyframes escanear { from { transform: translateY(0); } to { transform: translateY(var(--alto-doc, 480px)); } }
@keyframes puntos { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .rv, .js [data-secuencia="aparece"] [data-paso], .js .linea { opacity: 1 !important; transform: none !important; }
  .js .subraya::after { transform: scaleX(1); }
}
@media print {
  .cabecera, .chat-lanzar, .chat, .hero-lienzo { display: none !important; }
  .js .rv, .js [data-paso], .js .linea { opacity: 1 !important; transform: none !important; }
}
@layer paginas {
  @media (min-width: 1040px) {
    .hero-lienzo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 55%); mask-image: linear-gradient(90deg, transparent 0, #000 55%); }
  }
}
@layer paginas {
  /* ── La demo del chat de las tiendas (/demo) ── */
  .demo-rejilla { display: grid; gap: var(--e6); align-items: start; }
  @media (min-width: 1000px) { .demo-rejilla { grid-template-columns: minmax(280px, 340px) 1fr; } .demo-lado { position: sticky; top: calc(var(--cab) + 16px); } }
  .demo-titulo { font-size: 1.15rem; margin: 0 0 var(--e3); }
  .demo-bloque-ayuda { margin-top: var(--e5); }
  @media (max-width: 999.98px) {
    .demo-rejilla { display: flex; flex-direction: column; gap: var(--e5); }
    .demo-lado { display: contents; }
    .demo-bloque-roles { order: 1; }
    .tienda { order: 2; width: 100%; }
    .demo-bloque-ayuda { order: 3; margin-top: 0; }
  }
  .demo-roles { display: grid; gap: var(--e3); }
  .demo-rol { display: grid; grid-template-columns: 40px 1fr; gap: var(--e3); align-items: start; text-align: left; padding: var(--e4); min-height: 44px; background: var(--blanco); border: 2px solid var(--linea-fuerte); cursor: pointer; color: var(--tinta); transition: border-color var(--rapido); }
  .demo-rol .ico { width: 32px; height: 32px; color: var(--tinta-suave); }
  .demo-rol b { display: block; color: var(--negro); font-size: 1.05rem; }
  .demo-rol small { display: block; color: var(--tinta-suave); font-size: .88rem; line-height: 1.35; margin-top: .15em; }
  .demo-rol:hover { border-color: var(--negro); }
  .demo-rol[aria-pressed='true'] { border-color: var(--acento); background: var(--acento-suave); }
  .demo-rol[aria-pressed='true'] .ico { color: var(--acento); }
  .demo-lado .chat-sugerencias { flex-direction: column; align-items: stretch; }
  .demo-aviso { margin-top: var(--e5); font-size: .92rem; }
  .demo-aviso p { margin-bottom: .5em; }

  .tienda { display: flex; flex-direction: column; height: clamp(520px, 78dvh, 820px); background: var(--blanco); border: 1px solid var(--negro); min-width: 0; }
  .tienda-barra { display: flex; align-items: center; gap: var(--e3); padding: .6rem .7rem .6rem 1rem; background: var(--negro); color: #fff; }
  .tienda-marca { flex: 1; display: flex; align-items: center; gap: .6rem; min-width: 0; }
  .tienda-marca .ico { width: 26px; height: 26px; color: #ff5c73; flex: none; }
  .tienda-marca > span { min-width: 0; }
  .tienda-marca b { display: block; color: #fff; font-size: 1rem; }
  .tienda-marca small { display: block; color: #bdbdc4; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tienda-carro { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--cifras); font-weight: 800; font-size: .95rem; padding: .3rem .6rem; border: 1px solid #3a3a40; }
  .tienda-carro .ico { width: 18px; height: 18px; }
  .tienda-nueva { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid #3a3a40; color: #fff; cursor: pointer; }
  .tienda-nueva:hover { border-color: #fff; }
  .tienda-nueva .ico { width: 20px; height: 20px; }
  .tienda-mensajes { flex: 1; overflow-y: auto; padding: var(--e4); display: flex; flex-direction: column; gap: var(--e3); overscroll-behavior: contain; background: #fafafb; }
  .tienda-mensajes .burbuja { max-width: 88%; }
  .tienda-form { position: relative; }

  /* tarjetas */
  .tc { align-self: stretch; background: var(--blanco); border: 1px solid var(--linea-fuerte); border-top: 3px solid var(--negro); padding: .8rem .9rem; font-size: .92rem; min-width: 0; }
  .tc-pendiente { border-top-color: var(--acento); background: var(--acento-suave); }
  .tc-t { font-weight: 750; color: var(--negro); margin: 0 0 .4rem; font-size: .98rem; }
  .tc-t code, .tc-lista code { font-family: var(--mono); font-size: .8rem; color: var(--tinta-suave); }
  .tc-sub { color: var(--tinta-suave); margin: 0 0 .5rem; font-size: .86rem; }
  .tc-cliente { font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); margin: 0 0 .3rem; }
  .tc-cifra { font-family: var(--cifras); font-weight: 800; font-size: 1.6rem; color: var(--negro); margin: 0 0 .3rem; letter-spacing: -.02em; }
  .tc-cifra small { font-size: .9rem; margin-left: .4rem; }
  .tc-cifra .sube { color: var(--ok-texto); } .tc-cifra .baja { color: var(--acento); }
  .tc-tabla { overflow-x: auto; margin: 0 -.2rem; }
  .tc table { width: 100%; border-collapse: collapse; font-size: .84rem; }
  .tc th, .tc td { text-align: left; padding: .4rem .45rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
  .tc th { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 750; white-space: nowrap; }
  .tc td.num, .tc th.num { text-align: right; font-family: var(--cifras); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tc tfoot td { font-weight: 800; color: var(--negro); border-bottom: 0; border-top: 2px solid var(--negro); }
  .tc-lista { list-style: none; margin: 0; padding: 0; }
  .tc-lista li { padding: .45rem 0; border-bottom: 1px solid var(--linea); display: grid; gap: .1rem; }
  .tc-lista li:last-child { border-bottom: 0; }
  .tc-lista b { color: var(--negro); }
  .tc-lista small { color: var(--tinta-suave); }
  .tc-precio { font-family: var(--cifras); font-weight: 700; font-size: .85rem; color: var(--negro); }
  .tc-precio em { color: var(--acento); font-style: normal; }
  .tc-datos { display: grid; grid-template-columns: 8rem 1fr; gap: .25rem .8rem; margin: 0; }
  .tc-datos dt { color: var(--tinta-suave); font-weight: 650; }
  .tc-datos dd { margin: 0; color: var(--negro); overflow-wrap: anywhere; }
  .tc-enlace { background: none; border: 0; padding: 0; min-height: 24px; color: var(--acento); font-weight: 750; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; font-size: inherit; font-family: var(--cifras); }
  .tc-pie { margin: .6rem 0 0; }
  .tc-csv { background: var(--blanco); border: 1px solid var(--linea-fuerte); padding: .35rem .7rem; min-height: 36px; font-weight: 700; font-size: .85rem; cursor: pointer; }
  .tc-csv:hover { border-color: var(--negro); }
  .tc-det { margin-top: .5rem; }
  .tc-det summary { cursor: pointer; font-weight: 700; font-size: .86rem; min-height: 32px; display: inline-flex; align-items: center; }
  .tc-botones { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
  .tc-botones .boton { min-height: 44px; padding: .5em 1.1em; font-size: .95rem; }
  .tc-sistema { align-self: center; max-width: 92%; text-align: center; font-size: .86rem; color: var(--tinta-suave); background: none; border: 1px dashed var(--linea-fuerte); padding: .45rem .8rem; }
  .tc-sistema p { margin: 0; }
  /* barras de la gráfica, sin librerías */
  .tc-leyenda { display: flex; gap: 1rem; font-size: .8rem; color: var(--tinta-suave); margin: .2rem 0 .4rem; }
  .tc-leyenda span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: .35rem; background: var(--negro); vertical-align: -1px; }
  .tc-leyenda .s0::before { background: var(--acento); } .tc-leyenda .s1::before { background: var(--linea-fuerte); }
  .tc-barras { display: flex; align-items: stretch; gap: 3px; height: 200px; padding-top: .3rem; overflow-x: auto; margin-bottom: .3rem; }
  .tc-grupo { flex: 1 0 22px; display: flex; flex-direction: column; min-width: 22px; }
  .tc-cols { flex: 1; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--negro); }
  .tc-cols i { flex: 1; height: var(--p); min-height: 1px; background: var(--acento); transform-origin: bottom; animation: crecer .6s var(--ease) both; }
  .tc-cols i.s1 { background: var(--linea-fuerte); }
  .tc-grupo > span { font-size: .66rem; color: var(--tinta-suave); text-align: center; white-space: nowrap; padding-top: .25rem; line-height: 1.2; }
  .tc-barras-h { display: grid; gap: .3rem; margin: .3rem 0; }
  .tc-bh { display: grid; grid-template-columns: minmax(6rem, 34%) 1fr auto; gap: .5rem; align-items: center; font-size: .82rem; }
  .tc-bh-e { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--negro); }
  .tc-bh-b { height: 14px; background: var(--panel); }
  .tc-bh-b i { display: block; height: 100%; width: var(--p); background: var(--acento); transform-origin: left; animation: crecer-h .6s var(--ease) both; }
  .tc-bh-v { font-family: var(--cifras); font-weight: 700; white-space: nowrap; }
}
@keyframes crecer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes crecer-h { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@layer componentes {
  .estado-real { color: var(--negro); }
  .tarjeta-boton { font: inherit; text-align: left; border: 0; cursor: pointer; width: 100%; }
}
@layer paginas {
  @media (max-width: 999.98px) {
    .demo-roles { grid-template-columns: 1fr 1fr; }
    .demo-rol { grid-template-columns: 26px 1fr; padding: var(--e3); align-items: center; }
    .demo-rol small { display: none; }
    .demo-rol b { font-size: .95rem; }
    .demo-rol .ico { width: 24px; height: 24px; }
  }
}
@layer paginas {
  .demo-ficha { display: grid; gap: var(--e5); padding: var(--e6) 0; border-top: 1px solid var(--linea-fuerte); }
  .demo-ficha:last-of-type { border-bottom: 1px solid var(--linea-fuerte); }
  @media (min-width: 900px) { .demo-ficha { grid-template-columns: 1.3fr .7fr; gap: var(--e7); } }
  .demo-ficha h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin: var(--e3) 0 var(--e4); }
  .demo-ficha h3 a { color: var(--negro); text-decoration: none; }
  .demo-ficha h3 a:hover { color: var(--acento); }
  .chips-claros { margin-top: 0; }
  .chips-claros li { color: var(--negro); border-color: var(--linea-fuerte); background: var(--blanco); font-size: .92rem; }
}