/* Lenguaje claro de Antomic — copiado de la zona clara de demo.antomic.io (publicar/index.html)
   y de los tokens del panel (app/src/app/globals.css). Ningún hex nuevo: todo sale de ahí. */
:root{
  --lienzo:#f6f9fd; --papel:#f7fafd; --carta:#ffffff; --lienzoApp:#eef3fa;
  --tinta:#131a2b; --tinta2:#3f4c68; --tinta3:#5f6d8a; --titulo:#0e1524;
  --linea:rgba(18,26,46,.13); --lineaFuerte:rgba(18,26,46,.22);
  --acento:#38a8ff; --acentoClaro:#b9e0ff; --acentoOscuro:#0b5fa8; --acentoSuave:rgba(56,168,255,.15); --sobreAcento:#fff;
  --exito:#0a6b4b; --exitoSuave:rgba(10,107,75,.12); --aviso:#8a5f06; --avisoSuave:rgba(240,180,41,.16); --falla:#b02a37; --fallaSuave:rgba(176,42,55,.11);
  --sombra1:0 1px 2px rgba(18,26,46,.06); --sombra2:0 6px 20px -8px rgba(18,26,46,.18); --sombraCristal:0 16px 40px rgba(10,18,38,.12), inset 0 1px 0 rgba(255,255,255,.9);
  --cristal:linear-gradient(165deg,rgba(255,255,255,.94),rgba(242,246,252,.84));
  --ease:cubic-bezier(.16,1,.3,1); --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --display:'DM Sans'; --cuerpo:'DM Sans'; --serif:'Instrument Serif';
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--lienzo);color:var(--tinta);font-family:var(--cuerpo),system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p{margin:0} h1,h2,h3{text-wrap:balance;color:var(--titulo)} p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.serif{font-family:var(--serif),Georgia,serif;font-style:italic;font-weight:400}
.num{font-variant-numeric:tabular-nums}
.contenedor{width:min(100% - 48px,1320px);margin-inline:auto}
@media(min-width:768px){.contenedor{width:min(100% - 96px,1320px)}}

/* retícula del demo, desvanecida por los cuatro lados */
.reticula{position:relative}
.reticula::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(18,26,46,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(18,26,46,.05) 1px,transparent 1px);
  background-size:36px 36px;background-position:center;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 78%,transparent 100%),linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 78%,transparent 100%),linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%);mask-composite:intersect}
.reticula>*{position:relative;z-index:1}

.kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--acentoOscuro)}
.titulo{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,52px);line-height:1.14;letter-spacing:-.02em;margin-top:18px;max-width:16em}
.entradilla{margin-top:16px;color:var(--tinta2);font-size:17px;line-height:1.6;max-width:56ch}
.remate{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--acentoOscuro)}

/* botones y píldoras del demo */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r-pill);font-weight:600;font-size:15px;transition:background-color 150ms var(--ease),border-color 150ms var(--ease),transform 150ms var(--ease),box-shadow 150ms var(--ease)}
.btn:active{transform:scale(.97)} .btn:focus-visible{outline:2px solid var(--acentoOscuro);outline-offset:3px}
.btn--primario{background:var(--acento);color:var(--sobreAcento);box-shadow:0 8px 24px -8px rgba(56,168,255,.6)}
.btn--primario:hover{background:#2b9bf5}
.btn--fantasma{border:1px solid var(--lineaFuerte);color:var(--tinta);background:rgba(255,255,255,.6)}
.btn--fantasma:hover{border-color:var(--tinta3)}
.btn--oscuro{background:var(--acentoOscuro);color:#fff}
.btn--chico{min-height:40px;padding:0 16px;font-size:14px;border-radius:var(--r-md)}
.pildoras{display:inline-flex;gap:4px;padding:5px;border-radius:var(--r-pill);background:rgba(255,255,255,.7);border:1px solid var(--linea);box-shadow:var(--sombra1)}
.pildoras a,.pildoras button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border-radius:var(--r-pill);border:1px solid transparent;background:transparent;font:inherit;font-weight:600;font-size:14px;color:var(--tinta2);cursor:pointer}
.pildoras .activa{background:#fff;color:var(--acentoOscuro);border-color:var(--acentoClaro);box-shadow:var(--sombra1)}

/* superficies */
.cristal{background:var(--cristal);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--linea);box-shadow:var(--sombraCristal);border-radius:var(--r-xl)}
.cristal--estrella{border-color:var(--acento);box-shadow:0 0 0 1px var(--acentoSuave),0 18px 44px rgba(10,18,38,.16)}
.carta{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--sombra1)}
.insignia{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.insignia--acento{background:var(--acentoSuave);color:var(--acentoOscuro)}
.insignia--verde{background:var(--exitoSuave);color:var(--exito)}
.insignia--ambar{background:var(--avisoSuave);color:var(--aviso)}
.insignia--rojo{background:var(--fallaSuave);color:var(--falla)}
.insignia--gris{background:var(--papel);color:var(--tinta2);border-color:var(--linea)}
.avatar{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--acentoSuave);color:var(--acentoOscuro);flex:none}
.punto{width:8px;height:8px;border-radius:50%;background:var(--acento);display:inline-block}
.punto--vivo{background:#0e8f63;box-shadow:0 0 0 4px rgba(14,143,99,.15)}
.lista-puntos{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;color:var(--tinta2)}
.lista-puntos li{display:flex;align-items:center;gap:10px}
.lista-puntos li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acento);flex:none}

/* burbujas de chat del demo */
.burbuja{max-width:78%;padding:12px 16px;border-radius:16px;font-size:15px;line-height:1.45;box-shadow:var(--sombra1)}
.burbuja--cliente{background:#eef3fa;color:var(--tinta);border-bottom-left-radius:6px;align-self:flex-start}
.burbuja--agente{background:var(--acento);color:#fff;border-bottom-right-radius:6px;align-self:flex-end;box-shadow:0 10px 24px -10px rgba(56,168,255,.7)}
.burbuja--equipo{background:var(--acentoOscuro);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.meta{font-size:11px;color:var(--tinta3);letter-spacing:.02em}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}