:root{
  /* superficie — negro cálido, no el azul-negro genérico de "AI SaaS" */
  --bg:#15100C;
  --bg-elevated:#1C1611;
  --bg-card:#221B15;
  --border:#3D3024;
  --border-soft:#2A2119;

  /* acento primario — cobre (orfebrería y cerámica andina) */
  --copper:#D68A4C;
  --copper-dim:#8A5C34;
  --copper-soft:rgba(214,138,76,0.1);
  --on-copper:#20130A;

  /* acento secundario — turquesa apagado (textiles y lagos altoandinos) */
  --teal:#3FA396;
  --teal-dim:#1F534C;
  --teal-soft:rgba(63,163,150,0.12);
  --on-teal:#0B211D;

  --text:#F3ECE1;
  --text-dim:#A99D91;
  /* Estaba en #7D7264, que sobre el fondo da 4,02:1 — por debajo de AA. Y no
     lo usaba texto decorativo: lo usaban el precio junto al botón, el pedido
     de cada caso y el descargo de que los casos son ilustrativos. */
  --text-faint:#9A8E7D;
  --danger:#E2665A;

  /* acentos del kanban del panel interno — mismo patrón base/dim/soft que
     --copper y --teal, coherentes con la paleta cálida existente */
  --amber:#D6A24C;
  --amber-dim:#8C6B2E;
  --amber-soft:rgba(214,162,76,0.12);

  --violet:#9B7BEA;
  --violet-dim:#5C4A8A;
  --violet-soft:rgba(155,123,234,0.13);

  /* Azul acerado para el estado "Nuevo" del kanban. Es el unico color de la
     paleta que no es calido, y por eso funciona: "Nuevo" es lo que todavia
     no entro en el proceso. */
  --blue:#6E9CC4;
  --blue-dim:#3C5D7D;
  --blue-soft:rgba(110,156,196,0.13);
  /* Texto sobre violeta lleno: el acento del servicio de implementacion. */
  --on-violet:#150E24;

  --green:#5FAE6B;
  --green-dim:#3A6B42;
  --green-soft:rgba(95,174,107,0.12);

  --radius-lg:18px;
  --radius:14px;
  --radius-sm:9px;
  --radius-pill:30px;

  --shadow-card:0 1px 2px rgba(8,5,2,0.4), 0 12px 28px -12px rgba(8,5,2,0.55);
  --shadow-modal:0 24px 64px -16px rgba(6,4,2,0.7);
  --shadow-glow-copper:0 0 0 1px rgba(214,138,76,0.35), 0 16px 40px -12px rgba(214,138,76,0.28);
  --shadow-glow-teal:0 0 0 1px rgba(63,163,150,0.35), 0 16px 40px -12px rgba(63,163,150,0.28);

  --font-display:'Space Grotesk', sans-serif;
  --font-voice:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  /* ============ escala tipográfica ============
     Había 26 tamaños distintos repartidos por la hoja, catorce de ellos entre
     9,5 y 16,5 px. Eso no es jerarquía: es ruido. Con todo el cuerpo del texto
     apretado en tres píxeles de diferencia, nada destaca porque nada cede, y
     es exactamente lo que hacía que la página se sintiera plana.

     Siete niveles, y cada uno tiene un trabajo:
       display  el titular del héroe, y nada más
       h1       los títulos de sección
       h2       subtítulos dentro de una sección
       h3       títulos de tarjeta o de ítem
       body     texto corrido
       small    apoyos, metadatos, letra chica
       micro    etiquetas en monoespaciada (cejas, estados)

     Los tamaños del panel interno todavía no pasan por acá: es otra interfaz,
     se usa con el teclado y con densidad alta, y tocarla no era parte de esto. */
  --text-display:clamp(38px, 5.6vw, 72px);
  --text-h1:clamp(27px, 3.4vw, 42px);
  --text-h2:clamp(20px, 1.8vw, 25px);
  --text-h3:18px;
  --text-body:16px;
  --text-small:14px;
  --text-micro:12px;

  --lh-tight:1.06;
  --lh-title:1.2;
  --lh-body:1.62;

  /* ============ espaciado ============
     Una sola progresión. Antes cada bloque elegía su margen a ojo. */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;
  --s5:24px; --s6:32px;  --s7:48px;  --s8:64px;
  --s9:96px; --s10:128px;

  /* ============ ritmo vertical ============
     Las ocho secciones tenían el mismo padding —72 u 84 px— y casi el mismo
     alto. Cuando todo pesa igual, el ojo no tiene ninguna pista de qué mirar.
     Ahora hay tres pesos, y el peso ES la jerarquía. */
  --sec-hero:clamp(64px, 8vw, 120px);
  --sec-clave:clamp(72px, 7.5vw, 112px);   /* demostración, precio, cierre */
  --sec-base:clamp(52px, 5vw, 76px);       /* apoyo */

  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;}

/* El foco tiene que verse. No había ningún estilo, así que quien navega con
   teclado dependía del anillo que ponga el navegador —que sobre este fondo
   oscuro es casi invisible— o de nada, si algún reset lo quitó. */
:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}
.btn:focus-visible,.btn-contact:focus-visible{outline-offset:4px;}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}

/* ============ fondo decorativo ============
   Líneas de contorno topográfico + resplandores cálidos muy contenidos,
   en vez del típico grid de puntos + blobs saturados. */
.bg-scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.bg-grid{
  position:absolute;
  /* El tile mide 620x340 y la animación desplaza exactamente eso, que es lo
     que hace que el bucle no tenga costura. Pero entonces el elemento tiene
     que SOBRAR al menos un tile hacia donde se mueve: con inset:-5% (58 px en
     una ventana de 1161) contra un desplazamiento de 620 px, al final del
     ciclo quedaba una franja de 443 px sin líneas a la derecha y 230 px
     abajo. Ahora sobra un tile y medio por lado. */
  top:-340px;left:-620px;
  width:calc(100% + 1860px);
  height:calc(100% + 1020px);
  /* Cada curva es un seno puro (misma altura y misma pendiente en x=0 y
     x=620): al repetir el tile no hay costura, ni en reposo ni animado. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='340' viewBox='0 0 620 340'%3E%3Cpath d='M0.0,46.0 C34.4,50.9 68.9,55.7 103.3,58.1 C137.8,60.6 172.2,60.6 206.7,58.1 C241.1,55.7 275.6,50.9 310.0,46.0 C344.4,41.1 378.9,36.3 413.3,33.9 C447.8,31.4 482.2,31.4 516.7,33.9 C551.1,36.3 585.6,41.1 620.0,46.0' fill='none' stroke='%23D68A4C' stroke-width='1' opacity='0.55'/%3E%3Cpath d='M0.0,118.0 C34.4,117.7 68.9,113.8 103.3,108.2 C137.8,102.6 172.2,95.5 206.7,90.2 C241.1,84.9 275.6,81.7 310.0,82.0 C344.4,82.3 378.9,86.2 413.3,91.8 C447.8,97.4 482.2,104.5 516.7,109.8 C551.1,115.1 585.6,118.3 620.0,118.0' fill='none' stroke='%233FA396' stroke-width='1' opacity='0.45'/%3E%3Cpath d='M0.0,161.2 C34.4,155.9 68.9,151.6 103.3,150.4 C137.8,149.2 172.2,151.1 206.7,155.2 C241.1,159.3 275.6,165.5 310.0,170.8 C344.4,176.1 378.9,180.4 413.3,181.6 C447.8,182.8 482.2,180.9 516.7,176.8 C551.1,172.7 585.6,166.5 620.0,161.2' fill='none' stroke='%23D68A4C' stroke-width='1' opacity='0.32'/%3E%3Cpath d='M0.0,243.4 C34.4,249.2 68.9,252.5 103.3,251.9 C137.8,251.3 172.2,246.8 206.7,240.5 C241.1,234.2 275.6,226.3 310.0,220.6 C344.4,214.8 378.9,211.5 413.3,212.1 C447.8,212.7 482.2,217.2 516.7,223.5 C551.1,229.8 585.6,237.7 620.0,243.4' fill='none' stroke='%233FA396' stroke-width='1' opacity='0.24'/%3E%3Cpath d='M0.0,282.5 C34.4,280.2 68.9,280.6 103.3,283.5 C137.8,286.5 172.2,291.8 206.7,297.0 C241.1,302.2 275.6,307.2 310.0,309.5 C344.4,311.8 378.9,311.4 413.3,308.5 C447.8,305.5 482.2,300.2 516.7,295.0 C551.1,289.8 585.6,284.8 620.0,282.5' fill='none' stroke='%23D68A4C' stroke-width='1' opacity='0.16'/%3E%3C/svg%3E");
  background-size:620px 340px;
  animation:driftGrid 70s linear infinite;
  opacity:.6;
}
.bg-blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.4;}
.bg-blob.b1{
  width:560px;height:560px;top:-160px;right:-100px;
  background:radial-gradient(circle at 30% 30%, var(--copper), transparent 72%);
  animation:floatA 18s ease-in-out infinite;
}
.bg-blob.b2{
  width:480px;height:480px;top:200px;right:260px;
  background:radial-gradient(circle at 40% 40%, var(--teal), transparent 72%);
  animation:floatB 22s ease-in-out infinite;
  opacity:.28;
}
.bg-blob.b3{
  width:400px;height:400px;bottom:-140px;left:-120px;
  background:radial-gradient(circle at 50% 50%, var(--teal-dim), transparent 72%);
  animation:floatA 26s ease-in-out infinite reverse;
  opacity:.24;
}
@keyframes driftGrid{0%{transform:translate(0,0);}100%{transform:translate(-620px,-340px);}}
@keyframes floatA{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-30px,25px) scale(1.06);}}
@keyframes floatB{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(25px,-20px) scale(0.95);}}
@media (prefers-reduced-motion: reduce){
  .bg-grid,.bg-blob{animation:none;}
}
/* .modal-overlay, .admin-toggle y .quote-preview-overlay se excluyen a
   proposito: declaran su propio position:fixed (para cubrir el viewport /
   flotar sobre el contenido) y esta regla, al tener mas especificidad que
   una sola clase, se lo pisaba — dejandolos en z-index:1, debajo de todo. */
body > *:not(.bg-scene):not(.modal-overlay):not(.admin-toggle):not(.quote-preview-overlay):not(.diag){position:relative;z-index:1;}

/* ============ tipografía utilitaria ============ */
.eyebrow{
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--teal);
  text-transform:uppercase;letter-spacing:.7px;font-weight:500;
}

nav{
  position:sticky;top:0;z-index:50;
  background:rgba(21,16,12,0.78);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-soft);
}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;}
.logo{
  font-family:var(--font-display);font-weight:700;font-size:var(--text-h2);letter-spacing:0.2px;
  display:inline-flex;align-items:baseline;text-decoration:none;
  padding:var(--s3) 0;
}
.logo-mark{height:20px;width:auto;display:inline-block;flex-shrink:0;}
.logo span{color:var(--copper);margin-left:2px;}
.nav-links{display:flex;gap:var(--s3);align-items:center;font-size:var(--text-small);color:var(--text-dim);}
.nav-links span{white-space:nowrap;margin-right:8px;}
@media (max-width:640px){.nav-links span{display:none;}}
/* Contáctenos es el único CTA con peso visual del nav — Panel interno (abajo)
   es una herramienta interna, no algo que le importe a un visitante. */
.nav-links .btn-contact{
  background:var(--teal);border:none;color:var(--on-teal);
  font-family:var(--font-body);font-weight:600;font-size:var(--text-small);padding:11px 20px;border-radius:var(--radius-pill);
  cursor:pointer;transition:.15s var(--ease);min-height:44px;
}
.nav-links .btn-contact:hover{background:#57BCAE;transform:translateY(-1px);}
.nav-admin-link{
  background:none;border:none;color:var(--text-faint);cursor:pointer;
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;transition:.15s var(--ease);
}
.nav-admin-link:hover{color:var(--text-dim);background:rgba(255,255,255,0.05);}
.nav-admin-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

/* El héroe deja de estar centrado. Centrado, todo pesa lo mismo y el ojo no
   sabe por dónde entrar; y sobre todo, no había sitio para enseñar el
   producto. Ahora es una rejilla: el argumento a la izquierda, la
   demostración a la derecha. */
.hero{padding:var(--sec-hero) 0;position:relative;overflow:hidden;}
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  grid-template-areas:"copy demo" "accion demo";
  gap:0 clamp(28px,4vw,56px);align-content:center;
}
.hero-copy{grid-area:copy;min-width:0;}
.hero-accion{grid-area:accion;min-width:0;}
.hero-demo{grid-area:demo;align-self:center;}
.badge-pill{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--text-micro);
  color:var(--copper);border:1px solid var(--copper-dim);background:var(--copper-soft);
  padding:7px 16px;border-radius:var(--radius-pill);margin-bottom:30px;letter-spacing:.2px;
}
.badge-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--copper);animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
h1{
  font-family:var(--font-display);font-weight:700;font-size:var(--text-display);
  line-height:var(--lh-tight);margin:0 0 var(--s5);max-width:16ch;letter-spacing:-.03em;
  text-wrap:balance;
}
h1 em{font-style:italic;font-family:var(--font-voice);font-weight:500;color:var(--teal);letter-spacing:0;}
.hero p.sub{font-size:var(--text-h3);color:var(--text-dim);max-width:46ch;margin:0 0 var(--s6);line-height:1.55;}
.hero-cta{display:flex;gap:var(--s3);flex-wrap:wrap;}
/* La letra chica debajo de las dos llamadas: quita el miedo a que el botón
   pida una cuenta, que es donde se cae la mitad de la gente. */
.hero-cta-nota{margin:var(--s4) 0 0;font-size:var(--text-small);color:var(--text-dim);max-width:44ch;}
.btn{
  font-family:var(--font-body);font-weight:600;font-size:var(--text-small);padding:14px 28px;
  border-radius:var(--radius-pill);cursor:pointer;border:1px solid transparent;transition:.15s var(--ease);
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
}
.btn-primary{background:var(--teal);color:var(--on-teal);}
.btn-primary:hover{background:#57BCAE;transform:translateY(-1px);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-ghost{background:rgba(255,255,255,0.03);color:var(--text);border-color:var(--border);}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);}
.btn-block{width:100%;text-align:center;}
.btn-lg{padding:17px 30px;font-size:var(--text-body);min-height:52px;}

/* ============ demostración del héroe ============
   Un teléfono con una conversación que ocurre, y debajo lo que la
   automatización hizo con ese mensaje. La profundidad no sale de una sombra:
   sale de tres superficies con luminosidad distinta, un borde de un píxel y
   un reflejo arriba, que es como se ve un objeto físico. */
.hero-demo{position:relative;min-width:0;}
.hd-phone{
  background:linear-gradient(180deg,var(--bg-card),var(--bg-elevated));
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;position:relative;
}
.hd-phone::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(243,236,225,.18),transparent);
}
.hd-bar{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--border-soft);background:rgba(0,0,0,.18);
}
.hd-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--teal-dim);color:var(--text);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:var(--text-micro);letter-spacing:.5px;
}
.hd-id{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.hd-id b{font-size:var(--text-small);font-weight:600;}
.hd-id i{
  font-style:normal;font-family:var(--font-mono);font-size:var(--text-micro);
  color:var(--text-faint);display:flex;align-items:center;gap:6px;
}
.hd-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0;}
/* La etiqueta "demo" no es decorativa: esa conversación no ocurrió y el
   visitante tiene que saberlo sin tener que deducirlo. */
.hd-tag{
  font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper);border:1px solid var(--copper-dim);background:var(--copper-soft);
  padding:3px 8px;border-radius:4px;flex-shrink:0;
}
.hd-chat{
  display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);
  min-height:232px;justify-content:flex-end;
}
.hd-msg{
  max-width:82%;padding:9px 13px;border-radius:14px;font-size:var(--text-small);
  line-height:1.5;animation:hdEntra .32s var(--ease) both;
}
.hd-msg.in{align-self:flex-start;background:var(--bg-elevated);border:1px solid var(--border-soft);border-bottom-left-radius:4px;}
.hd-msg.out{align-self:flex-end;background:var(--teal-dim);border-bottom-right-radius:4px;}
.hd-msg.esc{display:flex;gap:5px;align-items:center;padding:12px 14px;}
.hd-msg.esc span{width:6px;height:6px;border-radius:50%;background:var(--text-faint);animation:hdPunto 1.1s infinite;}
.hd-msg.esc span:nth-child(2){animation-delay:.16s;}
.hd-msg.esc span:nth-child(3){animation-delay:.32s;}
@keyframes hdEntra{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes hdPunto{0%,60%,100%{opacity:.28;}30%{opacity:1;}}

.hd-flow{
  display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);
  padding:var(--s4);border:1px solid var(--border-soft);border-radius:var(--radius);
  background:rgba(0,0,0,.14);
}
.hd-step{display:flex;align-items:center;gap:var(--s3);flex:1;min-width:0;opacity:.34;transition:opacity .4s var(--ease);}
.hd-step.viva{opacity:1;}
.hd-step-ico{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--bg-card);transition:.4s var(--ease);
}
.hd-step.viva .hd-step-ico{border-color:var(--teal);background:var(--teal-soft);}
.hd-step-ico svg{width:16px;height:16px;fill:none;stroke:var(--text-dim);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:.4s var(--ease);}
.hd-step.viva .hd-step-ico svg{stroke:var(--teal);}
.hd-step-txt{display:flex;flex-direction:column;gap:1px;min-width:0;}
.hd-step-txt b{font-size:var(--text-micro);font-weight:600;}
.hd-step-txt i{font-style:normal;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-faint);}
.hd-link{flex:0 0 22px;height:1px;background:var(--border);position:relative;}
.hd-link i{position:absolute;inset:0;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);}
.hd-link.viva i{transform:scaleX(1);}

@media (max-width:960px){
  /* En una sola columna el orden cambia: argumento, DEMOSTRACIÓN, y después
     los botones. Ver el comentario del héroe en index.html. */
  .hero .wrap{grid-template-columns:1fr;grid-template-areas:"copy" "demo" "accion";gap:var(--s6);}
  .hero-copy h1{margin-bottom:var(--s4);}
  .hero p.sub{margin-bottom:0;}
  .hd-flow{flex-wrap:wrap;gap:var(--s3);}
  .hd-step{flex:1 1 100%;}
  .hd-link{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .hd-msg{animation:none;}
  .hd-msg.esc span{animation:none;opacity:.6;}
  .hd-step{opacity:1;}
  .hd-link i{transform:scaleX(1);}
}

/* ============ el problema ============
   Cuatro escenas de un día, con hora. No son tarjetas: la lista se lee de
   corrido, que es como se cuenta algo que le pasa a alguien. */
.problema{border-top:1px solid var(--border-soft);}
.prob-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-soft);}
.prob-lista li{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:baseline;gap:var(--s5);
  padding:var(--s5) 0;border-bottom:1px solid var(--border-soft);
}
.prob-hora{font-family:var(--font-mono);font-size:var(--text-small);color:var(--copper);font-variant-numeric:tabular-nums;}
.prob-escena{font-size:var(--text-h3);line-height:1.4;color:var(--text);}
.prob-escena em{font-style:normal;color:var(--text-faint);margin:0 var(--s2);}
.prob-costo{
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-faint);
  text-align:right;white-space:nowrap;
}
.prob-cierre{
  margin:var(--s7) 0 0;font-family:var(--font-voice);font-style:italic;
  font-size:var(--text-h2);color:var(--text-dim);max-width:34ch;
}
@media (max-width:760px){
  .prob-lista li{grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);}
  .prob-escena{grid-column:2;font-size:var(--text-body);}
  .prob-costo{grid-column:2;text-align:left;white-space:normal;}
}

.section{padding:var(--sec-base) 0;}
/* Las secciones protagonistas respiran el doble que las de apoyo. Es el
   cambio de una línea con más efecto de toda la hoja: cuando el ojo ve que un
   bloque tiene más aire, entiende que importa más sin leer una palabra. */
/* Doble selector a propósito: `.svc` se declara más abajo con --sec-base y,
   a igual especificidad, gana el que va último. Sin esto, la sección de la
   demostración —que es protagonista— respiraba como una de apoyo. */
.section-clave,.svc.section-clave{padding:var(--sec-clave) 0;}
.section-head{margin-bottom:var(--s7);max-width:640px;}
.section-head .eyebrow{margin-bottom:var(--s3);display:block;}
h2{
  font-family:var(--font-display);font-weight:600;font-size:var(--text-h1);
  margin:0 0 var(--s4);letter-spacing:-.022em;line-height:var(--lh-title);
  max-width:20ch;text-wrap:balance;
}
.section-head p{color:var(--text-dim);font-size:var(--text-body);margin:0;line-height:var(--lh-body);max-width:56ch;}
/* ============ bloques de servicio (chatbot / auditoría) ============
   Reemplazan las dos secciones gemelas que eran "caja vacía con un botón
   adentro + fila de tarjetas numeradas". Ahora cada servicio es un bloque
   asimétrico: argumento + CTA a la izquierda, vista previa del entregable
   real a la derecha (conversación / diagrama), y los pasos como un riel
   conectado abajo — son secuencias de verdad, por eso van numerados.

   Cada servicio fija su acento UNA sola vez con --accent en el <section>;
   número, riel, íconos y hovers lo heredan. Así los dos servicios dejan de
   verse idénticos sin duplicar reglas. */
.svc{padding:var(--sec-base) 0;}
.svc-teal{--accent:var(--teal);--accent-dim:var(--teal-dim);--accent-soft:var(--teal-soft);--on-accent:var(--on-teal);}
.svc-copper{--accent:var(--copper);--accent-dim:var(--copper-dim);--accent-soft:var(--copper-soft);--on-accent:var(--on-copper);}
.svc-violet{--accent:var(--violet);--accent-dim:var(--violet-dim);--accent-soft:var(--violet-soft);--on-accent:var(--on-violet);}

.svc-top{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media (max-width:920px){.svc-top{grid-template-columns:1fr;gap:38px;}}

.svc-eyebrow{
  font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.9px;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:10px;margin:0 0 16px;
}
.svc-eyebrow:before{content:"";width:26px;height:1px;background:var(--accent-dim);flex-shrink:0;}
.svc-copy h2{margin:0 0 14px;}
.svc-lead{color:var(--text-dim);font-size:var(--text-body);line-height:1.65;margin:0 0 28px;}

.svc-points{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:14px;}
.svc-points li{display:flex;gap:12px;align-items:flex-start;font-size:var(--text-small);line-height:1.55;}
.svc-points svg{
  width:18px;height:18px;flex-shrink:0;margin-top:1px;
  fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.svc-points b{font-weight:600;color:var(--text);}
.svc-points span{color:var(--text-dim);}

.svc-cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.btn-accent{background:var(--accent);color:var(--on-accent);}
.btn-accent:hover{filter:brightness(1.09);transform:translateY(-1px);}
.svc-meta{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-faint);}

/* panel de vista previa — muestra el entregable en vez de describirlo */
.svc-preview{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px;box-shadow:var(--shadow-card);
}
.svc-preview-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-mono);font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.6px;
  color:var(--text-faint);margin-bottom:16px;
}
.svc-preview-live{display:flex;align-items:center;gap:7px;color:var(--accent);}
.svc-preview-live i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blink 1.8s ease-in-out infinite;}

.svc-chat{display:flex;flex-direction:column;gap:10px;}
.svc-bubble{max-width:80%;padding:10px 14px;border-radius:14px;font-size:var(--text-small);line-height:1.5;}
.svc-bubble.in{align-self:flex-start;background:var(--bg-elevated);border:1px solid var(--border-soft);border-top-left-radius:4px;}
.svc-bubble.out{align-self:flex-end;background:var(--copper);color:var(--on-copper);border-top-right-radius:4px;}

.svc-diagram{width:100%;height:auto;display:block;}
.svc-diagram .d-box{fill:var(--bg-elevated);stroke:var(--border);stroke-width:1;}
.svc-diagram .d-box-flag{fill:var(--copper-soft);stroke:var(--copper-dim);stroke-width:1;}
.svc-diagram .d-label{font-family:'Inter',sans-serif;font-size:9.5px;fill:var(--text);}
.svc-diagram .d-sub{font-family:'JetBrains Mono',monospace;font-size:7.5px;fill:var(--text-faint);}
.svc-diagram .d-flag{font-family:'JetBrains Mono',monospace;font-size:7.5px;fill:var(--copper);}
.svc-diagram .d-line{stroke:var(--border);stroke-width:1;fill:none;}
.svc-diagram .d-arrow{fill:var(--border);stroke:none;}
.svc-diagram .d-line-accent{stroke:var(--copper-dim);stroke-width:1;fill:none;stroke-dasharray:3 3;}

/* riel de pasos — la línea corta vive en el hueco entre columnas, así no
   hace falta perforar el trazo con un círculo de fondo opaco */
.svc-steps{
  margin-top:60px;display:grid;gap:0 26px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.svc-step{position:relative;}
.svc-step:not(:first-child):before{
  content:"";position:absolute;top:13px;right:calc(100% + 1px);width:24px;height:1px;
  background:var(--border);
}
@media (max-width:600px){.svc-step:not(:first-child):before{display:none;}}
.svc-step-n{
  width:27px;height:27px;border-radius:50%;background:var(--accent-soft);
  border:1px solid var(--accent-dim);color:var(--accent);
  font-family:var(--font-mono);font-size:var(--text-micro);
  display:flex;align-items:center;justify-content:center;margin-bottom:15px;
}
.svc-step h4{font-family:var(--font-display);font-weight:600;font-size:var(--text-small);margin:0 0 6px;}
.svc-step p{font-size:var(--text-micro);color:var(--text-dim);line-height:1.55;margin:0;}

.svc-note{
  margin:44px 0 0;padding-top:22px;border-top:1px solid var(--border-soft);
  font-size:var(--text-small);color:var(--text-dim);
}
.svc-note b{color:var(--accent);font-weight:600;}

/* ============ análisis inteligente ============
   La sección de auditoría vive en UNA tarjeta grande: copy a la izquierda,
   panel animado a la derecha. El panel reproduce el recorrido real del
   servicio (mapear → detectar → proponer → proyectar → priorizar), así que
   es la demostración del servicio, no un adorno.

   Todo el movimiento se hace con transform y opacity — las dos propiedades
   que el navegador anima sin recalcular el layout. Lo demás (alto de la
   tarjeta, posición del texto) queda quieto: una sección que "respira" al
   ritmo de la animación se siente barata.

   La animación solo corre cuando la sección está a la vista y la pestaña
   está activa (ver renderAnalisis en app.js), y se apaga entera con
   prefers-reduced-motion. */

.an-card{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(214,138,76,.09), transparent 58%),
    radial-gradient(90% 70% at 4% 96%, rgba(63,163,150,.06), transparent 60%),
    var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:52px;box-shadow:var(--shadow-card);
}
/* Retícula tenue: da textura de instrumento sin competirle al contenido. */
.an-card:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(80% 70% at 70% 30%, #000, transparent 72%);
  -webkit-mask-image:radial-gradient(80% 70% at 70% 30%, #000, transparent 72%);
}
.an-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}

.an-copy h2{margin:0 0 12px;}
.an-claim{
  font-family:var(--font-display);font-size:var(--text-h3);font-weight:600;line-height:1.35;
  color:var(--accent);margin:0 0 16px;
}
.an-copy .svc-lead{margin-bottom:26px;}

.an-points{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:15px;}
.an-points li{display:flex;gap:12px;align-items:flex-start;font-size:var(--text-small);line-height:1.55;}
.an-points svg{
  width:18px;height:18px;flex-shrink:0;margin-top:1px;
  fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.an-points b{font-weight:600;color:var(--text);display:block;}
.an-points span{color:var(--text-dim);}

/* ---- panel ---- */
.an-dash{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 16px 18px;box-shadow:0 24px 60px -30px rgba(0,0,0,.85);
}
.an-dash-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-mono);font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.7px;
  color:var(--text-faint);padding-bottom:13px;margin-bottom:4px;
  border-bottom:1px solid var(--border-soft);
}
.an-status{color:var(--accent);transition:opacity .18s var(--ease);}
.an-status.is-cambiando{opacity:0;}
.an-live{display:flex;align-items:center;gap:7px;}
.an-live i{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:blink 1.8s ease-in-out infinite;}

/* Alto fijo: las escenas se superponen, así la tarjeta nunca cambia de tamaño.
   overflow:hidden lo vuelve una ventana: los paneles entran y salen por los
   costados sin asomarse fuera del recuadro. */
.an-stage{position:relative;height:272px;overflow:hidden;}

/* ---- escenas 1-2: el flujo ---- */
.an-flow{
  position:absolute;inset:0;display:flex;align-items:center;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.an-flow.is-fuera{opacity:0;transform:translateX(-26px);}

.an-node{
  flex:1;min-width:0;background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:13px 10px;text-align:center;
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.an-node b{display:block;font-size:var(--text-micro);font-weight:600;color:var(--text);line-height:1.3;}
.an-node span{
  display:block;margin-top:4px;font-family:var(--font-mono);font-size:9.5px;
  color:var(--text-faint);
}
.an-node.is-marcado{
  border-color:var(--accent);background:var(--accent-soft);
  box-shadow:0 0 0 1px var(--accent-dim), 0 0 26px -6px rgba(214,138,76,.5);
}
.an-node.is-marcado b{color:var(--accent);}

/* Conector: la línea base queda quieta y la partícula la recorre. */
.an-link{position:relative;height:1px;width:26px;flex:0 0 26px;background:var(--border);}
.an-link i{
  position:absolute;top:-1.5px;left:0;width:14px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent));
  animation:an-particula 2.4s linear infinite;
}
.an-link + .an-node + .an-link i{animation-delay:.7s;}
@keyframes an-particula{
  0%{transform:translateX(-14px);opacity:0;}
  25%{opacity:1;}
  75%{opacity:1;}
  100%{transform:translateX(26px);opacity:0;}
}

/* Línea de análisis que recorre el flujo. */
.an-scan{
  position:absolute;top:0;bottom:0;width:2px;left:0;opacity:0;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);
  box-shadow:0 0 18px 3px rgba(214,138,76,.35);
}
.an-scan.is-corriendo{animation:an-barrido 2.6s var(--ease) forwards;}
@keyframes an-barrido{
  0%{left:0;opacity:0;}
  12%{opacity:1;}
  88%{opacity:1;}
  100%{left:calc(100% - 2px);opacity:0;}
}

/* ---- tarjeta flotante de alerta ---- */
.an-alert{
  position:absolute;left:50%;bottom:2px;transform:translate(-50%,14px);
  opacity:0;pointer-events:none;
  background:var(--bg-card);border:1px solid var(--accent-dim);border-radius:var(--radius-sm);
  padding:11px 16px;text-align:center;min-width:214px;
  box-shadow:0 0 0 1px rgba(214,138,76,.14), 0 18px 34px -18px rgba(0,0,0,.9);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.an-alert.is-visible{opacity:1;transform:translate(-50%,0);}
.an-alert-tag{
  display:block;font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--accent);margin-bottom:5px;
}
.an-alert strong{font-size:var(--text-small);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}

/* ---- escenas 3-5: paneles que entran por la derecha ---- */
.an-panel{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateX(30px);pointer-events:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.an-panel.is-visible{opacity:1;transform:translateX(0);}
.an-panel.is-saliendo{opacity:0;transform:translateX(-30px);}
.an-panel-tag{
  font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.9px;
  color:var(--accent);margin-bottom:12px;
}
.an-panel h4{font-family:var(--font-display);font-size:var(--text-h2);font-weight:600;margin:0 0 8px;color:var(--text);}
.an-panel > p{font-size:var(--text-small);color:var(--text-dim);margin:0;line-height:1.55;}

/* métricas de impacto */
.an-metrics{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:21px;}
.an-metrics li{
  position:relative;display:flex;align-items:center;gap:9px;
  font-size:var(--text-small);color:var(--text);padding-bottom:11px;
  opacity:0;transform:translateY(7px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.an-panel.is-visible .an-metrics li{opacity:1;transform:translateY(0);}
.an-panel.is-visible .an-metrics li:nth-child(1){transition-delay:.15s;}
.an-panel.is-visible .an-metrics li:nth-child(2){transition-delay:.35s;}
.an-panel.is-visible .an-metrics li:nth-child(3){transition-delay:.55s;}
/* La barra es el "número que crece": mide sin inventar una cifra falsa. */
.an-metrics i{
  position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  transition:width 1.1s var(--ease);
}
.an-panel.is-visible .an-metrics i{width:var(--nivel);transition-delay:.5s;}
.an-metrics .an-arrow{font-size:var(--text-body);line-height:1;}
.an-arrow.down{color:var(--teal);}
.an-arrow.up{color:var(--copper);}

/* roadmap */
.an-roadmap{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px;}
.an-roadmap li{
  display:flex;align-items:center;gap:12px;font-size:var(--text-small);color:var(--text);
  background:var(--bg-elevated);border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);padding:10px 13px;
  opacity:0;transform:translateX(16px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.an-panel.is-visible .an-roadmap li{opacity:1;transform:translateX(0);}
.an-panel.is-visible .an-roadmap li:nth-child(1){transition-delay:.15s;}
.an-panel.is-visible .an-roadmap li:nth-child(2){transition-delay:.32s;}
.an-panel.is-visible .an-roadmap li:nth-child(3){transition-delay:.49s;}
.an-roadmap em{
  font-family:var(--font-mono);font-style:normal;font-size:var(--text-micro);color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.an-roadmap-note{
  font-family:var(--font-mono);font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.7px;
  color:var(--text-faint);margin:0;
}

@media (max-width:920px){
  .an-card{padding:34px 24px;}
  .an-grid{grid-template-columns:1fr;gap:34px;}
  .an-claim{font-size:var(--text-h3);}
}
@media (max-width:560px){
  .an-card{padding:26px 18px;}
  .an-dash{padding:13px 12px 15px;}
  /* Tres nodos en fila quedan ilegibles en pantallas angostas: el flujo se
     vuelve vertical y los conectores giran con él. */
  /* El flujo se ancla arriba y la alerta ocupa el pie: centrado, la tarjeta
     terminaba tapando el tercer bloque. */
  .an-flow{flex-direction:column;justify-content:flex-start;}
  .an-stage{height:282px;}
  .an-node{width:100%;flex:0 0 auto;padding:9px 8px;}
  .an-link{width:1px;height:16px;flex:0 0 16px;}
  .an-link i{
    width:4px;height:12px;top:0;left:-1.5px;
    background:linear-gradient(180deg,transparent,var(--accent));
    animation-name:an-particula-vertical;
  }
  @keyframes an-particula-vertical{
    0%{transform:translateY(-12px);opacity:0;}
    25%{opacity:1;}
    75%{opacity:1;}
    100%{transform:translateY(16px);opacity:0;}
  }
  .an-scan{
    top:0;left:0;right:0;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
  }
  .an-scan.is-corriendo{animation-name:an-barrido-vertical;}
  @keyframes an-barrido-vertical{
    0%{top:0;opacity:0;}
    12%{opacity:1;}
    88%{opacity:1;}
    100%{top:calc(100% - 2px);opacity:0;}
  }
  .an-alert{left:0;right:0;bottom:0;transform:translateY(12px);min-width:0;padding:9px 12px;}
  .an-alert.is-visible{transform:translateY(0);}
  .an-panel h4{font-size:var(--text-h3);}
}

/* Sin animación: queda el flujo quieto, que ya cuenta la historia. */
@media (prefers-reduced-motion:reduce){
  .an-link i,.an-live i{animation:none;opacity:.6;}
  .an-scan{display:none;}
  .an-flow,.an-panel,.an-alert,.an-metrics li,.an-roadmap li{transition:none;}
}

/* ============ casos ilustrativos ============
   Cada tarjeta contrasta lo que el cliente pidió contra lo que apareció al
   medir: ese contraste es el argumento de venta de la auditoría. El aviso
   final no es decorativo — son casos construidos, no clientes reales, y
   presentarlos de otro modo sería publicidad engañosa. */
.casos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
.caso-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.caso-card:hover{transform:translateY(-4px);border-color:var(--copper-dim);box-shadow:var(--shadow-glow-copper);}
.caso-card-featured{border-color:var(--copper-dim);background:linear-gradient(180deg,var(--copper-soft),var(--bg-card) 60%);}
.caso-sector{
  font-family:var(--font-mono);font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.7px;
  color:var(--copper);margin-bottom:12px;
}
.caso-card h3{font-family:var(--font-display);font-weight:600;font-size:var(--text-body);line-height:1.3;margin:0 0 14px;}
.caso-pedido,.caso-hallazgo{font-size:var(--text-small);line-height:1.5;margin:0 0 var(--s2);padding-left:16px;position:relative;}
.caso-pedido{color:var(--text-faint);}
.caso-pedido:before{content:"—";position:absolute;left:0;top:0;}
.caso-hallazgo{color:var(--text-dim);flex-grow:1;}
.caso-hallazgo:before{content:"→";position:absolute;left:0;top:0;color:var(--copper);}
.caso-link{
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--copper);margin-top:16px;
}
.casos-nota{
  margin:26px 0 0;font-size:var(--text-micro);color:var(--text-faint);text-align:center;line-height:1.55;
}

/* elegir Personalizada / Simplificada dentro del wizard público */
.mode-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:560px){.mode-choice-grid{grid-template-columns:1fr;}}
.mode-choice-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 20px;cursor:pointer;text-align:left;
  transition:transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.mode-choice-card:hover{transform:translateY(-3px);border-color:var(--teal-dim);}
.mode-choice-card.active{border-color:var(--teal);box-shadow:var(--shadow-glow-teal);}
.mode-choice-icon{
  width:38px;height:38px;border-radius:50%;background:var(--teal-soft);color:var(--teal);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.mode-choice-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.mode-choice-card h4{font-family:var(--font-display);font-weight:600;font-size:var(--text-body);margin:0 0 8px;}
.mode-choice-card p{font-size:var(--text-micro);color:var(--text-dim);margin:0;line-height:1.5;}

/* Formulario grande y amigable con íconos (wizard de "Auditoría y Roadmap
   Técnico" y wizard de "Construye tu chatbot") — clase .icon-form limita
   estos estilos a esos wizards para no afectar el resto de .field del sitio
   (contacto, admin). */
.icon-form .field{margin-bottom:22px;}
.icon-form .field label{font-size:var(--text-small);color:var(--text);margin-bottom:9px;font-family:var(--font-body);font-weight:500;letter-spacing:0;}
.icon-form .field input[type=text],.icon-form .field input[type=email],.icon-form .field input[type=tel],.icon-form .field textarea{
  padding:14px 16px 14px 44px;font-size:var(--text-body);border-radius:var(--radius);
}
.icon-form .field textarea{min-height:88px;}

.input-icon-wrap{position:relative;}
.input-icon-wrap .field-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--teal);display:flex;pointer-events:none;
}
.input-icon-wrap.icon-top .field-icon{top:16px;transform:none;}
.input-icon-wrap .field-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

.icon-choice-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px;}
.icon-choice-card{
  display:flex;flex-direction:column;align-items:center;gap:9px;flex:1 1 100px;min-width:96px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 10px;cursor:pointer;text-align:center;color:var(--text-dim);
  transition:transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease);
}
.icon-choice-card:hover{transform:translateY(-2px);border-color:var(--teal-dim);color:var(--text);}
.icon-choice-card.active{border-color:var(--teal);color:var(--teal);background:var(--teal-soft);box-shadow:var(--shadow-glow-teal);}
.icon-choice-card svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.icon-choice-card span{font-size:var(--text-micro);line-height:1.35;font-weight:500;}

/* ============ casos de uso por rubro ============ */
/* ============ casos de uso — demo interactiva ============
   Selector a la izquierda, demostración a la derecha. Lo que se ve del lado
   derecho lo arma renderUseCase() desde USE_CASES: no hay cinco bloques
   escondidos, hay uno solo que se reescribe.

   El panel tiene alto mínimo fijo para que al cambiar de rubro la página no
   dé un salto — la conversación más larga y la más corta ocupan lo mismo. */

.uc-grid{display:grid;grid-template-columns:264px minmax(0,1fr);gap:22px;align-items:start;}

/* ---- selector ---- */
.uc-selector{display:flex;flex-direction:column;gap:8px;}
.uc-item{
  position:relative;display:flex;align-items:center;gap:13px;width:100%;
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:14px 16px;cursor:pointer;text-align:left;color:var(--text-dim);
  font-family:var(--font-body);font-size:var(--text-small);
  transition:transform .18s var(--ease), border-color .18s var(--ease),
             background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.uc-item:hover{
  transform:translateX(3px);border-color:var(--teal-dim);color:var(--text);
  box-shadow:0 0 24px -14px rgba(63,163,150,.9);
}
.uc-item svg{
  width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  color:var(--text-faint);transition:color .18s var(--ease), transform .18s var(--ease);
}
.uc-item:hover svg{color:var(--teal);transform:scale(1.08);}
.uc-item b{font-weight:500;flex:1;min-width:0;}
/* La flecha solo asoma al pasar por encima: invita sin ensuciar el reposo. */
.uc-item i{
  font-style:normal;color:var(--teal);opacity:0;transform:translateX(-4px);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.uc-item:hover i{opacity:1;transform:translateX(0);}

.uc-item.is-activa{
  background:var(--teal-soft);border-color:var(--teal-dim);color:var(--text);
  box-shadow:0 0 0 1px var(--teal-dim);
}
.uc-item.is-activa svg{color:var(--teal);}
.uc-item.is-activa i{opacity:1;transform:translateX(0);}
/* Indicador lateral: la marca de "estás acá" del selector. */
.uc-item.is-activa:before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:26px;border-radius:0 3px 3px 0;background:var(--teal);
}

/* ---- panel de demostración ---- */
.uc-demo{
  position:relative;min-height:546px;display:flex;flex-direction:column;
  background:
    radial-gradient(110% 80% at 92% 4%, rgba(63,163,150,.07), transparent 56%),
    var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:22px 24px 24px;box-shadow:var(--shadow-card);
}
.uc-demo.is-cambiando .uc-body{opacity:0;transform:translateX(16px);}
.uc-body{
  flex:1;display:flex;flex-direction:column;
  opacity:1;transform:translateX(0);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}

.uc-demo-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--border-soft);
}
.uc-demo-title{font-family:var(--font-display);font-size:var(--text-small);font-weight:500;color:var(--text);}
.uc-demo-live{
  display:flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.7px;color:var(--text-faint);
}
.uc-demo-live i{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:blink 1.8s ease-in-out infinite;}

/* ---- conversación ---- */
.uc-chat{flex:1;display:flex;flex-direction:column;gap:9px;min-height:214px;}
.uc-msg{
  max-width:78%;padding:10px 14px;border-radius:14px;font-size:var(--text-small);line-height:1.5;
  animation:uc-entra .34s var(--ease) both;
}
.uc-msg.de-cliente{align-self:flex-start;background:var(--bg-elevated);border:1px solid var(--border-soft);border-top-left-radius:4px;color:var(--text);}
.uc-msg.de-bot{align-self:flex-end;background:var(--teal);color:var(--on-teal);border-top-right-radius:4px;}
@keyframes uc-entra{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* "escribiendo…" — tres puntos que respiran, como en WhatsApp */
.uc-typing{
  align-self:flex-end;display:flex;align-items:center;gap:4px;
  background:var(--bg-elevated);border:1px solid var(--border-soft);
  border-radius:14px;border-top-right-radius:4px;padding:12px 15px;
  animation:uc-entra .3s var(--ease) both;
}
.uc-typing span{width:5px;height:5px;border-radius:50%;background:var(--teal);animation:uc-punto 1.3s ease-in-out infinite;}
.uc-typing span:nth-child(2){animation-delay:.18s;}
.uc-typing span:nth-child(3){animation-delay:.36s;}
@keyframes uc-punto{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* ---- ficha extra (lead calificado / propiedades) ---- */
.uc-extra{margin-top:14px;}
.uc-ficha{
  background:var(--bg-elevated);border:1px solid var(--teal-dim);border-radius:var(--radius-sm);
  padding:13px 15px;animation:uc-entra .4s var(--ease) both;
}
.uc-ficha-tag{
  display:block;font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--teal);margin-bottom:9px;
}
.uc-ficha-filas{display:flex;flex-wrap:wrap;gap:8px 26px;}
.uc-ficha-filas div{display:flex;flex-direction:column;gap:2px;}
.uc-ficha-filas span{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-faint);}
.uc-ficha-filas b{font-size:var(--text-micro);font-weight:600;color:var(--text);}

.uc-props{display:flex;gap:9px;flex-wrap:wrap;}
.uc-prop{
  flex:1 1 128px;background:var(--bg-elevated);border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);padding:10px 12px;animation:uc-entra .4s var(--ease) both;
}
.uc-prop b{display:block;font-size:var(--text-micro);font-weight:600;color:var(--text);margin-bottom:3px;}
.uc-prop span{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--teal);}
.uc-prop em{display:block;font-style:normal;font-size:var(--text-micro);color:var(--text-faint);margin-top:3px;}

/* ---- capacidades ---- */
.uc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}
.uc-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--teal-soft);border:1px solid var(--teal-dim);border-radius:var(--radius-pill);
  padding:5px 12px;font-size:var(--text-micro);color:var(--teal);
  opacity:0;transform:translateY(6px);
  transition:opacity .32s var(--ease), transform .32s var(--ease);
}
.uc-chips.is-visible .uc-chip{opacity:1;transform:translateY(0);}
.uc-chips.is-visible .uc-chip:nth-child(1){transition-delay:.05s;}
.uc-chips.is-visible .uc-chip:nth-child(2){transition-delay:.15s;}
.uc-chips.is-visible .uc-chip:nth-child(3){transition-delay:.25s;}
.uc-chips.is-visible .uc-chip:nth-child(4){transition-delay:.35s;}

/* ---- antes / después ---- */
.uc-ba{
  display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--border-soft);
  opacity:0;transform:translateY(6px);
  transition:opacity .38s var(--ease), transform .38s var(--ease);
}
.uc-ba.is-visible{opacity:1;transform:translateY(0);transition-delay:.45s;}
.uc-ba > div{display:flex;flex-direction:column;gap:3px;min-width:0;}
.uc-ba span{
  font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.7px;color:var(--text-faint);
}
.uc-ba b{font-size:var(--text-micro);font-weight:600;color:var(--text-dim);}
.uc-ba .es-despues b{color:var(--teal);}
.uc-ba-flecha{color:var(--teal-dim);flex-shrink:0;}

/* ---- cierre ---- */
.uc-cta{
  display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
  margin-top:34px;
}
.uc-cta p{margin:0;font-size:var(--text-body);color:var(--text-dim);}

@media (max-width:900px){
  /* El selector pasa a una fila que se desliza: cinco tarjetas apiladas
     empujarían la demo fuera de la primera pantalla. */
  .uc-grid{grid-template-columns:minmax(0,1fr);gap:18px;}
  .uc-selector{
    flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;min-width:0;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .uc-selector::-webkit-scrollbar{display:none;}
  .uc-item{width:auto;flex:0 0 auto;padding:11px 15px;font-size:var(--text-small);}
  .uc-item:hover{transform:none;}
  .uc-item i{display:none;}
  .uc-item.is-activa:before{
    left:50%;top:auto;bottom:-1px;transform:translateX(-50%);
    width:22px;height:3px;border-radius:3px 3px 0 0;
  }
  .uc-demo{min-height:0;padding:18px 16px 20px;}
  .uc-chat{min-height:0;flex:0 1 auto;}
  .uc-props{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px;
  }
  .uc-props::-webkit-scrollbar{display:none;}
  .uc-prop{flex:0 0 152px;}
  .uc-msg{max-width:88%;}
}

@media (prefers-reduced-motion:reduce){
  .uc-msg,.uc-typing,.uc-ficha,.uc-prop{animation:none;}
  .uc-body,.uc-chips .uc-chip,.uc-ba{transition:none;}
  .uc-demo-live i{animation:none;opacity:.6;}
}


.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(10,7,4,0.78);z-index:100;
  align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 20px;
  backdrop-filter:blur(3px);
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--bg-elevated);border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  max-width:640px;width:100%;padding:34px;box-shadow:var(--shadow-modal);
}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;}
.modal h3{font-family:var(--font-display);font-size:var(--text-h2);font-weight:500;margin:0;}
.modal .close{background:none;border:none;color:var(--text-dim);font-size:var(--text-h2);cursor:pointer;line-height:1;transition:color .15s;}
.modal .close:hover{color:var(--text);}
.modal .step-sub{color:var(--text-dim);font-size:var(--text-small);margin:0 0 20px;}

.progress{display:flex;gap:5px;margin-bottom:24px;}
.progress span{height:3px;flex:1;background:var(--border);border-radius:2px;transition:background .2s;}
.progress span.done{background:var(--teal);}
.progress span.active{background:var(--copper);}

.field{margin-bottom:18px;}
.field label{display:block;font-size:var(--text-micro);color:var(--text-dim);margin-bottom:7px;font-family:var(--font-mono);letter-spacing:.2px;}
.field .hint{font-size:var(--text-micro);color:var(--copper);margin-top:6px;display:block;line-height:1.5;}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%;background:var(--bg-card);border:1px solid var(--border);color:var(--text);
  padding:11px 13px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:var(--text-small);
  transition:border-color .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);}
.field textarea{resize:vertical;min-height:68px;}
/* Campo con error: el borde rojo dice DÓNDE y el texto de abajo dice QUÉ.
   Al enfocarlo el borde sigue en rojo hasta que se corrige (validateFields
   quita la marca en el primer input), para que no parezca ya resuelto. */
.field.has-error input[type=text],
.field.has-error input[type=email],
.field.has-error input[type=tel],
.field.has-error select,
.field.has-error textarea{border-color:var(--danger);background:rgba(226,102,90,.05);}
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus{border-color:var(--danger);}
.field.has-error label{color:var(--danger);}
.field-error{
  display:block;margin-top:6px;font-size:var(--text-micro);line-height:1.5;color:var(--danger);
}
/* El icono del campo vive fuera del input (posicionado encima), así que se
   pinta aparte: si no, quedaría turquesa dentro de un recuadro rojo. */
.field.has-error .input-icon-wrap .field-icon{color:var(--danger);}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:520px){.field-row{grid-template-columns:1fr;}}
.checks{display:flex;flex-wrap:wrap;gap:9px;}
.chk{
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:10px 16px;font-size:var(--text-small);
  cursor:pointer;color:var(--text-dim);transition:.15s var(--ease);user-select:none;
}
.chk.active{border-color:var(--teal);color:var(--teal);background:var(--teal-soft);}
.pkg-select{display:flex;gap:8px;}
.pkg-opt{
  flex:1;text-align:center;border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 6px;
  font-size:var(--text-micro);cursor:pointer;color:var(--text-dim);transition:.15s var(--ease);
}
.pkg-opt.active{border-color:var(--copper);color:var(--copper);background:var(--copper-soft);}
.need-section-title{
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--teal);text-transform:uppercase;
  letter-spacing:.6px;margin:0 0 18px;padding-bottom:11px;border-bottom:1px solid var(--border-soft);
}
.form-error{color:var(--danger);font-size:var(--text-small);margin-bottom:14px;display:none;}
.form-error.show{display:block;}
.step-nav{display:flex;justify-content:space-between;gap:12px;margin-top:10px;}
.step-nav .right{display:flex;gap:10px;}

/* ============ chat de prueba en vivo (demo del bot) ============
   Estructura y look tipo WhatsApp real (calcado del estilo de referencia
   docs/referencias/celu.png): header con flecha atrás + iconos de
   llamada/menú, sub-barra propia con el timer/contador de la demo,
   divisor "Hoy" + aviso tipo cifrado (adaptado, honesto: esto es una
   demo con IA, no cifrado real), fondo con doodles tenues, burbujas con
   cola/sombra/hora agrupadas cuando son consecutivas del mismo lado.
   Colores del sitio en vez del verde de WhatsApp: --copper para el
   saliente (como en la referencia), #202C33 para el entrante (mismo
   gris-azulado que usa WhatsApp Web en modo oscuro). */
.demo-chat{display:none;}
.demo-chat.show{display:block;}
.demo-chat-head{
  display:flex;align-items:center;gap:10px;padding-bottom:12px;
  border-bottom:1px solid var(--border-soft);
}
.demo-chat-back{font-size:var(--text-h2);line-height:1;color:var(--text-dim);flex-shrink:0;}
.demo-chat-avatar{
  width:40px;height:40px;border-radius:50%;background:var(--teal-soft);border:1px solid var(--teal-dim);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--font-display);font-weight:600;font-size:var(--text-body);color:var(--teal);
}
.demo-chat-info{flex:1;min-width:0;}
.demo-chat-name{font-weight:600;font-size:var(--text-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.demo-chat-status{font-size:var(--text-micro);color:var(--teal);}
.demo-chat-head-icons{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.demo-chat-head-icons svg{width:18px;height:18px;fill:var(--text-dim);opacity:.8;}
.demo-chat-subbar{display:flex;justify-content:flex-end;padding:10px 0 14px;}
.demo-chat-timer{
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-dim);
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:5px 12px;white-space:nowrap;flex-shrink:0;
}

/* Fondo tipo WhatsApp: tono cálido oscuro (no el azul-negro de WhatsApp
   real, para que combine con la paleta del sitio) + doodles muy tenues en
   vez de negro plano. Mismo truco de SVG-en-data-uri que .bg-grid. */
.demo-chat-messages{
  display:flex;flex-direction:column;max-height:360px;min-height:220px;overflow-y:auto;
  padding:16px 14px;margin-bottom:14px;border-radius:var(--radius);border:1px solid var(--border-soft);
  background-color:#171310;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23D68A4C' stroke-width='1.3' opacity='0.16'%3E%3Cpath d='M18 22h20a5 5 0 0 1 5 5v11a5 5 0 0 1-5 5H29l-7 7v-7h-4a5 5 0 0 1-5-5V27a5 5 0 0 1 5-5z'/%3E%3Ccircle cx='112' cy='100' r='3'/%3E%3Cpath d='M104 44c4-6 13-6 17 0'/%3E%3Ccircle cx='58' cy='112' r='2'/%3E%3Cpath d='M125 18c3 3 3 8 0 11'/%3E%3Cpath d='M40 120h14M47 113v14'/%3E%3C/g%3E%3C/svg%3E");
  background-size:150px 150px;
}
.demo-date-divider{display:flex;justify-content:center;margin:0 0 10px;}
.demo-date-divider span{
  background:rgba(0,0,0,0.35);color:var(--text-dim);font-size:var(--text-micro);
  padding:4px 12px;border-radius:var(--radius-pill);
}
.demo-encryption-notice{
  display:block;text-align:center;font-size:var(--text-micro);line-height:1.5;color:var(--amber);
  background:var(--amber-soft);border-radius:var(--radius-sm);
  padding:8px 14px;margin:0 auto 14px;max-width:92%;
}
.demo-bubble{
  position:relative;max-width:78%;padding:8px 12px;font-size:var(--text-small);line-height:1.45;
  white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 2px rgba(0,0,0,0.35);
  border-radius:8px;margin-top:10px;
}
.demo-chat-messages .demo-bubble:first-child,
.demo-encryption-notice + .demo-bubble{margin-top:0;}
.demo-bubble.in + .demo-bubble.in,
.demo-bubble.out + .demo-bubble.out{margin-top:2px;}
.demo-bubble-text{padding-right:44px;}
.demo-bubble-time{
  position:absolute;right:10px;bottom:6px;font-size:var(--text-micro);line-height:1;white-space:nowrap;
}
.demo-bubble.in{align-self:flex-start;background:#202C33;color:var(--text);border-top-left-radius:2px;}
.demo-bubble.in .demo-bubble-time{color:rgba(233,237,239,0.45);}
.demo-bubble.in::before{
  content:"";position:absolute;top:0;left:-6px;width:0;height:0;
  border-top:0 solid transparent;border-bottom:6px solid transparent;border-right:6px solid #202C33;
}
.demo-bubble.in + .demo-bubble.in{border-top-left-radius:8px;}
.demo-bubble.in + .demo-bubble.in::before{display:none;}

.demo-bubble.out{align-self:flex-end;background:var(--copper);color:var(--on-copper);border-top-right-radius:2px;}
.demo-bubble.out .demo-bubble-text{padding-right:58px;}
.demo-bubble.out .demo-bubble-time{color:rgba(32,19,10,0.6);}
.demo-bubble.out .demo-bubble-time::after{content:"✓✓";margin-left:4px;color:#53BDEB;letter-spacing:-1px;}
.demo-bubble.out::before{
  content:"";position:absolute;top:0;right:-6px;width:0;height:0;
  border-top:0 solid transparent;border-bottom:6px solid transparent;border-left:6px solid var(--copper);
}
.demo-bubble.out + .demo-bubble.out{border-top-right-radius:8px;}
.demo-bubble.out + .demo-bubble.out::before{display:none;}

.demo-typing{display:flex;gap:4px;align-items:center;padding:12px 14px;}
.demo-typing span{width:6px;height:6px;border-radius:50%;background:var(--text-dim);animation:demoTypingBounce 1.1s infinite ease-in-out;}
.demo-typing span:nth-child(2){animation-delay:.15s;}
.demo-typing span:nth-child(3){animation-delay:.3s;}
@keyframes demoTypingBounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}
.demo-chat-limit-note{
  font-size:var(--text-micro);color:var(--copper);background:var(--copper-soft);border:1px solid var(--copper-dim);
  border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:14px;line-height:1.55;text-align:center;
}
.demo-chat-input-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.demo-chat-icon-btn{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:20px;font-size:var(--text-h3);color:var(--text-dim);opacity:.75;user-select:none;
}
.demo-chat-input-row input{
  flex:1;background:var(--bg-card);border:1px solid var(--border);color:var(--text);
  padding:12px 15px;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:var(--text-small);
}
.demo-chat-input-row input:focus{outline:none;border-color:var(--teal);}
.demo-chat-input-row input:disabled{opacity:.5;}
.demo-chat-send{
  width:42px;height:42px;flex-shrink:0;border-radius:50%;background:var(--copper);color:var(--on-copper);
  border:none;font-size:var(--text-body);cursor:pointer;transition:.15s var(--ease);
}
.demo-chat-send:hover:not(:disabled){background:#E39C5C;}
.demo-chat-send:disabled{opacity:.5;cursor:not-allowed;}

.result{margin-top:22px;border-top:1px solid var(--border-soft);padding-top:22px;display:none;}
.result.show{display:block;}
.result .status{display:flex;align-items:center;gap:10px;font-size:var(--text-small);color:var(--text-dim);margin-bottom:14px;font-family:var(--font-mono);}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--teal);animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.blueprint{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:18px;
  font-size:var(--text-small);white-space:pre-wrap;line-height:1.65;max-height:340px;overflow-y:auto;
}
.result .tag{
  display:inline-block;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--teal);
  border:1px solid var(--teal-dim);padding:4px 10px;border-radius:var(--radius-pill);margin-bottom:10px;
}
.review-block{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:12px;font-size:var(--text-small);}
.review-block b{color:var(--teal);font-family:var(--font-mono);font-size:var(--text-micro);text-transform:uppercase;display:block;margin-bottom:8px;}
.review-block div{padding:3px 0;color:var(--text-dim);}
.review-block div span{color:var(--text);}

/* resultado: diagrama, beneficios, cotización */
.modal.wide{max-width:820px;}
.result-head{text-align:center;margin-bottom:30px;}
.result-head .tag{
  display:inline-block;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--teal);
  border:1px solid var(--teal-dim);padding:4px 10px;border-radius:var(--radius-pill);margin-bottom:14px;
}
.result-head h2{font-size:var(--text-h1);margin:0 0 6px;}
.result-head p{color:var(--text-dim);font-size:var(--text-small);margin:0;}

.result-section{margin-bottom:36px;}
.result-section h4{
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--teal);text-transform:uppercase;
  letter-spacing:.6px;margin:0 0 18px;
}

.pain-banner{
  background:linear-gradient(135deg, var(--copper-soft), var(--teal-soft));
  border:1px solid var(--copper-dim);border-radius:var(--radius);padding:20px 22px;font-size:var(--text-small);
  margin-bottom:26px;line-height:1.55;
}
.pain-banner b{color:var(--copper);display:block;font-family:var(--font-mono);font-size:var(--text-micro);text-transform:uppercase;margin-bottom:7px;letter-spacing:.5px;}

.diagram-flow{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:6px 0 14px;}
.flow-step{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:17px 15px;min-width:154px;flex-shrink:0;position:relative;box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.flow-step:hover{transform:translateY(-4px);border-color:var(--teal-dim);box-shadow:var(--shadow-glow-teal);}
.flow-step .n{font-family:var(--font-mono);color:var(--teal);font-size:var(--text-micro);margin-bottom:9px;}
.flow-step .t{font-weight:600;font-size:var(--text-small);margin-bottom:6px;}
.flow-step .d{font-size:var(--text-micro);color:var(--text-dim);line-height:1.5;}
.flow-arrow{display:flex;align-items:center;justify-content:center;min-width:28px;color:var(--teal);font-size:var(--text-body);flex-shrink:0;}

.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;}
@media (max-width:560px){.benefits-grid{grid-template-columns:1fr;}}
.benefit-card{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);padding:20px 17px;text-align:center;
  box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.benefit-card:hover{transform:translateY(-4px);border-color:var(--teal-dim);box-shadow:var(--shadow-glow-teal);}
.benefit-card .icon{font-size:var(--text-h2);margin-bottom:9px;}
.benefit-card .label{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--teal);text-transform:uppercase;margin-bottom:7px;letter-spacing:.3px;}
.benefit-card .value{font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);margin-bottom:7px;}
.benefit-card .detail{font-size:var(--text-micro);color:var(--text-dim);line-height:1.45;}

/* Tabla de 3 filas "Beneficios para tu negocio" en la pantalla de resultado
   del flujo público — mismo lenguaje visual que .quote-box (bg-card + border)
   que ya usa el resto de esta pantalla. */
.benefits-table{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);padding:4px 24px;box-shadow:var(--shadow-card);}
.benefits-row{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-top:1px solid var(--border-soft);}
.benefits-row:first-child{border-top:none;}
.benefits-row .icon{font-size:var(--text-h3);flex-shrink:0;width:24px;text-align:center;line-height:1.4;}
.benefits-row .label-col{flex-shrink:0;width:130px;}
.benefits-row .label-col b{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--teal);text-transform:uppercase;letter-spacing:.3px;}
.benefits-row .desc{flex:1;font-size:var(--text-small);color:var(--text-dim);line-height:1.5;}
.benefits-loading{display:flex;align-items:center;gap:10px;padding:20px 0;font-size:var(--text-small);color:var(--text-dim);font-family:var(--font-mono);}
@media (max-width:560px){
  .benefits-row{flex-wrap:wrap;}
  .benefits-row .label-col{width:auto;}
}

.quote-box{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-card);}
.quote-line{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid var(--border-soft);font-size:var(--text-small);}
.quote-line:first-child{border-top:none;}
.quote-line .l{color:var(--text-dim);}
.quote-line .v{font-family:var(--font-mono);color:var(--text);text-align:right;max-width:52%;}
.quote-line.total{border-top:1px solid var(--copper-dim);margin-top:7px;padding-top:15px;}
.quote-line.total .l{color:var(--text);font-weight:600;}
.quote-line.total .v{color:var(--copper);font-size:var(--text-body);font-weight:700;}
.quote-disclaimer{
  font-size:var(--text-micro);color:var(--text-dim);background:rgba(255,255,255,0.025);border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);padding:13px 15px;margin-top:18px;line-height:1.6;
}

/* El aviso del cobro de Meta. Va con la barra de cobre y no dentro del
   disclaimer gris porque NO es letra chica: es un costo nuevo que aparece
   el 1 de octubre y que el prospecto tiene que ver, no encontrar. */
.quote-aviso,.precio-aviso{
  font-size:var(--text-micro);color:var(--text-dim);line-height:1.6;
  border-left:3px solid var(--copper);background:var(--copper-soft);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:11px 14px;margin-top:12px;
}
.precio-aviso{margin-top:var(--s4);}

.cta-final{text-align:center;margin-top:32px;}
.cta-final p{font-size:var(--text-small);color:var(--text-dim);margin:0 0 16px;}
.whatsapp-btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:var(--on-teal);
  font-weight:600;font-size:var(--text-small);padding:14px 30px;border-radius:var(--radius-pill);text-decoration:none;
  transition:.15s var(--ease);
}
.whatsapp-btn:hover{background:#57BCAE;transform:translateY(-1px);}
.result-footer-actions{display:flex;justify-content:center;gap:10px;margin-top:18px;}
.fallback-note{
  font-size:var(--text-micro);color:var(--copper);background:var(--copper-soft);border:1px solid var(--copper-dim);
  border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:14px;line-height:1.55;
}

.admin-toggle{
  position:fixed;bottom:20px;right:20px;z-index:60;background:var(--bg-elevated);
  border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);
  font-size:var(--text-micro);padding:11px 18px;border-radius:var(--radius-pill);cursor:pointer;
  box-shadow:var(--shadow-card);transition:.15s var(--ease);
}
.admin-toggle:hover{border-color:var(--copper);color:var(--copper);}
/* En movil el nav ya trae un boton "Panel interno" con la misma accion;
   el flotante solo estorba y puede tapar el CTA del hero en viewports cortos. */
@media (max-width:640px){.admin-toggle{display:none;}}
/* El panel interno es el único modal a pantalla completa del sitio: los
   demás (booking, contacto) son diálogos chicos centrados. admin-fullscreen
   pisa el tamaño/alineación de .modal-overlay; admin-modal se vuelve un
   contenedor flex en columna con dos franjas: admin-modal-header (título +
   tabs, flex-shrink:0, siempre visible) y admin-modal-body (única que
   scrollea). */
.modal-overlay.admin-fullscreen{padding:16px;align-items:stretch;justify-content:stretch;}
.modal-overlay.admin-fullscreen .modal.admin-modal{
  max-width:none;width:100%;height:100%;
  display:flex;flex-direction:column;padding:0;overflow:hidden;box-shadow:var(--shadow-modal);
}
.admin-modal-header{flex-shrink:0;padding:22px 30px 0;border-bottom:1px solid var(--border-soft);}
.admin-modal-header .modal-head{margin-bottom:18px;}
/* Ayuda y cerrar comparten esquina: la ayuda queda a mano sin competirle
   atención a nada del tablero. */
.admin-head-actions{display:flex;align-items:center;gap:16px;}
.admin-help{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.04em;
  color:var(--text-dim);border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:6px 13px;transition:color .15s,border-color .15s;
}
.admin-help:hover{color:var(--teal);border-color:var(--teal-dim);}
.admin-help-prod:hover{color:var(--copper);border-color:var(--copper-dim);}
.admin-help-alta:hover{color:var(--violet);border-color:var(--violet-dim);}
/* Tres enlaces y la cruz no entran en una fila angosta: que bajen en vez de
   empujar el botón de cerrar fuera de la pantalla. */
@media (max-width:720px){
  .admin-head-actions{flex-wrap:wrap;gap:9px;justify-content:flex-end;}
  .admin-help{padding:5px 10px;font-size:var(--text-micro);}
}
.admin-help svg{
  width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.admin-modal-header .admin-tabs{border-bottom:none;margin-bottom:0;}
.admin-modal-body{flex:1;overflow-y:auto;padding:22px 30px 34px;}
.admin-tabs{display:flex;gap:22px;margin-bottom:22px;border-bottom:1px solid var(--border-soft);}
.admin-tab{
  background:none;border:none;color:var(--text-dim);font-family:var(--font-body);font-weight:600;
  font-size:var(--text-small);padding:10px 2px;cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color .15s, border-color .15s;
}
.admin-tab:hover{color:var(--text);}
/* Cada pestaña lleva el color de su servicio ya en la barra superior, no
   solo dentro del panel: turquesa = chatbots, cobre = auditorías. */
.admin-tab.active{color:var(--teal);border-color:var(--teal);}
#tabAuditorias.active{color:var(--copper);border-color:var(--copper);}

/* sub-pestañas por servicio dentro de "Solicitudes" — cada tablero muestra
   solo su servicio, porque mezclarlos hacía imposible leer el kanban. El
   acento sale de .svc-teal/.svc-copper (las mismas clases de la landing),
   así el color de cada servicio es el mismo en toda la app. */
.admin-subtabs{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap;}
.admin-subtabs-refresh{margin-left:auto;padding:9px 18px;font-size:var(--text-small);}
.admin-subtab{
  display:inline-flex;align-items:center;gap:9px;
  background:none;border:1px solid var(--border);border-radius:var(--radius-pill);
  color:var(--text-dim);font-family:var(--font-body);font-weight:600;font-size:var(--text-small);
  padding:9px 18px;cursor:pointer;transition:.15s var(--ease);
}
.admin-subtab:hover{color:var(--text);border-color:var(--accent-dim);}
.admin-subtab.active{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-soft);}
.admin-subtab-count{
  font-family:var(--font-mono);font-size:var(--text-micro);padding:1px 7px;border-radius:var(--radius-pill);
  background:var(--border-soft);color:var(--text-dim);transition:color .15s;
}
.admin-subtab.active .admin-subtab-count{color:var(--accent);}
/* Volver de Implementaciones a Auditorias: es un paso atras, no una pestaña
   mas, asi que se pinta apagada y separada del grupo. */
.admin-subtab-volver{border-style:dashed;margin-right:6px;}
/* El par Cotizar/Implementar no lleva titulo de seccion, asi que no necesita
   el aire que separa un titulo del siguiente bloque. */
.detail-acciones{margin-bottom:16px;}
.sub-item{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:17px 19px;margin-bottom:12px;cursor:pointer;transition:border-color .15s;
}
.sub-item:hover{border-color:var(--border);}
.sub-item .row1{display:flex;justify-content:space-between;font-size:var(--text-small);font-weight:600;}
.sub-item .row2{font-size:var(--text-micro);color:var(--text-dim);margin-top:4px;font-family:var(--font-mono);}
.sub-detail{display:none;margin-top:15px;border-top:1px solid var(--border-soft);padding-top:15px;}
.sub-detail.show{display:block;}
.sub-detail h4{font-size:var(--text-micro);font-family:var(--font-mono);color:var(--teal);margin:0 0 8px;text-transform:uppercase;}
.empty{color:var(--text-dim);font-size:var(--text-small);padding:20px 0;}

/* ============ ficha del negocio (03) ============
   La entrada del asistente, al lado de la salida que enseña el héroe. Es una
   lista de definición de verdad: son pares dato/valor, no una tabla. */
.ficha{
  background:linear-gradient(180deg,var(--bg-card),var(--bg-elevated));
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
}
.ficha-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--border-soft);
  background:rgba(0,0,0,.18);
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.1em;
}
.ficha-tag{
  color:var(--copper);border:1px solid var(--copper-dim);background:var(--copper-soft);
  padding:3px 8px;border-radius:4px;letter-spacing:.14em;font-size:var(--text-micro);
}
.ficha-lista{margin:0;padding:var(--s2) var(--s5) var(--s5);}
.ficha-lista > div{
  display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:var(--s5);
  padding:var(--s4) 0;border-bottom:1px solid var(--border-soft);
}
.ficha-lista > div:last-child{border-bottom:0;}
.ficha-lista dt{
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.08em;
}
.ficha-lista dd{margin:0;font-size:var(--text-small);color:var(--text);line-height:1.5;}
.ficha-limite dt{color:var(--copper);}
.ficha-limite dd{color:var(--text-dim);}

/* ============ proceso (04) ============
   Una secuencia dibujada como secuencia: un riel vertical que conecta los tres
   pasos, con el número colgado del riel. Nada de tres tarjetas iguales en
   fila, que es lo que hace que un proceso parezca un catálogo. */
.pasos{list-style:none;margin:0;padding:0;position:relative;}
.pasos::before{
  content:"";position:absolute;left:23px;top:32px;bottom:32px;width:1px;
  background:linear-gradient(180deg,var(--teal-dim),var(--copper-dim));
}
.paso{
  display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:start;
  gap:var(--s5);padding:var(--s5) 0;position:relative;
}
.paso-n{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-card);border:1px solid var(--border);
  font-family:var(--font-mono);font-size:var(--text-small);color:var(--text-dim);
}
.paso:last-child .paso-n{border-color:var(--copper-dim);color:var(--copper);}
.paso-cuerpo h3{font-family:var(--font-display);font-weight:600;font-size:var(--text-h2);margin:6px 0 var(--s3);letter-spacing:-.012em;}
.paso-cuerpo p{margin:0;color:var(--text-dim);font-size:var(--text-body);max-width:58ch;}
.paso-eco{
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.12em;padding-top:18px;white-space:nowrap;
}
@media (max-width:700px){
  .paso{grid-template-columns:40px minmax(0,1fr);gap:var(--s4);}
  .pasos::before{left:19px;}
  .paso-n{width:40px;height:40px;}
  .paso-eco{grid-column:2;padding-top:0;}
}

/* ============ capacidades (05) ============
   Una lista que gobierna un panel. Se comporta como una herramienta en vez de
   como un catálogo de tarjetas, que es lo que había. */
.cap-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s6);align-items:start;}
.cap-lista{display:flex;flex-direction:column;gap:2px;}
.cap-item{
  display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  background:none;border:0;border-left:2px solid transparent;
  padding:var(--s4) var(--s4) var(--s4) var(--s5);cursor:pointer;
  color:var(--text-dim);font-family:var(--font-body);font-size:var(--text-body);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;transition:.15s var(--ease);
  min-height:48px;
}
.cap-item:hover{background:rgba(255,255,255,.03);color:var(--text);}
.cap-item.is-activa{border-left-color:var(--teal);background:var(--teal-soft);color:var(--text);}
.cap-item svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.cap-item.is-activa svg{stroke:var(--teal);}

.cap-panel{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s6);min-height:296px;
}
.cap-panel h3{font-family:var(--font-display);font-weight:600;font-size:var(--text-h2);margin:0 0 var(--s3);letter-spacing:-.012em;}
.cap-panel > p{margin:0 0 var(--s6);color:var(--text-dim);font-size:var(--text-body);max-width:52ch;}
.cap-flujo{display:flex;align-items:stretch;gap:var(--s2);flex-wrap:wrap;}
.cap-nodo{
  flex:1 1 138px;min-width:0;padding:var(--s4);border-radius:var(--radius-sm);
  border:1px solid var(--border-soft);background:var(--bg-elevated);
}
.cap-nodo b{display:block;font-size:var(--text-small);font-weight:600;margin-bottom:4px;}
.cap-nodo span{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-faint);}
.cap-nodo:last-child{border-color:var(--teal-dim);background:var(--teal-soft);}
.cap-flecha{display:flex;align-items:center;color:var(--text-faint);font-size:var(--text-small);}
.cap-conecta{
  margin:var(--s6) 0 0;padding-top:var(--s5);border-top:1px solid var(--border-soft);
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
}
.cap-conecta .cap-conecta-tit{
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.1em;margin-right:var(--s2);
}
.cap-chip{
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-dim);
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:5px 12px;
}
/* Cierra el tramo más largo de la página sin una llamada a la acción: entre
   la demostración y el precio quedaban casi 2.500 px de explicación seguidos. */
.cap-cierre{margin:var(--s6) 0 0;font-size:var(--text-body);color:var(--text-dim);max-width:66ch;}
@media (max-width:860px){.cap-grid{grid-template-columns:1fr;gap:var(--s5);}}

/* ============ modelo y precio (06) ============ */
.modelo{border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);}
.modelo-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center;}
.modelo-lead{color:var(--text-dim);font-size:var(--text-h3);line-height:1.55;margin:0 0 var(--s6);max-width:48ch;}
.modelo-puntos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s5);}
.modelo-puntos li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s4);align-items:start;}
.modelo-puntos svg{width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--copper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.modelo-puntos b{font-weight:600;color:var(--text);}
.modelo-puntos span{color:var(--text-dim);font-size:var(--text-small);line-height:1.6;}

/* La caja del precio es LO ÚNICO levantado de esta sección. Si todo llevara
   borde y sombra, el precio no destacaría — que es justo el problema que tenía
   la página: profundidad repartida por igual no señala nada. */
.precio-columna{display:flex;flex-direction:column;gap:var(--s4);}
.precio-caja{
  background:linear-gradient(180deg,var(--bg-card),var(--bg-elevated));
  border:1px solid var(--copper-dim);border-radius:var(--radius-lg);
  padding:var(--s6);box-shadow:var(--shadow-glow-copper);
}
/* La segunda caja va deliberadamente más apagada: sin resplandor, sin borde de
   acento y con la cifra en gris. Si las dos pesaran igual, el visitante
   tendría que decidir antes de entender, y la del chatbot es la única que
   puede cerrarse hoy mismo. */
.precio-caja-medida{
  background:none;border-color:var(--border);box-shadow:none;
  padding:var(--s5) var(--s6);
}
.precio-caja-medida .precio-cifra{font-size:var(--text-h2);color:var(--text-dim);}
.precio-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s4);
}
.precio-tag{
  color:var(--copper);border:1px solid var(--copper-dim);background:var(--copper-soft);
  padding:3px 8px;border-radius:4px;font-size:var(--text-micro);letter-spacing:.14em;white-space:nowrap;
}
.precio-monto{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;}
.precio-cifra{
  font-family:var(--font-display);font-weight:700;font-size:var(--text-h1);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;
}
.precio-antes{
  font-family:var(--font-mono);font-size:var(--text-body);color:var(--text-faint);
  text-decoration:line-through;
}
.precio-nota{margin:var(--s4) 0 0;color:var(--text-dim);font-size:var(--text-small);}
.precio-detalle{list-style:none;margin:var(--s5) 0;padding:var(--s5) 0 0;border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:var(--s3);}
.precio-detalle li{display:flex;justify-content:space-between;gap:var(--s4);font-size:var(--text-small);color:var(--text-dim);}
.precio-detalle li b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;}
.precio-pie{margin:var(--s4) 0 0;text-align:center;font-size:var(--text-micro);color:var(--text-faint);}
@media (max-width:860px){.modelo-grid{grid-template-columns:1fr;gap:var(--s7);}}

/* ============ confianza (09) ============
   Sin tarjetas: reglas finas y espacio. Seis afirmaciones comprobables pesan
   más si no están metidas en cajas con sombra, que es el lenguaje de la
   publicidad. */
.conf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:0 var(--s7);border-top:1px solid var(--border-soft);}
.conf-item{padding:var(--s6) 0;border-bottom:1px solid var(--border-soft);}
.conf-item h3{font-family:var(--font-display);font-weight:600;font-size:var(--text-h3);margin:0 0 var(--s3);letter-spacing:-.008em;line-height:1.3;}
.conf-item p{margin:0;color:var(--text-dim);font-size:var(--text-small);line-height:1.65;max-width:46ch;}

/* ============ cierre (11) ============ */
.cierre{text-align:center;}
.cierre-titulo{max-width:22ch;margin:0 auto var(--s4);}
.cierre-sub{color:var(--text-dim);font-size:var(--text-h3);max-width:48ch;margin:0 auto var(--s7);}
.cierre-cta{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;}
.cierre-nota{margin:var(--s6) 0 0;font-size:var(--text-small);color:var(--text-dim);}

/* Entrada de la sección de ejemplos: invita a abrir uno, no advierte. Por eso
   NO lleva el tratamiento de aviso (borde y fondo cobre) que sí llevan las
   notas de "ojo con esto" del resto de la página — ese lenguaje visual está
   reservado para lo que frena al lector, y esto lo empuja.
   La aclaración de que ningún ejemplo es un cliente real sigue estando, al
   cierre de la sección, en .casos-nota. */


/* Apunta a la rejilla, así que sale del .section-head y va a todo el ancho.
   La flecha es el único adorno: señala hacia abajo porque las tarjetas están
   justo debajo. */
.ejemplos-gancho{
  margin:var(--s4) 0 var(--s5);font-size:var(--text-body);
  color:var(--copper);line-height:var(--lh-body);max-width:52ch;
}
.gancho-flecha{color:var(--copper);font-family:var(--font-mono);margin-right:var(--s2);}
.ejemplos-gancho b{color:var(--text);font-weight:600;}

/* ============ kanban del panel interno (solicitudes) ============ */
/* Grid en vez de flex con ancho fijo: en el modal a pantalla completa las 5
   columnas se reparten el ancho disponible (minmax hace de piso), así se ven
   más columnas a la vez en vez de forzar scroll horizontal todo el tiempo.
   Si la ventana es angosta, el grid no puede achicar más allá del piso y el
   contenedor scrollea horizontal — mismo resultado que antes en mobile, sin
   necesitar una media query aparte. */
.kanban-board{display:grid;grid-template-columns:repeat(6, minmax(220px, 1fr));gap:16px;overflow-x:auto;padding:2px 2px 12px;}
.kanban-column{
  min-width:0;background:var(--bg-card);border:1px solid var(--border-soft);
  border-top:3px solid var(--border);border-radius:var(--radius-lg);padding:14px;
}
.kanban-column.status-abandonado{border-top-color:var(--text-faint);}
.kanban-column.status-nuevo{border-top-color:var(--teal);}
.kanban-column.status-contactado{border-top-color:var(--amber);}
.kanban-column.status-cotizado{border-top-color:var(--violet);}
.kanban-column.status-ganado{border-top-color:var(--green);}
.kanban-column.status-perdido{border-top-color:var(--text-dim);}
.kanban-col-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:13px;padding-bottom:11px;border-bottom:1px solid var(--border-soft);
}
.kanban-col-title{font-family:var(--font-display);font-weight:600;font-size:13.5px;}
.kanban-col-count{
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
  background:var(--bg-elevated);border-radius:var(--radius-pill);padding:2px 9px;
}
.kanban-col-body{display:flex;flex-direction:column;gap:10px;}
.kanban-card{
  background:var(--bg-elevated);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:13px 14px;transition:border-color .15s;
}
.kanban-card:hover{border-color:var(--border);}
.kanban-card-summary{cursor:pointer;}
.kanban-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;}
.kanban-card-name{font-weight:600;font-size:13.5px;line-height:1.3;}
.kanban-card-meta{font-size:11.5px;color:var(--text-dim);font-family:var(--font-mono);margin-bottom:8px;}
.kanban-card-pain{
  font-size:12px;color:var(--text-dim);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}

/* ============ resumen del tablero ============
   Tira de métricas arriba del kanban: lo importante (cuántos hay, cuáles se
   están enfriando, cuánto se cierra) tiene que leerse sin contar tarjetas.
   Se recalcula sobre el servicio activo, no sobre el total. */
.dash{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px;}
@media (max-width:1000px){.dash{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.dash{grid-template-columns:1fr;}}
.dash-tile{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-height:112px;
}
.dash-label{
  font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--text-faint);
}
.dash-value{font-family:var(--font-display);font-weight:700;font-size:27px;line-height:1;font-variant-numeric:tabular-nums;}
.dash-value.is-warn{color:var(--amber);}
.dash-value.is-good{color:var(--green);}
.dash-hint{font-size:11.5px;color:var(--text-dim);line-height:1.45;margin-top:auto;}

/* mini barras de estado dentro del primer tile */
.dash-bars{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
.dash-bar-row{display:flex;align-items:center;gap:8px;font-size:11.5px;}
.dash-bar-name{color:var(--text-dim);width:74px;flex-shrink:0;}
.dash-bar-track{flex:1;height:5px;border-radius:3px;background:var(--border-soft);overflow:hidden;}
.dash-bar-fill{height:100%;border-radius:3px;background:var(--accent, var(--teal));}
.dash-bar-num{font-family:var(--font-mono);color:var(--text-dim);width:18px;text-align:right;font-variant-numeric:tabular-nums;}

.dash-recent{display:flex;flex-direction:column;gap:7px;}
.dash-recent-row{display:flex;align-items:baseline;gap:8px;font-size:11.5px;}
.dash-recent-name{color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-recent-when{font-family:var(--font-mono);color:var(--text-faint);flex-shrink:0;font-size:10.5px;}

/* ============ detalle de solicitud (pantalla completa) ============
   Antes era un panel lateral angosto. Ahora el tablero se aparta y el
   detalle ocupa todo el ancho del panel, que es lo único que da espacio
   para acomodar el brief en dos columnas sin apretar el texto. */
.detail-back{padding:9px 18px;font-size:12.5px;margin-bottom:22px;}
.detail-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--border-soft);
}
.detail-business-name{font-family:var(--font-display);font-weight:500;font-size:27px;margin:0 0 12px;}
.detail-meta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.detail-meta-item{font-size:12.5px;color:var(--text-dim);font-family:var(--font-mono);}
.detail-status-field{margin-bottom:0;min-width:210px;}

.detail-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:start;}
@media (max-width:900px){.detail-cols{grid-template-columns:1fr;gap:0;}}

/* cotización ya enviada — se muestra en vez del formulario para no
   reenviarla sin querer; el formulario queda detrás de un botón */
.quote-sent{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:14px;
}
.quote-sent-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--border-soft);
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;
}
.quote-sent-head b{font-family:var(--font-display);font-size:17px;color:var(--copper);text-transform:none;letter-spacing:0;}
.quote-sent-line{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:4px 0;}
.quote-sent-line span:first-child{color:var(--text-dim);}
.quote-sent-line span:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.quote-sent-notes{font-size:12px;color:var(--text-dim);line-height:1.55;margin:11px 0 0;padding-top:11px;border-top:1px solid var(--border-soft);}

.detail-section{margin-bottom:30px;}
.detail-section-title{
  font-family:var(--font-mono);font-size:11.5px;color:var(--teal);text-transform:uppercase;
  letter-spacing:.6px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--border-soft);
}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px 28px;}
@media (max-width:560px){.detail-grid{grid-template-columns:1fr;}}
.detail-item{display:flex;flex-direction:column;gap:4px;margin-top:16px;}
.detail-grid .detail-item{margin-top:0;}
.detail-item-full{grid-column:1/-1;}
.detail-label{font-size:11px;font-family:var(--font-mono);color:var(--text-faint);text-transform:uppercase;letter-spacing:.4px;}
.detail-value{font-size:14px;color:var(--text);line-height:1.5;white-space:pre-wrap;}

.detail-need-block{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:14px;
}
.detail-need-block:last-child{margin-bottom:0;}
.detail-empty-note{font-size:13px;color:var(--text-faint);font-style:italic;margin:0;}
.section-note{font-size:12.5px;color:var(--text-dim);line-height:1.5;margin:-6px 0 14px;}

/* ============ gestión: próxima acción, alcance, fase, entregables ============
   Lo que escribe el equipo sobre una solicitud, a diferencia del brief que
   llenó el cliente (que es de solo lectura). */
.next-action-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.next-action-row input[type=text]{flex:1;min-width:200px;}
.next-action-row input[type=date]{
  width:auto;background:var(--bg-card);border:1px solid var(--border);color:var(--text);
  padding:11px 13px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;
  color-scheme:dark;
}
.next-action-row .btn{padding:11px 20px;font-size:13px;}
.next-action .hint{margin-top:9px;}

.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:520px){.scope-grid{grid-template-columns:1fr;}}
.scope-check{
  display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-dim);
  cursor:pointer;margin:0 0 16px;
}
.scope-check input{width:15px;height:15px;accent-color:var(--copper);cursor:pointer;}

.phase-picker{display:flex;flex-wrap:wrap;gap:8px;}
.phase-step{
  background:none;border:1px solid var(--border);border-radius:var(--radius-pill);
  color:var(--text-dim);font-family:var(--font-body);font-size:12.5px;font-weight:500;
  padding:8px 15px;cursor:pointer;transition:.15s var(--ease);
}
.phase-step:hover{color:var(--text);border-color:var(--copper-dim);}
.phase-step.active{color:var(--copper);border-color:var(--copper);background:var(--copper-soft);}

.deliv-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border-soft);font-size:13.5px;
}
.deliv-row:last-child{border-bottom:none;}
.deliv-row a{color:var(--teal);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.deliv-row a:hover{text-decoration:underline;}
.deliv-del{
  background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:13px;
  padding:2px 6px;flex-shrink:0;transition:color .15s;
}
.deliv-del:hover{color:var(--danger);}
.deliv-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.deliv-add input{
  flex:1;min-width:150px;background:var(--bg-card);border:1px solid var(--border);color:var(--text);
  padding:10px 12px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13.5px;
}
.deliv-add input:focus{outline:none;border-color:var(--teal);}
.deliv-add .btn{padding:10px 18px;font-size:13px;}

/* ============ código de color por servicio ============
   Turquesa = chatbot, cobre = auditoría, en todo el panel. El acento se fija
   una vez en el contenedor de la pestaña (applyServiceAccent en app.js) y
   estas reglas lo consumen con var(--accent), así nada queda desincronizado.

   Los colores de estado del kanban (nuevo, cotizado, ganado...) se quedan
   como están a propósito: codifican otra cosa —en qué etapa va— y viven en
   el borde superior de la columna, no en las tarjetas. */

/* La franja izquierda de cada tarjeta es la señal más directa de a qué
   servicio pertenece, y no compite con el color de estado de la columna. */
#viewSubmissions .kanban-card{
  border-left:3px solid var(--accent, var(--teal));
}
#viewSubmissionDetail .detail-section-title{color:var(--accent, var(--teal));}
#viewSubmissionDetail .detail-business-name{
  padding-left:14px;border-left:3px solid var(--accent, var(--teal));
}
#viewSubmissions .dash-label{color:var(--accent, var(--teal));opacity:.75;}

/* ============ módulo de bots ============
   La configuración de cada bot de cliente y su estado de despliegue.
   Siempre turquesa: un bot es siempre del servicio de chatbot. */
#viewBots, #viewBotDetail{--accent:var(--teal);--accent-dim:var(--teal-dim);--accent-soft:var(--teal-soft);}
#viewBotDetail .detail-section-title{color:var(--accent);}
#viewBotDetail .detail-business-name{padding-left:14px;border-left:3px solid var(--accent);}
.bots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}
.bot-card{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:18px 20px;cursor:pointer;
  transition:transform .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.bot-card{border-left:3px solid var(--accent, var(--teal));}
.bot-card:hover{transform:translateY(-3px);border-color:var(--teal-dim);box-shadow:var(--shadow-glow-teal);}
.bot-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
.bot-card-name{font-family:var(--font-display);font-weight:600;font-size:15.5px;}
.bot-card-meta{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);margin-bottom:7px;}
.bot-card-hint{font-size:12.5px;color:var(--text-dim);line-height:1.45;}

.bot-state{
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap;flex-shrink:0;
}
.bot-state-borrador{color:var(--text-dim);border:1px solid var(--border);}
.bot-state-listo{color:var(--amber);border:1px solid var(--amber-dim);background:var(--amber-soft);}
.bot-state-desplegado{color:var(--green);border:1px solid var(--green-dim);background:var(--green-soft);}
.bot-state-pausado{color:var(--copper);border:1px solid var(--copper-dim);background:var(--copper-soft);}

.bot-fill{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:22px;
}
.bot-fill textarea{
  width:100%;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);
  padding:11px 13px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13.5px;
  resize:vertical;margin-bottom:10px;
}
.bot-fill textarea:focus{outline:none;border-color:var(--teal);}
.bot-fill .btn{padding:9px 16px;font-size:12.5px;}
.bot-fill .hint{display:inline-block;margin-left:10px;}
.hint-inline{color:var(--text-faint);font-weight:400;}
.bot-delete{color:var(--danger);border-color:var(--danger-dim);}
.bot-delete:hover{background:rgba(226,102,90,.08);border-color:var(--danger);color:var(--danger);}

/* archivos del paquete de despliegue */
.pkg-file{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  margin-bottom:14px;overflow:hidden;
}
.pkg-file-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--border-soft);
}
.pkg-file-name{font-family:var(--font-mono);font-size:12px;color:var(--teal);}
.pkg-copy{padding:6px 13px;font-size:11.5px;}
.pkg-file-body{
  margin:0;padding:16px;font-family:var(--font-mono);font-size:11.5px;line-height:1.6;
  color:var(--text-dim);white-space:pre-wrap;word-break:break-word;
  max-height:340px;overflow-y:auto;
}

/* previsualización de la cotización — el HTML lo devuelve el servidor con la
   misma función que arma el PDF, y va en un iframe para que su hoja de
   estilos completa no se mezcle con la del panel */
.quote-actions{display:flex;gap:10px;flex-wrap:wrap;}
.quote-actions .btn{padding:12px 22px;font-size:13.5px;}

.quote-preview-overlay{
  display:none;position:fixed;inset:0;z-index:300;
  background:rgba(6,4,2,.82);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:28px 20px;
}
.quote-preview-overlay.open{display:flex;}
.quote-preview{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);
  width:100%;max-width:820px;
  /* altura explícita, no height:100%+max-height: dentro de un flex con
     align-items:center el 100% no resuelve y el iframe colapsaba a ~150px */
  height:min(92vh, 1000px);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-modal);
}
.quote-preview-head{
  flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 24px;border-bottom:1px solid var(--border-soft);
}
.quote-preview-head h3{font-family:var(--font-display);font-weight:500;font-size:17px;margin:0 0 4px;}
.quote-preview-sub{font-size:12.5px;color:var(--text-dim);font-family:var(--font-mono);}
.quote-preview-sub b{color:var(--copper);}
.quote-preview iframe{flex:1;width:100%;border:none;background:#15100C;}
.quote-preview-wide{max-width:1120px;}
.quote-preview-body{flex:1;overflow-y:auto;padding:24px 26px 30px;}

/* ============ mapa del proceso actual ============
   El SVG lo arma renderProcessMapSvg() en app.js a partir de la estructura
   que devuelve Claude — acá van solo los estilos de las formas. */
.pm-trigger{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  padding:10px 18px;font-size:13px;
}
.pm-trigger svg{
  width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

.pm-draft{
  border-left:3px solid var(--amber);background:rgba(214,162,76,.08);
  padding:13px 17px;margin-bottom:22px;font-size:13px;color:var(--text-dim);line-height:1.55;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.pm-draft > span{flex:1;min-width:260px;}
.pm-draft-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.pm-when{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);white-space:nowrap;}
.pm-regen{padding:7px 14px;font-size:12px;}
.pm-saved{
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);
  margin-left:12px;white-space:nowrap;
}
.pm-canvas{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:18px;overflow-x:auto;
}
.pm-canvas svg{display:block;height:auto;}

.pm-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;}
@media (max-width:760px){.pm-cols{grid-template-columns:1fr;}}
.pm-block{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:18px 20px;
}
.pm-block-warn{border-color:var(--amber-dim);}
.pm-block h4{
  font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--teal);margin:0 0 12px;
}
.pm-block-warn h4{color:var(--amber);}
.pm-block ul{margin:0;padding-left:18px;}
.pm-block li{font-size:13px;color:var(--text-dim);line-height:1.55;margin-bottom:8px;}
.pm-block li:last-child{margin-bottom:0;}

.pm-band{fill:var(--bg-elevated);}
.pm-band-alt{fill:rgba(255,255,255,.014);}
.pm-lane-line{stroke:var(--border-soft);stroke-width:1;}
.pm-lane{
  font-family:var(--font-mono);font-size:9.5px;fill:var(--text-dim);letter-spacing:.5px;
}
.pm-task{fill:var(--bg-card);stroke:var(--border);stroke-width:1.2;}
.pm-task-hot{fill:rgba(214,138,76,.1);stroke:var(--copper-dim);stroke-width:1.4;}
.pm-task-label{font-family:var(--font-body);font-size:10.5px;fill:var(--text);}
.pm-note{font-family:var(--font-mono);font-size:8.5px;fill:var(--text-faint);}
.pm-outside{font-family:var(--font-body);font-size:10px;fill:var(--text-dim);}
.pm-ev{fill:none;stroke:var(--teal);stroke-width:1.8;}
.pm-ev-end{fill:none;stroke:var(--green);stroke-width:2.6;}
.pm-gw{fill:var(--bg-card);stroke:var(--copper-dim);stroke-width:1.3;}
.pm-flow{stroke:var(--text-faint);stroke-width:1.3;fill:none;}
.pm-flow-hot{stroke:var(--copper);stroke-width:1.5;fill:none;}

/* plantillas de cotización */
.quote-templates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.quote-templates-label{
  font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--text-faint);margin-right:2px;
}
.quote-tpl{
  background:none;border:1px solid var(--border);border-radius:var(--radius-pill);
  color:var(--text-dim);font-family:var(--font-body);font-size:12.5px;font-weight:500;
  padding:7px 15px;cursor:pointer;transition:.15s var(--ease);
}
.quote-tpl:hover{color:var(--copper);border-color:var(--copper-dim);background:var(--copper-soft);}

/* próxima acción en la tarjeta del kanban */
.kanban-card-next{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--border-soft);
  font-size:11.5px;
}
.kanban-card-next-what{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kanban-card-next-when{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);flex-shrink:0;}
.kanban-card-next.is-overdue .kanban-card-next-what{color:var(--amber);}
.kanban-card-next.is-overdue .kanban-card-next-when{color:var(--amber);}

/* toggle embudo / entrega dentro de Auditorías */
.board-toggle{display:flex;gap:8px;margin-bottom:18px;}
.board-toggle-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:1px solid var(--border);border-radius:var(--radius-pill);
  color:var(--text-dim);font-family:var(--font-body);font-size:13px;font-weight:500;
  padding:8px 16px;cursor:pointer;transition:.15s var(--ease);
}
.board-toggle-btn:hover{color:var(--text);border-color:var(--copper-dim);}
.board-toggle-btn.active{color:var(--copper);border-color:var(--copper-dim);background:var(--copper-soft);}
.board-toggle-count{
  font-family:var(--font-mono);font-size:10.5px;padding:1px 6px;border-radius:var(--radius-pill);
  background:var(--border-soft);
}

/* columnas del tablero de entrega */
.kanban-column.phase-bpmn{border-top-color:var(--teal);}
.kanban-column.phase-oportunidades{border-top-color:var(--amber);}
.kanban-column.phase-vulnerabilidades{border-top-color:var(--danger);}
.kanban-column.phase-roadmap{border-top-color:var(--copper);}
.kanban-column.phase-entregado{border-top-color:var(--green);}
.detail-need-title{font-family:var(--font-display);font-weight:500;font-size:14.5px;margin-bottom:14px;}

.detail-accordion{border:1px solid var(--border-soft);border-radius:var(--radius-sm);margin-top:14px;overflow:hidden;}
.detail-accordion summary{
  cursor:pointer;padding:13px 16px;font-family:var(--font-mono);font-size:11.5px;color:var(--teal);
  text-transform:uppercase;letter-spacing:.5px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;background:var(--bg-card);
}
.detail-accordion summary::-webkit-details-marker{display:none;}
.detail-accordion summary::after{content:'+';font-size:15px;color:var(--text-dim);}
.detail-accordion[open] summary::after{content:'−';}
.detail-accordion .blueprint{border:none;border-radius:0;border-top:1px solid var(--border-soft);max-height:280px;}

.pkg-badge{
  font-family:var(--font-mono);font-size:10.5px;padding:3px 9px;border-radius:var(--radius-pill);
  border:1px solid var(--border);color:var(--text-dim);white-space:nowrap;flex-shrink:0;
}
/* Los dos servicios vivos, con el mismo color en todo el panel.
   La auditoría estaba en violeta mientras su sub-pestaña era cobre: eran dos
   códigos de color distintos para la misma cosa. */
.pkg-badge-chatbot{border-color:var(--teal-dim);color:var(--teal);background:var(--teal-soft);}
.pkg-badge-auditoria{border-color:var(--copper-dim);color:var(--copper);background:var(--copper-soft);}
.pkg-badge-implementacion{border-color:var(--violet-dim);color:var(--violet);background:var(--violet-soft);}

/* Paquetes viejos que ya no se venden; se quedan para las solicitudes
   históricas y en violeta a propósito, para no confundirlos con los dos
   servicios actuales. */
.pkg-badge-esencial,
.pkg-badge-intermedio,
.pkg-badge-avanzado{border-color:var(--violet-dim);color:var(--violet);background:var(--violet-soft);}

.gen-prompt-output{
  font-family:var(--font-mono);font-size:12.5px;line-height:1.6;resize:vertical;
  background:var(--bg-card);cursor:text;
}

/* ============ generador de bots (tab Automatizaciones) ============
   Cuadro más ancho y con más aire que un .field suelto — dos sub-tabs
   (Personalizada/Simplificada) adentro, mismo lenguaje visual que el resto
   del panel (bg-card, border, teal/amber en vez del copper que usa
   .pkg-opt en el formulario público). */
.gen-panel{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  padding:32px 36px;margin-top:8px;
}
.gen-mode-select{margin-bottom:26px;max-width:360px;}
.gen-mode-select .pkg-opt.active{border-color:var(--teal);color:var(--teal);background:var(--teal-soft);}
.gen-mode-pane .step-nav{margin-top:22px;}
#generatorOutput{margin-top:28px;padding-top:28px;border-top:1px solid var(--border-soft);}
/* ============ preguntas frecuentes ============
   <details> nativo: abre y cierra sin JavaScript y el teclado ya funciona.
   Se le quita el triangulito del navegador y se pone un signo propio que gira,
   porque el nativo no se puede alinear ni pintar de forma consistente. */

.faq-list{display:flex;flex-direction:column;gap:8px;}

.faq-item{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.faq-item:hover{border-color:var(--border);}
.faq-item[open]{border-color:var(--teal-dim);background:var(--bg-elevated);}

.faq-item summary{
  display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding:17px 20px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:var(--text-body);font-weight:500;color:var(--text);
  transition:color .18s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--teal);}
.faq-item summary:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:var(--radius);}

/* El signo: + que gira hasta volverse × al abrir. */
.faq-item summary:after{
  content:"";flex-shrink:0;width:13px;height:13px;position:relative;
  background:
    linear-gradient(var(--teal),var(--teal)) center/13px 1.5px no-repeat,
    linear-gradient(var(--teal),var(--teal)) center/1.5px 13px no-repeat;
  transition:transform .28s var(--ease);
}
.faq-item[open] summary:after{transform:rotate(135deg);}

.faq-body{padding:0 20px 19px;max-width:76ch;}
.faq-body p{margin:0 0 11px;font-size:var(--text-small);line-height:1.65;color:var(--text-dim);}
.faq-body p:last-child{margin-bottom:0;}
.faq-body b{color:var(--text);font-weight:600;}
.faq-body a{color:var(--teal);}

/* La respuesta se desliza al abrir. Solo la animación de entrada: cerrar de
   golpe es lo que hace el navegador y pelearse con eso trae más problemas
   (contenido que salta) que beneficio. */
@keyframes faq-abre{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.faq-item[open] .faq-body{animation:faq-abre .26s var(--ease);}

.faq-cierre{margin:26px 0 0;font-size:var(--text-small);color:var(--text-dim);}
/* Botón que se lee como enlace: la acción abre un modal, no navega. */
.link-btn{
  background:none;border:none;padding:0;font:inherit;color:var(--teal);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.link-btn:hover{color:var(--text);}

@media (prefers-reduced-motion:reduce){
  .faq-item[open] .faq-body{animation:none;}
  .faq-item summary:after{transition:none;}
}

/* ============ pie ============ */
.footer-grid{
  display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;
}
.footer-legal{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.footer-legal a{color:var(--text-dim);text-decoration:none;transition:color .15s var(--ease);}
.footer-legal a:hover{color:var(--teal);}
.footer-copy{color:var(--text-faint);}

/* ============ páginas legales ============
   Privacidad y términos comparten esta hoja con la landing: heredan colores,
   tipografías y radios sin duplicar nada. Solo agregan el ritmo de lectura
   largo, que la landing no necesita. */
.legal{padding:64px 0 96px;}
.legal .wrap{max-width:760px;}
.legal-volver{
  display:inline-block;margin-bottom:34px;font-family:var(--font-mono);font-size:var(--text-micro);
  color:var(--text-dim);text-decoration:none;transition:color .15s var(--ease);
}
.legal-volver:hover{color:var(--teal);}
.legal h1{
  font-family:var(--font-display);font-weight:500;font-size:clamp(28px,4vw,38px);
  letter-spacing:-.4px;margin:12px 0 10px;
}
.legal-fecha{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-faint);margin:0 0 32px;}
.legal h2{
  font-family:var(--font-display);font-weight:500;font-size:var(--text-h3);letter-spacing:-.2px;
  margin:38px 0 12px;padding-top:20px;border-top:1px solid var(--border-soft);
}
.legal h3{font-family:var(--font-display);font-weight:500;font-size:var(--text-small);margin:22px 0 8px;color:var(--text);}
.legal p{font-size:var(--text-small);line-height:1.75;color:var(--text-dim);margin:0 0 13px;}
.legal ul{margin:0 0 13px;padding-left:20px;}
.legal li{font-size:var(--text-small);line-height:1.7;color:var(--text-dim);margin-bottom:8px;}
.legal b{color:var(--text);font-weight:600;}
.legal em{color:var(--text);font-style:italic;}
.legal a{color:var(--teal);}
.legal code{
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--amber);
  background:var(--amber-soft);border-radius:4px;padding:1px 6px;
}
/* Aviso de borrador: tiene que verse antes de que alguien publique la página
   creyendo que ya está lista. */
.legal-aviso{
  border-left:2px solid var(--amber);background:var(--amber-soft);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:14px 18px;margin:0 0 30px;
}
.legal-aviso p{margin:0 0 8px;color:var(--text-dim);font-size:var(--text-small);}
.legal-aviso p:last-child{margin-bottom:0;}
/* Un dato que falta tiene que leerse como un hueco, no como un dato. Antes
   eran [COMPLETAR: razón social] en negrita, del mismo color que el resto:
   a media pantalla de distancia parecía texto normal. */
.legal-falta{
  font-family:var(--font-mono);font-size:0.86em;color:var(--amber);
  background:var(--amber-soft);border:1px dashed var(--amber-dim);
  border-radius:3px;padding:1px 6px;white-space:nowrap;
}
/* Aviso de privacidad en el paso donde se piden los datos personales. La ley
   29733 pide consentimiento previo e informado; sin un enlace acá, el
   formulario recogía datos sin decir a qué política remitía. */
.paso-legal{
  margin:14px 0 0;font-size:var(--text-micro);line-height:1.55;color:var(--text-dim);
}
.paso-legal a{color:var(--teal);text-underline-offset:2px;}
.legal-pie{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--border-soft);
  font-size:var(--text-small);
}

footer{border-top:1px solid var(--border-soft);padding:34px 0;color:var(--text-dim);font-size:var(--text-micro);font-family:var(--font-mono);}

.contact-success{text-align:center;padding:24px 0 4px;}
.contact-success-icon{
  width:40px;height:40px;margin:0 auto 16px;display:block;
  fill:none;stroke:var(--teal);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.contact-success p{font-size:var(--text-small);color:var(--text);margin:0 0 22px;line-height:1.55;}


/* ============ móvil ============
   La página no se diseña en escritorio y se encoge. En un teléfono todo se
   apila, así que lo que en 1440 son dos columnas acá son dos alturas sumadas,
   y doce secciones seguidas se vuelven veinte pantallas de desplazamiento.

   Lo que se aprieta acá es el AIRE y la densidad de los bloques repetidos, no
   el tamaño del texto: achicar la letra en el sitio donde se lee peor sería
   arreglar el síntoma equivocado. */
@media (max-width:640px){
  :root{
    /* Un teléfono no necesita 100 px de respiro entre secciones para entender
       que cambió de tema: el borde de la pantalla ya lo dice. */
    --sec-hero:56px;
    --sec-clave:56px;
    --sec-base:40px;
  }

  .section-head{margin-bottom:var(--s6);}

  /* Los blancos de toque de 44 px son para lo que se pulsa con el pulgar. Los
     enlaces dentro de un párrafo son otra cosa —van en línea con el texto— y
     estirarlos rompe el interlineado. Lo que sí necesitan es separación. */
  .footer-legal{display:flex;flex-direction:column;gap:var(--s2);}
  .footer-legal a{padding:var(--s2) 0;display:inline-block;}

  /* Las llamadas a la acción ocupan el ancho: dos botones de media pantalla
     dejan a los dos incómodos. */
  .hero-cta .btn,.cierre-cta .btn{flex:1 1 100%;}

  /* La lista del problema pierde la columna de la hora, que en 375 px empuja
     todo el texto contra el borde derecho. */
  .prob-lista li{padding:var(--s4) 0;}
  .prob-cierre{margin-top:var(--s6);font-size:var(--text-h3);}

  /* Los ejemplos son la sección más alta del móvil: cinco tarjetas apiladas.
     Se aprietan sin quitar ninguna — cada una sigue contando qué pedían y qué
     apareció, que es todo el valor que tienen. */
  .casos-grid{gap:var(--s3);}
  .caso-card{padding:var(--s5);}
  .caso-card h3{margin-bottom:var(--s2);}

  /* Confianza: seis afirmaciones, una debajo de otra. */
  .conf-item{padding:var(--s5) 0;}

  /* La ficha y el panel de capacidades ganan alto solo por su relleno. */
  .ficha-lista{padding:0 var(--s4) var(--s4);}
  .ficha-lista > div{grid-template-columns:1fr;gap:var(--s1);padding:var(--s3) 0;}
  .cap-panel{padding:var(--s5);min-height:0;}
  .precio-caja{padding:var(--s5);}

  /* Los pasos del proceso: el eco ("tú", "juntos", "nosotros") pasa a la
     misma línea del número en vez de ocupar una fila propia. */
  .paso{padding:var(--s4) 0;}
  .paso-cuerpo p{font-size:var(--text-small);}

  /* Los nodos del flujo se apilan, asi que la flecha tiene que apuntar hacia
     abajo: apuntando a la derecha señalaba el borde de la pantalla. */
  .cap-flujo{flex-direction:column;}
  .cap-flecha{justify-content:center;transform:rotate(90deg);}
}

/* Entre tablet y escritorio el héroe ya se apiló (960 px), pero las rejillas
   de dos columnas de las secciones siguen apretadas hasta bastante después. */
@media (max-width:900px){
  .svc-top{gap:var(--s6);}
  .an-grid{gap:var(--s6);}
}

/* ============ la flota ============
   Cada fila es un bot desplegado y su último latido. El color de la barra
   izquierda es el estado: quien está peor va arriba, así que lo primero que se
   ve al abrir es a quién hay que llamar. */
.flota-resumen{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.flota-chip{font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-dim)}
.flota-chip.flota-callado{color:var(--danger);border-color:var(--danger)}
.flota-chip.flota-mal{color:var(--danger);border-color:var(--danger)}
.flota-chip.flota-aviso{color:var(--amber);border-color:var(--amber-dim)}
.flota-chip.flota-bien{color:var(--green);border-color:var(--green-dim)}

.flota-fila{background:var(--bg-card);border:1px solid var(--border-soft);
  border-left:4px solid var(--border);border-radius:var(--radius-lg);
  padding:15px 18px;margin-bottom:10px}
.flota-fila.flota-callado{border-left-color:var(--danger)}
.flota-fila.flota-mal{border-left-color:var(--danger)}
.flota-fila.flota-aviso{border-left-color:var(--amber)}
.flota-fila.flota-bien{border-left-color:var(--green)}
.flota-fila.flota-nuevo{border-left-color:var(--border)}

.flota-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.flota-cab b{font-size:15px;color:var(--text)}
.flota-estado{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.flota-callado .flota-estado,.flota-mal .flota-estado{color:var(--danger)}
.flota-aviso .flota-estado{color:var(--amber)}
.flota-bien .flota-estado{color:var(--green)}
.flota-nuevo .flota-estado{color:var(--text-faint)}
.flota-cuando{margin-left:auto;font-size:12px;color:var(--text-dim);
  font-variant-numeric:tabular-nums}

/* La línea que dice qué hacer. Es la razón de esta pantalla: un tablero que
   informa y no dice qué hacer obliga a pensarlo cada vez. */
.flota-accion{margin:9px 0 0;font-size:13.5px;color:var(--text);line-height:1.5}

.flota-datos{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--border-soft);
  font-size:12px;color:var(--text-dim)}
.flota-datos b{color:var(--text);font-weight:600}
.flota-etapa{margin-left:auto;color:var(--text-faint);text-transform:uppercase;
  letter-spacing:.05em;font-size:10.5px;align-self:center}

/* El contador de la sub-pestaña. Rojo solo cuando hay algo que atender: si
   estuviera siempre encendido dejaría de significar nada. */
.admin-subtab-count.flota-alerta{background:var(--danger);color:#fff;border-color:var(--danger)}

@media(max-width:640px){
  .flota-cuando{margin-left:0;flex-basis:100%}
  .flota-etapa{margin-left:0}
}

/* El token de latido, que se ve una sola vez. Ancho completo y monoespaciado
   para que se pueda comprobar de un vistazo que se copió entero. */
.token-latido{width:100%;margin:8px 0;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;word-break:break-all;background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:8px;padding:8px;color:var(--text)}

/* La marca de "alguien está intentando entrar a su panel".
   Va al lado del nombre y NO en el semáforo: el bot está sano —nadie lo ha
   roto— pero es lo único de la salud de un cliente que es asunto de la
   agencia. Un carro que anda bien con alguien forcejeando la cerradura. */
.flota-asedio{font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;
  color:var(--danger);border:1px solid var(--danger);
  background:rgba(226,102,90,.12);white-space:nowrap;cursor:help}

/* El enlace para volver a tu demo. Es un input y no un párrafo a propósito:
   si el portapapeles falla —sin https, o sin permiso— se puede seleccionar y
   copiar a mano, que es lo único que no puede fallar. */
.volver-caja{display:flex;gap:8px;align-items:center;margin:10px 0 6px}
.volver-caja input{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12.5px;padding:10px 12px;border:1px solid var(--border);
  border-radius:10px;background:var(--bg-elevated);color:var(--text)}
.volver-caja input:focus{outline:2px solid var(--teal);outline-offset:1px}
.volver-caja .btn{flex:none}
@media(max-width:560px){
  .volver-caja{flex-wrap:wrap}
  .volver-caja .btn{width:100%}
}

/* ============================================================================
   PANEL INTERNO · CAPA DE PRESENTACION
   ============================================================================

   Todo lo de aqui abajo es apariencia y nada mas: ni un selector cambia lo que
   hace un boton. Va al final de la hoja y acotado a #adminOverlay / #adminBody
   a proposito — asi gana por especificidad sin tener que reescribir las
   cuarenta reglas de arriba, que siguen sirviendo al resto del sitio.

   Tres ideas la ordenan:

   1. JERARQUIA DE SUPERFICIES. Antes la tarjeta era mas OSCURA que la columna
      que la contiene, asi que el kanban se leia hundido. Ahora hay una escala:
      fondo → columna → tarjeta → badge, cada escalon un poco mas claro.

   2. EL COLOR IDENTIFICA, NO DECORA. Cada modulo tiene el suyo y el panel
      entero lo hereda por --accent (lo pone applyServiceAccent en #adminBody):
      los titulos de seccion, los botones primarios y el hover de las tarjetas
      cambian solos al cambiar de pestaña. Sigue siendo ~90% superficie oscura.

   3. UNA ESCALA TIPOGRAFICA PARA EL PANEL. El comentario de la escala de arriba
      decia que el panel "todavia no pasa por aca". Ahora pasa, con su propia
      escala: es otra interfaz, de densidad alta, y no puede usar la de la
      landing. Seis niveles y ninguno suelto.
   ========================================================================== */

#adminOverlay{
  --p-surface:#1D1712;
  --p-card:#241D17;
  --p-inset:#2A221B;
  --p-line:#30261E;
  --p-line-2:#40342A;

  --p-kpi:31px;
  --p-title:22px;
  --p-sub:17px;
  --p-body:14px;
  --p-sec:13px;
  --p-label:11.5px;
}

/* ---------- cabecera y navegacion principal ---------- */
#adminOverlay .admin-modal-header{background:var(--p-surface);border-bottom-color:var(--p-line);}
#adminOverlay .admin-modal-body{background:var(--bg);}
#adminOverlay .admin-tabs{gap:30px;}
#adminOverlay .admin-tab{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--p-body);color:var(--text-dim);
  padding:13px 2px;border-bottom-width:2.5px;min-height:44px;
}
#adminOverlay .admin-tab:hover{color:var(--text);}

/* El icono se pinta con mascara y color de texto, asi hereda el color del
   modulo sin necesidad de tres SVG coloreados a mano. */
#adminOverlay .admin-tab::before{
  content:"";width:17px;height:17px;flex-shrink:0;background-color:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
  opacity:.7;transition:opacity .15s var(--ease);
}
#adminOverlay .admin-tab:hover::before,
#adminOverlay .admin-tab.active::before{opacity:1;}
#adminOverlay #tabChatbots{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.6a8.2 8.2 0 0 1-8.8 8.2 8.6 8.6 0 0 1-3.7-.9L3.5 20.5l1.6-4.5a8.2 8.2 0 0 1-1-4 8.2 8.2 0 0 1 8.2-8.2 8.2 8.2 0 0 1 8.2 8.2z'/%3E%3C/svg%3E");}
#adminOverlay #tabAuditorias{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8'/%3E%3Cpath d='m20 20-4.4-4.4'/%3E%3C/svg%3E");}

/* ---------- sub-pestañas ---------- */
#adminOverlay .admin-subtab{min-height:40px;font-size:var(--p-sec);}
#adminOverlay .admin-subtab-count{font-size:var(--p-label);color:var(--text-dim);background:var(--p-inset);}
#adminOverlay .admin-subtab.active .admin-subtab-count{color:var(--accent);background:var(--accent-soft);}

/* La entrada a Implementaciones lleva su violeta ya desde Auditorias: es un
   servicio distinto, aunque viva aqui dentro. Se selecciona por el handler
   para no tener que tocar el HTML que genera app.js. */
#adminOverlay .admin-subtab[onclick*="entrarAImplementaciones"]{
  color:var(--violet);border-color:var(--violet-dim);
}
#adminOverlay .admin-subtab[onclick*="entrarAImplementaciones"]:hover{
  color:var(--violet);border-color:var(--violet);background:var(--violet-soft);
}
#adminOverlay .admin-subtab[onclick*="entrarAImplementaciones"]::before{
  content:"";width:15px;height:15px;flex-shrink:0;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 17h16'/%3E%3Ccircle cx='9' cy='7' r='2.4'/%3E%3Ccircle cx='16' cy='17' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 17h16'/%3E%3Ccircle cx='9' cy='7' r='2.4'/%3E%3Ccircle cx='16' cy='17' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat;
}
#adminOverlay .admin-subtab-volver{color:var(--text-faint);}
#adminOverlay .admin-subtab-volver:hover{color:var(--text);}

/* ---------- KPI: el numero manda ---------- */
#adminOverlay .dash{gap:16px;margin-bottom:30px;}
#adminOverlay .dash-tile{
  background:var(--p-surface);border-color:var(--p-line);
  padding:18px 20px 19px;min-height:134px;gap:9px;transition:border-color .15s var(--ease);
}
#adminOverlay .dash-tile:hover{border-color:var(--p-line-2);}
#adminOverlay .dash-label{font-size:var(--p-label);letter-spacing:.11em;color:var(--text-dim);}
#adminOverlay .dash-value{font-size:var(--p-kpi);letter-spacing:-.02em;}
#adminOverlay .dash-hint{font-size:var(--p-sec);color:var(--text-dim);line-height:1.5;}
#adminOverlay .dash-bar-name{font-size:12.5px;width:86px;color:var(--text-dim);}
#adminOverlay .dash-bar-num{font-size:12.5px;color:var(--text);width:20px;}
#adminOverlay .dash-bar-track{height:6px;background:var(--p-inset);}
#adminOverlay .dash-recent-row{font-size:var(--p-sec);}
#adminOverlay .dash-recent-when{font-size:var(--p-label);}

/* ---------- kanban ---------- */
#adminOverlay .kanban-board{
  gap:16px;padding:2px 2px 14px;
  scroll-snap-type:x proximity;
}
#adminOverlay .kanban-column{
  background:var(--p-surface);border-color:var(--p-line);
  border-top-width:3px;padding:15px 14px 16px;scroll-snap-align:start;
}
#adminOverlay .kanban-col-head{padding-bottom:12px;border-bottom-color:var(--p-line);}
#adminOverlay .kanban-col-title{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);
}
#adminOverlay .kanban-col-count{
  font-size:12px;background:var(--p-inset);color:var(--text);padding:2px 10px;
  font-variant-numeric:tabular-nums;
}

/* La identidad de cada estado: borde arriba y contador teñido. Nunca el fondo
   entero, que convertiria el tablero en un semaforo. */
#adminOverlay .status-nuevo{border-top-color:var(--blue);}
#adminOverlay .status-nuevo .kanban-col-count{color:var(--blue);background:var(--blue-soft);}
#adminOverlay .status-contactado{border-top-color:var(--teal);}
#adminOverlay .status-contactado .kanban-col-count{color:var(--teal);background:var(--teal-soft);}
#adminOverlay .status-cotizado{border-top-color:var(--copper);}
#adminOverlay .status-cotizado .kanban-col-count{color:var(--copper);background:var(--copper-soft);}
#adminOverlay .status-ganado{border-top-color:var(--green);}
#adminOverlay .status-ganado .kanban-col-count{color:var(--green);background:var(--green-soft);}
#adminOverlay .status-perdido{border-top-color:var(--danger);}
#adminOverlay .status-perdido .kanban-col-count{color:var(--danger);background:rgba(226,102,90,0.12);}
#adminOverlay .status-abandonado{border-top-color:var(--text-faint);}

/* El carril de entrega usa el color del servicio: sus columnas son fases de un
   mismo trabajo, no estados de venta que compitan entre si. */
#adminOverlay [class*="kanban-column phase-"],
#adminOverlay .kanban-column[class*=" phase-"]{border-top-color:var(--accent);}

#adminOverlay .kanban-card{
  background:var(--p-card);border-color:var(--p-line);padding:14px 15px;
  transition:border-color .15s var(--ease),transform .15s var(--ease);
}
#adminOverlay .kanban-card:hover{border-color:var(--accent);transform:translateY(-1px);}
#adminOverlay .kanban-card-name{font-size:14.5px;line-height:1.35;}
#adminOverlay .kanban-card-meta{font-size:12px;color:var(--text-dim);margin-bottom:9px;}
#adminOverlay .kanban-card-pain{font-size:var(--p-sec);color:var(--text-dim);-webkit-line-clamp:2;}

/* ---------- ficha de detalle ---------- */
#adminOverlay .detail-business-name{font-size:30px;letter-spacing:-.015em;}
#adminOverlay .detail-meta-item{font-size:var(--p-sec);}
#adminOverlay .detail-section-title{
  color:var(--accent);font-size:var(--p-label);letter-spacing:.1em;
  border-bottom-color:var(--p-line);
}
#adminOverlay .detail-label{font-size:var(--p-label);color:var(--text-dim);letter-spacing:.07em;}
#adminOverlay .detail-value{font-size:var(--p-body);line-height:1.55;}
#adminOverlay .detail-need-block{background:var(--p-surface);border-color:var(--p-line);}
#adminOverlay .section-note{font-size:var(--p-sec);}
#adminOverlay .detail-accordion summary{color:var(--accent);background:var(--p-surface);font-size:var(--p-label);}
#adminOverlay .detail-empty-note{font-size:var(--p-sec);}

/* ---------- botones, badges, campos ---------- */
#adminBody .btn-primary{background:var(--accent);color:var(--on-accent);}
#adminBody .btn-primary:hover{background:var(--accent);filter:brightness(1.1);}
#adminBody .btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
#adminOverlay .btn{min-height:40px;font-size:var(--p-sec);}
#adminBody .phase-step:hover{border-color:var(--accent);color:var(--text);}
#adminBody .phase-step.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);}
#adminBody .quote-tpl:hover{border-color:var(--accent);color:var(--accent);}
#adminBody .scope-check input{accent-color:var(--accent);}
#adminBody .deliv-row a{color:var(--accent);}

#adminOverlay .pkg-badge{font-size:var(--p-label);padding:3px 10px;letter-spacing:.02em;}
/* En una columna de kanban el nombre del paquete no cabe entero. El badge
   traia flex-shrink:0 y nowrap de la landing, donde hay ancho de sobra, asi
   que se salia de la tarjeta. Aqui cede y se corta; el nombre del negocio es
   lo que no puede perderse. */
#adminOverlay .kanban-card-name{flex:1;min-width:0;}
#adminOverlay .kanban-card .pkg-badge{
  flex-shrink:1;min-width:0;max-width:46%;overflow:hidden;text-overflow:ellipsis;
}
#adminOverlay .field label{font-size:var(--p-label);letter-spacing:.07em;}

/* Los campos se estilaban solo dentro de .field, y en el panel hay varios que
   no lo estan: la proxima accion, el alcance, los entregables. Esos salian con
   el estilo crudo del navegador — fondo blanco y texto negro sobre una
   interfaz oscura, y los de tipo number con el texto directamente en negro.
   Se estilan por tipo y no por contenedor, que es de donde venia el agujero.
   Los checkbox quedan fuera a proposito: los pinta accent-color. */
#adminOverlay input[type=text],
#adminOverlay input[type=number],
#adminOverlay input[type=email],
#adminOverlay input[type=tel],
#adminOverlay input[type=url],
#adminOverlay input[type=date],
#adminOverlay select,
#adminOverlay textarea{
  background:var(--p-card);border:1px solid var(--p-line-2);color:var(--text);
  font-family:var(--font-body);font-size:var(--p-body);
  padding:11px 13px;border-radius:var(--radius-sm);min-height:44px;color-scheme:dark;
}
#adminOverlay textarea{min-height:96px;line-height:1.55;}
#adminOverlay input::placeholder,#adminOverlay textarea::placeholder{color:var(--text-faint);}
#adminOverlay .field input,#adminOverlay .field select,#adminOverlay .field textarea{
  background:var(--p-card);border-color:var(--p-line-2);font-size:var(--p-body);min-height:44px;
}
#adminOverlay .field input:focus,#adminOverlay .field select:focus,#adminOverlay .field textarea:focus{
  border-color:var(--accent);
}
#adminOverlay .field textarea{min-height:96px;}
#adminOverlay .hint{font-size:var(--p-sec);}

/* ---------- monitoreo ---------- */
#adminOverlay .flota-chip{font-size:var(--p-sec);}
#adminOverlay .flota-chip.flota-bien{background:var(--green-soft);}
#adminOverlay .flota-chip.flota-aviso{background:var(--amber-soft);}
#adminOverlay .flota-chip.flota-mal,
#adminOverlay .flota-chip.flota-callado{background:rgba(226,102,90,0.12);}
#adminOverlay .flota-estado{font-size:var(--p-label);font-weight:600;letter-spacing:.09em;}

/* ---------- foco visible, en todo el panel ---------- */
#adminOverlay button:focus-visible,
#adminOverlay a:focus-visible,
#adminOverlay input:focus-visible,
#adminOverlay select:focus-visible,
#adminOverlay textarea:focus-visible,
#adminOverlay summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  #adminOverlay .admin-modal-header{padding:18px 20px 0;}
  #adminOverlay .admin-modal-body{padding:18px 20px 28px;}
  #adminOverlay .detail-business-name{font-size:25px;}
}
@media (max-width:720px){
  #adminOverlay .admin-tabs{gap:20px;}
  #adminOverlay .admin-tab{font-size:var(--p-sec);}
  #adminOverlay .dash-tile{min-height:0;padding:16px 17px;}
  #adminOverlay .dash-value{font-size:27px;}
  /* El kanban no cambia de forma en movil: sigue siendo el mismo tablero y se
     recorre de lado, con las columnas encajando de a una. */
  #adminOverlay .kanban-board{grid-template-columns:repeat(6,minmax(min(82vw,260px),1fr));}
}
@media (prefers-reduced-motion:reduce){
  #adminOverlay .kanban-card:hover{transform:none;}
}

/* ============================================================================
   PANEL INTERNO · EL COLOR DEL MODULO, EN TODA LA PANTALLA
   ============================================================================

   La capa de arriba teñia los detalles —titulos, botones, contadores— pero el
   fondo seguia siendo el mismo marron en los tres modulos, asi que de un
   vistazo las tres pestañas se parecian. Esto lo lleva al fondo: al cambiar de
   pestaña cambia la TEMPERATURA de la pantalla entera, no solo unos acentos.

   applyServiceAccent pone la clase del servicio en #adminBody, que es un
   hermano de la cabecera y no su padre, asi que la cabecera nunca se enteraba.
   Se resuelve leyendo esa clase desde arriba con :has() y republicando el color
   como --mod para TODO el panel. Sin tocar app.js.

   Donde no haya :has(), --mod se queda en el turquesa por defecto y el panel
   sigue exactamente como estaba: se pierde el tinte, no la interfaz.
   ========================================================================== */

#adminOverlay{
  --mod:var(--teal);
  --mod-dim:var(--teal-dim);
  --mod-soft:var(--teal-soft);
  --on-mod:var(--on-teal);
}
#adminOverlay:has(#adminBody.svc-teal){
  --mod:var(--teal);--mod-dim:var(--teal-dim);--mod-soft:var(--teal-soft);--on-mod:var(--on-teal);
}
#adminOverlay:has(#adminBody.svc-copper){
  --mod:var(--copper);--mod-dim:var(--copper-dim);--mod-soft:var(--copper-soft);--on-mod:var(--on-copper);
}
#adminOverlay:has(#adminBody.svc-violet){
  --mod:var(--violet);--mod-dim:var(--violet-dim);--mod-soft:var(--violet-soft);--on-mod:var(--on-violet);
}

/* La franja de color que corona el panel. Es lo primero que se ve y lo que
   cambia de golpe al saltar de modulo. */
#adminOverlay .admin-modal{border-top:3px solid var(--mod);transition:border-color .25s var(--ease);}

/* Cabecera y cuerpo lavados con el color, muy suave. El texto sigue sobre
   superficie oscura: esto tiñe el aire, no el contenido. */
#adminOverlay .admin-modal-header{
  background:linear-gradient(180deg,var(--mod-soft) 0,transparent 100%),var(--p-surface);
  border-bottom-color:var(--mod-dim);
}
#adminOverlay .admin-modal-body{
  background:linear-gradient(180deg,var(--mod-soft) 0,transparent 260px),var(--bg);
}

/* La pestaña activa deja de ser texto subrayado y pasa a ser una pastilla
   llena del color del modulo: a un metro de la pantalla ya se sabe donde
   estas. La inactiva no compite. */
#adminOverlay .admin-tabs{gap:12px;border-bottom-color:var(--mod-dim);}
#adminOverlay .admin-tab{
  border-bottom:none;border-radius:var(--radius-pill) var(--radius-pill) 0 0;
  padding:12px 18px;margin-bottom:0;
}
#adminOverlay .admin-tab:hover{background:rgba(255,255,255,0.04);}
#adminOverlay .admin-tab.active{
  background:var(--mod);color:var(--on-mod);border-color:transparent;
}
#adminOverlay #tabAuditorias.active{background:var(--copper);color:var(--on-copper);border-color:transparent;}
#adminOverlay .admin-tab.active::before{opacity:1;}
#adminOverlay .admin-tab.active:hover{background:var(--mod);filter:brightness(1.06);}
#adminOverlay #tabAuditorias.active:hover{background:var(--copper);}

/* El resto del panel se apoya en el mismo color. */
#adminOverlay .dash-tile{border-top:2px solid var(--mod-dim);}
#adminOverlay .dash-tile:hover{border-top-color:var(--mod);}
#adminOverlay .kanban-col-head{border-bottom-color:var(--mod-dim);}
#adminOverlay .detail-head{border-bottom-color:var(--mod-dim);}
#adminOverlay .admin-subtabs{
  border-bottom:1px solid var(--border-soft);padding-bottom:16px;
}

/* Hasta la barra de desplazamiento del panel lleva el color: es el unico
   elemento que se ve siempre, en cualquier pantalla del modulo. */
#adminOverlay .admin-modal-body{scrollbar-color:var(--mod-dim) transparent;scrollbar-width:thin;}
#adminOverlay .admin-modal-body::-webkit-scrollbar{width:10px;}
#adminOverlay .admin-modal-body::-webkit-scrollbar-thumb{
  background:var(--mod-dim);border-radius:99px;border:3px solid var(--bg);
}
#adminOverlay .admin-modal-body::-webkit-scrollbar-track{background:transparent;}

@media (max-width:720px){
  #adminOverlay .admin-tab{padding:10px 13px;}
  #adminOverlay .admin-tabs{gap:8px;}
}
@media (prefers-reduced-motion:reduce){
  #adminOverlay .admin-modal{transition:none;}
}

/* El comando del alta automatica, en la ficha del bot. Se selecciona entero
   de un clic por si el portapapeles no esta disponible. */
#adminOverlay .alta-cmd{
  font-family:var(--font-mono);font-size:var(--p-sec);line-height:1.6;color:var(--text);
  background:var(--p-card);border:1px solid var(--p-line-2);border-radius:var(--radius-sm);
  padding:13px 15px;margin:0 0 12px;overflow-x:auto;white-space:pre;user-select:all;
}
/* Sin esto, el comando largo ensancha la columna en vez de hacer scroll dentro
   de su caja, y en pantallas angostas empuja el resto de la ficha fuera. */
#adminOverlay .detail-cols > div{min-width:0;}

/* La marca de campo opcional en la configuracion del bot. Va apagada y en
   minuscula: informa, no compite con la etiqueta. */
#adminOverlay .field label .opcional{
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--text-faint);margin-left:6px;
}


/* ============ diagnóstico gratis de la auditoría ============
   Pantalla completa, por encima de todo. La espera es de verdad —Claude
   tarda entre 30 y 60 segundos—, así que la animación no finge velocidad:
   acompaña. Con prefers-reduced-motion todo queda quieto y la barra igual
   avanza, que es la información que importa. */
.diag{
  --accent:var(--copper);--on-accent:var(--on-copper);
  display:none;position:fixed;inset:0;z-index:140;overflow-y:auto;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(214,138,76,.16), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(63,163,150,.10), transparent 60%),
    #0B0806;
  color:var(--text);
}
.diag.open{display:block;animation:diag-entra .35s ease-out;}
.diag::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(214,138,76,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(214,138,76,.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 70%);
}
@keyframes diag-entra{from{opacity:0}to{opacity:1}}
.diag-cerrar{
  position:fixed;top:18px;right:20px;z-index:2;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border);background:rgba(20,14,10,.8);color:var(--text-dim);font-size:18px;cursor:pointer;
}
.diag-cerrar:hover{color:var(--text);border-color:var(--copper-dim);}
.diag-escena{position:relative;min-height:100%;}
.diag-escena h1:focus,.diag-etapa:focus{outline:none;}

/* ---- la espera ---- */
.diag-carga{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 22px;gap:18px;
}
.diag-orbe{position:relative;width:210px;height:210px;margin-bottom:12px;}
.diag-aro{position:absolute;inset:0;border-radius:50%;border:1.5px solid transparent;}
.diag-aro.a1{border-top-color:var(--copper);border-right-color:rgba(214,138,76,.35);animation:diag-gira 2.2s linear infinite;}
.diag-aro.a2{inset:22px;border-bottom-color:var(--teal);border-left-color:rgba(63,163,150,.35);animation:diag-gira 3.4s linear infinite reverse;}
.diag-aro.a3{inset:46px;border-top-color:rgba(243,236,225,.55);border-left-color:rgba(214,138,76,.2);animation:diag-gira 1.6s linear infinite;}
.diag-nucleo{
  position:absolute;inset:78px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #F6C28F, var(--copper) 45%, #6B3E18 100%);
  box-shadow:0 0 40px 8px rgba(214,138,76,.45), 0 0 90px 30px rgba(214,138,76,.18);
  animation:diag-late 1.8s ease-in-out infinite;
}
.diag-barrido{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(214,138,76,.28) 40deg, transparent 80deg);
  animation:diag-gira 2.8s linear infinite;
}
@keyframes diag-gira{to{transform:rotate(360deg)}}
@keyframes diag-late{50%{transform:scale(1.12);filter:brightness(1.15)}}
.diag-etapa{font-family:var(--font-display);font-size:clamp(20px,3.2vw,30px);font-weight:500;margin:0;min-height:1.3em;}
.diag-barra{width:min(460px,86vw);height:6px;border-radius:99px;background:rgba(243,236,225,.08);overflow:hidden;}
.diag-barra > div{
  height:100%;width:0;border-radius:99px;transition:width .25s linear;
  background:linear-gradient(90deg, var(--teal), var(--copper));
  box-shadow:0 0 16px rgba(214,138,76,.6);
}
.diag-lista{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;text-align:left;font-size:14px;color:var(--text-faint);}
.diag-lista li{position:relative;padding-left:26px;transition:color .3s;}
.diag-lista li::before{
  content:"";position:absolute;left:0;top:4px;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--border);
}
.diag-lista li.activo{color:var(--text);}
.diag-lista li.activo::before{border-color:var(--copper);border-top-color:transparent;animation:diag-gira .9s linear infinite;}
.diag-lista li.hecho{color:var(--text-dim);}
.diag-lista li.hecho::before{content:"✓";border-color:var(--teal);color:var(--teal);font-size:9px;line-height:10px;text-align:center;}
.diag-nota{font-size:13px;color:var(--text-faint);margin:0;}
.diag-carga.quieto *{animation:none!important;}
@media (prefers-reduced-motion: reduce){
  .diag.open{animation:none;}
  .diag-aro,.diag-nucleo,.diag-barrido,.diag-lista li.activo::before{animation:none!important;}
}

.diag-error-icono,.diag-check{
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:40px;font-weight:700;
}
.diag-error-icono{border:2px solid var(--danger);color:var(--danger);}
.diag-check{border:2px solid var(--teal);color:var(--teal);box-shadow:0 0 50px rgba(63,163,150,.35);}
.diag-titulo-chico{font-family:var(--font-display);font-size:clamp(20px,3vw,28px);font-weight:500;max-width:620px;margin:0;}
.diag-listo h1{font-family:var(--font-display);font-size:clamp(34px,6vw,56px);font-weight:500;margin:0;}
.diag-acciones{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px;}

/* ---- las dos pantallas ---- */
.diag-pantalla{max-width:1180px;margin:0 auto;padding:70px 26px 60px;animation:diag-sube .45s ease-out;}
@keyframes diag-sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.diag-pantalla{animation:none;}}
.diag-tag{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--copper);
  margin:0 0 14px;display:flex;gap:14px;flex-wrap:wrap;
}
.diag-pantalla.solucion .diag-tag{color:var(--teal);}
.diag-tag span{color:var(--text-faint);}
.diag-cabeza h1{font-family:var(--font-display);font-size:clamp(30px,5vw,54px);line-height:1.08;font-weight:500;margin:0 0 14px;letter-spacing:-.02em;}
.diag-resumen{font-size:clamp(16px,1.8vw,20px);color:var(--text-dim);max-width:780px;margin:0;line-height:1.5;}
.diag-lienzo{margin-top:34px;background:rgba(34,27,21,.7);border-color:var(--border);}
.diag-lienzo{scrollbar-color:var(--copper-dim) transparent;}
.diag-lienzo svg{width:100%;}
.diag-desliza{display:none;margin-left:auto;color:var(--copper);font-family:var(--font-mono);font-size:11px;}
@media (max-width:900px){
  .diag-lienzo svg{width:var(--ancho-natural,760px);max-width:none;}
  .diag-desliza{display:inline;}
}
.diag-leyenda{font-size:13px;color:var(--text-faint);margin:10px 0 0;display:flex;align-items:center;gap:8px;}
.diag-punto{width:12px;height:12px;border-radius:3px;display:inline-block;}
.diag-punto.caliente{background:rgba(214,138,76,.25);border:1.5px solid var(--copper);}
.diag-punto.auto{background:rgba(63,163,150,.22);border:1.5px solid var(--teal);}
.diag-sub{font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);font-weight:500;margin:46px 0 16px;}
.diag-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;}
.diag-tarjeta{
  position:relative;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:22px 22px 20px;
}
.diag-tarjeta h3{font-family:var(--font-display);font-size:19px;font-weight:500;margin:0 0 8px;line-height:1.25;}
.diag-tarjeta p{margin:0;color:var(--text-dim);font-size:15px;line-height:1.55;}
.diag-tarjeta.hallazgo{border-color:rgba(214,138,76,.35);background:linear-gradient(180deg, rgba(214,138,76,.08), transparent 70%), var(--bg-card);}
.diag-tarjeta.hallazgo h3{padding-right:40px;}
.diag-num{
  position:absolute;top:18px;right:18px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:13px;color:var(--copper);border:1px solid var(--copper-dim);
}
.diag-impacto{margin-top:12px!important;color:var(--copper)!important;font-weight:500;}
.diag-tarjeta.mejora{border-color:rgba(63,163,150,.35);background:linear-gradient(180deg, rgba(63,163,150,.08), transparent 70%), var(--bg-card);}
.diag-resuelve{margin-top:12px!important;font-family:var(--font-mono);font-size:12px!important;color:var(--teal)!important;}
.diag-supuestos{font-size:13px;color:var(--text-faint);margin:18px 0 0;line-height:1.55;}
.diag-supuestos b{color:var(--text-dim);font-weight:600;}
.diag-beneficios{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px;}
.diag-beneficios li{
  padding:9px 16px;border-radius:var(--radius-pill);background:var(--teal-soft);border:1px solid var(--teal-dim);
  color:var(--text);font-size:14px;
}
.diag-beneficios li::before{content:"✓ ";color:var(--teal);}
.diag-pie{display:flex;justify-content:flex-end;margin-top:40px;}
.diag-pie.izquierda{justify-content:flex-start;margin-top:18px;}
.diag-cta{
  margin-top:50px;text-align:center;padding:42px 26px;border-radius:var(--radius-lg);
  border:1px solid var(--copper-dim);
  background:radial-gradient(600px 240px at 50% 0%, rgba(214,138,76,.18), transparent 70%), var(--bg-elevated);
}
.diag-cta h2{font-family:var(--font-display);font-size:clamp(24px,3.2vw,36px);font-weight:500;margin:0 0 10px;}
.diag-cta p{color:var(--text-dim);max-width:560px;margin:0 auto 22px;font-size:16px;line-height:1.55;}
.diag-error{color:var(--danger)!important;margin:16px auto 0!important;font-size:14px!important;}
.diag-aviso{font-size:12px;color:var(--text-faint);text-align:center;margin:18px auto 0;max-width:640px;}
@media (max-width:640px){
  .diag-pantalla{padding:64px 16px 40px;}
  .diag-pie{justify-content:stretch;}
  .diag-pie .btn{width:100%;}
}

/* El paso que hace el sistema solo, en el diagrama de la solución. */
.pm-task-auto{fill:rgba(63,163,150,.14);stroke:var(--teal);stroke-width:1.4;}

/* En la tarjeta del tablero y la ficha de la agencia. */
.kanban-chip{
  display:inline-block;margin-top:8px;padding:3px 9px;border-radius:99px;font-family:var(--font-mono);font-size:10.5px;
}
.kanban-chip.diag-pidio{background:var(--copper-soft);color:var(--copper);border:1px solid var(--copper-dim);}
.kanban-chip.diag-visto{background:rgba(243,236,225,.05);color:var(--text-faint);border:1px solid var(--border-soft);}
.diag-urgente{color:var(--copper)!important;}
.hint-inline{font-weight:400;color:var(--text-faint);font-size:.9em;margin-left:4px;}


/* ============ el formulario del diagnóstico, con el peso que merece ============
   Es la primera pantalla del embudo de auditorías y competía con el chatbot,
   que es lo más cuidado del sitio. No se cambió el lenguaje visual —ya era el
   mismo: Space Grotesk para títulos, Inter para el resto, turquesa de acento,
   iconos SVG propios— sino la ESCALA, que era la del panel interno y no la de
   una pantalla de captación.

   Va limitado a #auditOverlay a propósito: el wizard del chatbot comparte las
   clases (.icon-form, .field) y su medida ya está calibrada contra su demo. */
#auditOverlay .modal{
  max-width:880px;padding:40px 48px;
  /* Centrado vertical sin cortar la parte de arriba cuando el formulario es
     más alto que la pantalla: con `align-items:center` el navegador recorta lo
     que sobresale y el título queda inalcanzable. */
  margin:auto 0;
}
#auditOverlay .modal h3{font-size:28px;line-height:1.15;letter-spacing:-.01em;}
#auditOverlay .modal .step-sub{font-size:16px;color:#C4B8AA;  /* un gris más claro que --text-dim: el subtítulo ahora es texto de venta, no una nota al pie */margin-bottom:26px;}
#auditOverlay .progress{margin-bottom:30px;}

#auditOverlay .icon-form .field{margin-bottom:24px;}
#auditOverlay .icon-form .field label{font-size:15px;font-weight:500;margin-bottom:10px;}
#auditOverlay .icon-form .field input[type=text],
#auditOverlay .icon-form .field input[type=email],
#auditOverlay .icon-form .field input[type=tel],
#auditOverlay .icon-form .field textarea{
  min-height:52px;font-size:16px;padding:14px 16px 14px 50px;border-radius:var(--radius);
}
#auditOverlay .icon-form .field textarea{min-height:104px;}
#auditOverlay .input-icon-wrap .field-icon{left:17px;}
#auditOverlay .input-icon-wrap.icon-top .field-icon{top:18px;}
#auditOverlay .input-icon-wrap .field-icon svg{width:20px;height:20px;}
#auditOverlay .icon-choice-card{padding:18px 12px;}
#auditOverlay .icon-choice-card svg{width:24px;height:24px;}
#auditOverlay .field .hint{font-size:13px;}

#auditOverlay .step-nav{margin-top:26px;gap:14px;}
#auditOverlay .step-nav .btn{
  min-height:48px;padding:0 32px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;
}

@media (max-width:640px){
  #auditOverlay.modal-overlay{padding:20px 4vw;}
  #auditOverlay .modal{max-width:92vw;padding:24px 28px;}
  #auditOverlay .modal h3{font-size:24px;}
  #auditOverlay .modal .step-sub{font-size:15px;}
  /* Apilados: dos botones de 48px en fila dejan objetivos de toque estrechos,
     y en el paso final el texto del principal es largo. */
  #auditOverlay .step-nav{flex-direction:column-reverse;align-items:stretch;}
  #auditOverlay .step-nav .right{flex-direction:column-reverse;}
  #auditOverlay .step-nav .btn{width:100%;}
}


/* ============ el autorrelleno del navegador, en oscuro ============
   Cuando Chrome reconoce un campo (correo, teléfono, nombre) lo pinta con SU
   color: fondo casi blanco y texto negro. En un sitio oscuro eso deja dos
   campos blancos en medio del formulario, y el prospecto cree que algo se
   rompió justo antes de dejarnos sus datos.

   No se puede cambiar `background-color` en ese estado —el navegador lo
   ignora—, así que se tapa con una sombra interior enorme del color de la
   caja, que es el truco estándar, y el texto se pinta con -webkit-text-fill-color.
   La transición larguísima es para el Safari viejo, que anima el fondo al
   enfocar: con 9999s nunca llega a verse.

   Va sin `.field` delante a propósito: aplica a todo el sitio —embudo del
   chatbot, diagnóstico, contacto y panel—, porque el problema es del
   navegador y no de un formulario. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-box-shadow:inset 0 0 0 1000px var(--bg-card)!important;
  box-shadow:inset 0 0 0 1000px var(--bg-card)!important;
  -webkit-text-fill-color:var(--text)!important;
  caret-color:var(--text);
  -webkit-transition:background-color 9999s ease-in-out 0s;
  transition:background-color 9999s ease-in-out 0s;
  border-color:var(--border);
}
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus{border-color:var(--teal);}
/* Un campo autorrellenado que además está mal sigue teniendo que verse mal. */
.field.has-error input:-webkit-autofill,
.field.has-error textarea:-webkit-autofill,
.field.has-error select:-webkit-autofill{border-color:var(--danger);}

/* La versión estándar del mismo selector, en su propio bloque: si un
   navegador no la entiende, un selector inválido dentro de la lista de arriba
   anularía TODA la regla, y volveríamos al campo blanco. */
input:autofill,
textarea:autofill,
select:autofill{
  -webkit-box-shadow:inset 0 0 0 1000px var(--bg-card)!important;
  box-shadow:inset 0 0 0 1000px var(--bg-card)!important;
  -webkit-text-fill-color:var(--text)!important;
  caret-color:var(--text);
  border-color:var(--border);
}


/* ============ el borrador recuperado y la salida con confirmación ============
   Ver app.js, "no perder lo que el prospecto ya escribió". */

/* Discreto a propósito: informa de algo bueno que ya pasó, no pide nada. */
.borrador-aviso{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--teal-soft);border:1px solid var(--teal-dim);border-radius:var(--radius-sm);
  padding:11px 14px;margin:0 0 20px;font-size:var(--text-small);color:var(--text);
}
.borrador-limpiar{
  background:none;border:none;padding:0;cursor:pointer;color:var(--text-dim);
  font-family:var(--font-body);font-size:var(--text-micro);text-decoration:underline;
}
.borrador-limpiar:hover{color:var(--text);}

/* La confirmación es chica a propósito: una pregunta, dos salidas. */
.modal-confirm{max-width:440px;padding:30px 32px;}
.modal-confirm .step-sub{margin-bottom:24px;}
.confirm-nav{justify-content:flex-end;margin-top:0;}
@media (max-width:520px){
  .confirm-nav{flex-direction:column-reverse;}
  .confirm-nav .btn{width:100%;}
}

/* El clic en el fondo ya no cierra: el pulso dice "te escuché, pero no te voy
   a borrar lo que escribiste". Un movimiento mínimo — un modal que tiembla
   parece un error del sitio. */
@keyframes modal-pulso{
  0%{transform:scale(1);}
  45%{transform:scale(1.012);}
  100%{transform:scale(1);}
}
.modal-pulso{animation:modal-pulso .22s var(--ease);}
@media (prefers-reduced-motion: reduce){
  .modal-pulso{animation:none;}
}

/* La etiqueta de con qué se construye la solución que propuso el diagnóstico.
   Va apagada: informa al pasar la vista por el tablero, no compite con el
   sello de "pidió cotización", que es el que pide acción. */
.kanban-chip.tipo-chatbot,.kanban-chip.tipo-agenda{background:var(--teal-soft);color:var(--teal);border:1px solid var(--teal-dim);}
.kanban-chip.tipo-inventario{background:var(--violet-soft);color:var(--violet);border:1px solid var(--violet-dim);}
.kanban-chip.tipo-otra{background:rgba(243,236,225,.05);color:var(--text-faint);border:1px solid var(--border-soft);}
.kanban-chip + .kanban-chip{margin-left:6px;}
#adminOverlay .detail-section .mt{margin-top:14px;}

/* ---- la puerta del panel interno ----
   Chica y sobria: una clave y un botón. El candado arriba dice de un vistazo
   qué es esta ventana, antes de leer nada. */
.modal-login{max-width:420px;padding:32px 32px 26px;}
.modal-login .modal-head{margin-bottom:6px;}
.modal-login .step-sub{margin-bottom:24px;}
.login-sello{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:rgba(63,163,150,.12);border:1px solid rgba(63,163,150,.28);margin-bottom:18px;}
.login-sello svg{width:22px;height:22px;fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.clave-campo{position:relative;}
.clave-campo input{width:100%;background:var(--bg-card);border:1px solid var(--border);color:var(--text);
  padding:13px 50px 13px 14px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:var(--text-small);
  letter-spacing:.04em;transition:border-color .15s,box-shadow .15s;}
.clave-campo input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(63,163,150,.16);}
.clave-campo input.campo-error{border-color:var(--danger);}
.clave-ver{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:38px;height:38px;border:0;
  background:transparent;color:var(--text-dim);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.clave-ver:hover{color:var(--text);background:rgba(255,255,255,.04);}
.clave-ver:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}
.clave-ver svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.clave-ver .ojo-cerrado{display:none;}
.clave-ver[aria-pressed="true"] .ojo-abierto{display:none;}
.clave-ver[aria-pressed="true"] .ojo-cerrado{display:block;}
.login-caps{margin:8px 0 0;font-size:var(--text-micro);color:var(--copper);}
.modal-login .form-error{margin:-4px 0 14px;}
.modal-login .btn-block{min-height:48px;}
.login-pie{margin:18px 0 0;font-size:var(--text-micro);color:var(--text-dim);line-height:1.55;text-align:center;}
/* Visible para el gestor de contraseñas, invisible para la persona. */
.solo-lector{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
@keyframes login-temblor{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.login-temblor{animation:login-temblor .32s ease;}
@media (prefers-reduced-motion:reduce){.login-temblor{animation:none;}}
@media (max-width:520px){.modal-login{padding:26px 20px 22px;}}
.admin-salir{background:transparent;cursor:pointer;}
.admin-salir:hover{color:var(--danger);border-color:rgba(226,102,90,.45);}

/* El campo trampa del formulario de contacto. Fuera de la pantalla y fuera
   del recorrido del teclado, pero presente en el HTML: un robot que rellena
   todo lo que encuentra lo llena, y ahí se delata. No lleva display:none ni
   hidden porque los bots que valen algo los saltan. */
.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}