/* ============ AGENTES DE IA: la demo «Escríbele» (ag-) y las secciones de «La conversación» (ia-) ============ */
/* la demo tiene maqueta propia: a la izquierda, el reloj de los cinco pasos y las fichas que aprende; en el centro, el chat
   (como una app de mensajes de verdad); a la derecha, tu móvil, bloqueado mientras tu ayudante contesta, que te avisa en el paso 5.
   Hasta el paso 3 es de día (10:24); el 4 y el 5, de madrugada (03:12), y todo pasa a modo noche */
.ag-demo{--S:calc(var(--alto) - 70px - var(--u)*3.8);--lf:clamp(13px,min(calc(var(--u)*1.3),.9vw),24px);--rl:min(calc(var(--u)*26),17vw,calc(var(--S) - var(--u)*24.5 - var(--lf)*1.1));--izq:max(calc(min(var(--u)*5.4,3.5vw)*7.7),calc(var(--rl)*.92 + var(--lf)*15));--tono:#f9dbe8}
.ag-demo .sv-pin{grid-template-columns:var(--izq) minmax(0,1fr);align-items:center;gap:calc(var(--u)*4);padding:calc(70px + var(--u)*1.2) var(--pad) calc(var(--u)*2.6)}
.ag-izq{gap:0;align-content:center;min-width:0}
.ag-izq .ojo{margin-bottom:calc(var(--u)*1.3)}
.ag-izq h2{margin-bottom:calc(var(--u)*2.1)}

/* --- el reloj: un bisel con sus marcas, el cielo dentro y la hora; la aguja va de paso en paso --- */
.ag-rl{position:relative;width:calc(var(--rl)*.92 + var(--lf)*15);height:var(--rl);font-size:var(--lf)}
.ag-rl-es{position:absolute;left:0;top:0;width:var(--rl);height:var(--rl);container-type:size;border-radius:50%;background:radial-gradient(circle at 50% 30%,#2a2a30,#111 62%);box-shadow:0 calc(var(--rl)*.05) calc(var(--rl)*.1) rgba(17,17,17,.28),inset 0 0 0 calc(var(--rl)*.006) rgba(255,255,255,.16)}
.ag-rl-bi{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ag-rl-tk{fill:none;stroke:rgba(243,238,228,.3);stroke-width:.8;stroke-linecap:round}
.ag-rl-tkm{fill:none;stroke:rgba(243,238,228,.72);stroke-width:1.4;stroke-linecap:round}
.ag-rl-pp{fill:#f1df5c}
.ag-rl-ci{position:absolute;inset:8.5%;border-radius:50%;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 .6cqw rgba(0,0,0,.35)}
.ag-rl-dia,.ag-rl-noc,.ag-rl-est{position:absolute;inset:0}
.ag-rl-dia{background:linear-gradient(180deg,#ffd450 0%,#ffe697 40%,#fff4d2 74%)}
.ag-rl-noc{background:linear-gradient(180deg,#090c30 0%,#1d1760 52%,#3b22a0 100%);opacity:0;transition:opacity 1.2s}
.ag-rl-est{background-image:radial-gradient(circle at 26% 34%,#fff 0 .45cqw,transparent .8cqw),radial-gradient(circle at 70% 22%,rgba(255,255,255,.7) 0 .4cqw,transparent .7cqw),radial-gradient(circle at 82% 52%,rgba(255,255,255,.55) 0 .35cqw,transparent .65cqw),radial-gradient(circle at 12% 60%,rgba(255,255,255,.6) 0 .35cqw,transparent .65cqw);background-size:100% 100%,100% 100%,100% 100%,100% 100%;opacity:0;transition:opacity 1.4s}
.ag-rl-est::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 56% 14%,#fff 0 .55cqw,transparent .95cqw),radial-gradient(circle at 38% 66%,rgba(255,255,255,.8) 0 .4cqw,transparent .75cqw);animation:ia-titila 3.2s ease-in-out infinite}
.ag-noche .ag-rl-noc,.ag-noche .ag-rl-est{opacity:1}
.ag-rl-sol{position:absolute;left:17%;top:12%;width:20%;height:20%;border-radius:50%;background:radial-gradient(circle,#fffbe8 0 26%,#ffd24a 62%,#ffbd21);box-shadow:0 0 0 2.6cqw rgba(255,214,90,.32),0 0 0 5.6cqw rgba(255,214,90,.14),0 0 7cqw rgba(255,170,0,.45);transition:translate 1.3s cubic-bezier(.6,0,.3,1),opacity 1s}
.ag-noche .ag-rl-sol{translate:0 280%;opacity:0}
.ag-rl-luna{position:absolute;left:19%;top:13%;width:16%;height:16%;border-radius:50%;box-shadow:inset -3.3cqw -1.2cqw 0 0 #f1df5c;filter:drop-shadow(0 0 2.4cqw rgba(241,223,92,.55));rotate:-16deg;opacity:0;translate:0 -230%;transition:translate 1.5s cubic-bezier(.2,1,.3,1) .3s,opacity 1s .3s}
.ag-noche .ag-rl-luna{opacity:1;translate:0 0}
.ag-rl-nube{position:absolute;right:15%;top:23%;width:22%;height:7%;border-radius:99px;background:#fffdf5;box-shadow:0 .8cqw 1.6cqw rgba(160,110,0,.12);transition:opacity .9s,translate 1.4s cubic-bezier(.6,0,.3,1)}
.ag-rl-nube::before,.ag-rl-nube::after{content:'';position:absolute;bottom:35%;border-radius:50%;background:inherit}
.ag-rl-nube::before{left:20%;width:42%;height:190%}
.ag-rl-nube::after{left:48%;width:30%;height:140%}
.ag-rl-n2{right:auto;left:8%;top:40%;width:15%;height:5%;opacity:.85}
.ag-noche .ag-rl-nube{opacity:0;translate:-30% 0}
.ag-rl-col{position:absolute;left:0;right:0;bottom:0;width:100%;height:30%}
.ag-co1{fill:#36a372;transition:fill 1.4s}
.ag-co2{fill:#0b6b4c;transition:fill 1.4s}
.ag-noche .ag-co1{fill:#2a1f78}
.ag-noche .ag-co2{fill:#120d45}
.ag-rl-h{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:1.6cqw;padding-bottom:5cqw;color:#111;transition:color 1s}
.ag-rl-hh{font-weight:900;font-stretch:118%;font-size:19cqw;line-height:.86;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.ag-rl-cu{padding:.5em 1em;border-radius:99px;background:rgba(255,255,255,.55);font:500 max(9px,4.1cqw) 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:background 1s}
.ag-noche .ag-rl-h{color:#f3eee4}
.ag-noche .ag-rl-cu{background:rgba(255,255,255,.12)}
.ag-rl-h.cambia .ag-rl-hh{animation:ag-hora .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes ag-hora{0%{scale:.82}}
/* la aguja: cruza el bisel y apunta al paso de ahora */
.ag-rl-ag{position:absolute;inset:0;z-index:3;rotate:var(--ang,-72deg);transition:rotate .95s cubic-bezier(.2,1.25,.35,1)}
.ag-rl-pu{position:absolute;right:-4.5%;top:50%;width:17%;height:4.6%;translate:0 -50%;border-radius:2cqw 99px 99px 2cqw;background:linear-gradient(90deg,#f1df5c,#ffd23f);box-shadow:0 0 0 .55cqw #111,0 0 3.4cqw rgba(241,223,92,.7)}
.ag-rl-pu::before{content:'';position:absolute;left:-.4cqw;top:50%;width:2.8cqw;height:2.8cqw;margin-top:-1.4cqw;border-radius:50%;background:#111;box-shadow:inset 0 0 0 .7cqw #f1df5c}
.ag-demo[data-paso="2"] .ag-rl-ag{--ang:-36deg}
.ag-demo[data-paso="3"] .ag-rl-ag{--ang:0deg}
.ag-demo[data-paso="4"] .ag-rl-ag{--ang:36deg}
.ag-demo[data-paso="5"] .ag-rl-ag{--ang:72deg}
/* los cinco pasos, en abanico junto al bisel: el número va en su marca y el nombre al lado */
.ag-pasos{position:absolute;inset:0;margin:0;display:block}
.ag-pasos li{position:absolute;left:calc(var(--rl)/2 + (var(--rl)/2 + 1.3em)*cos(var(--a)));top:calc(var(--rl)/2 + (var(--rl)/2 + 1.3em)*sin(var(--a)))}
.ag-pasos button{translate:-1.22em -50%;gap:.55em;padding:.24em .95em .24em .24em;font-size:1em;font-weight:700;letter-spacing:-.005em;white-space:nowrap}
.ag-pasos .n{width:1.96em;height:1.96em;min-width:0;min-height:0;font-size:.74em;background:var(--paper)}
.ag-pasos .ahora button{padding-left:.24em}
.ag-pasos li:not(.ahora) button:hover{background:rgba(17,17,17,.07)}

/* --- lo que le cuentas: cuatro fichas que entran en el chat; luego se quedan marcadas --- */
.ag-fis{list-style:none;margin:calc(var(--u)*2 + var(--lf)*1.1) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*.75);font-size:clamp(11px,min(calc(var(--u)*1.04),.72vw),16px)}
.ag-fi{position:relative;display:flex;align-items:flex-start;gap:.65em;padding:.7em .85em .78em .68em;border-radius:.95em;background:#fff;box-shadow:0 0 0 1.5px #111,0 .55em 1.1em -.6em rgba(17,17,17,.35);line-height:1.25;transition:translate .5s cubic-bezier(.2,1.3,.35,1)}
.ag-fi-ic{flex:none;display:grid;place-items:center;width:2.15em;height:2.15em;border-radius:.62em;background:var(--tono);color:#111;transition:background .6s}
.ag-fi-ic .ia-i{width:58%;height:58%}
.ag-fi-tx{display:grid;gap:.18em;min-width:0}
.ag-fi-t{font-weight:800;font-size:1.06em}
.ag-fi-d{opacity:.68;text-wrap:pretty}
.ag-fi-no{background:#111;color:#f3eee4}
.ag-fi-no .ag-fi-ic{background:#2c2c33;color:var(--k)}
.ag-fi-ok{position:absolute;right:-.5em;top:-.5em;display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--k);color:#111;box-shadow:0 0 0 2px var(--paper);scale:0;transition:scale .45s cubic-bezier(.2,1.6,.4,1)}
.ag-fi-ok .ia-i{width:64%;height:64%;stroke-width:2.8}
.ag-fi.hecha .ag-fi-ok{scale:1}
.ag-fi.sale{translate:0 -.4em}
/* cuando una respuesta sale de esa ficha, la ficha se ilumina */
.ag-fi.usa{animation:ag-usa 1.3s cubic-bezier(.2,.8,.2,1)}
@keyframes ag-usa{0%{box-shadow:0 0 0 1.5px #111,0 0 0 0 rgba(241,223,92,.9)}30%{box-shadow:0 0 0 1.5px #111,0 0 0 .45em rgba(241,223,92,.9);translate:0 -.25em}100%{box-shadow:0 0 0 1.5px #111,0 0 0 .9em rgba(241,223,92,0)}}
/* la copia que vuela hasta la hoja (la pone agentes-ia.js) */
.ag-vuela{position:absolute;z-index:6;display:grid;place-items:center;border-radius:.62em;background:var(--tono);color:#111;box-shadow:0 0 0 1.5px #111,0 .8em 1.4em -.4em rgba(17,17,17,.4);pointer-events:none}
.ag-vuela .ia-i{width:58%;height:58%}

/* --- arriba: el negocio (compacto) y, sobre el móvil, quién es --- */
.ag-demo .dm-esc{--tw:min(calc((var(--S) - var(--u)*4.4)*.47),14vw);height:var(--S);grid-template-columns:minmax(0,calc(var(--u)*80)) var(--tw);grid-template-rows:auto minmax(0,1fr);place-items:stretch;gap:calc(var(--u)*1.2) calc(var(--u)*3.4);justify-content:space-evenly}
.ag-negs{grid-area:1/1;flex-wrap:nowrap;gap:calc(var(--u)*.6);min-width:0}
.ag-negs > .mono{width:auto;margin-right:calc(var(--u)*.4);font-size:max(10px,calc(var(--u)*.9))}
.ag-neg{display:inline-flex;align-items:center;gap:.45em;padding:.3em 1em .3em .32em;font-size:max(12.5px,calc(var(--u)*1.18));white-space:nowrap}
.ag-neg-i{display:block;width:1.95em;height:1.95em;padding:.16em;border-radius:50%;background:#fff;object-fit:contain}
.ag-neg[aria-pressed="true"] .ag-neg-i{background:var(--tono)}
.ag-der-t{grid-area:1/2;justify-self:center;align-self:center;font-size:max(10px,calc(var(--u)*.9));opacity:.6}

/* --- el chat: cabecera, conversación sobre un fondo de dibujitos, respuestas rápidas y la caja de escribir --- */
.ag-chat{grid-area:2/1;position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;min-width:0;border-radius:calc(var(--u)*2);background:#f3efe6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' fill='none' stroke='%23111' stroke-opacity='.075' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 13c.4 4.2 3.8 7.6 8 8-4.2.4-7.6 3.8-8 8-.4-4.2-3.8-7.6-8-8 4.2-.4 7.6-3.8 8-8z'/%3E%3Cpath d='M107 28a9.5 9.5 0 1 1-9 12.6 7.4 7.4 0 0 0 9-12.6z'/%3E%3Cpath d='M64 84h18a4 4 0 0 1 4 4v9a4 4 0 0 1-4 4h-9l-6 5v-5h-3a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4z'/%3E%3Cpath d='M127 104c-3-4-9-2-8 3 1 4 8 8 8 8s7-4 8-8c1-5-5-7-8-3z'/%3E%3Ccircle cx='30' cy='114' r='7.5'/%3E%3Cpath d='M30 110v4.2l2.6 1.6'/%3E%3Ccircle cx='122' cy='68' r='1.4'/%3E%3Ccircle cx='58' cy='44' r='1.4'/%3E%3Ccircle cx='94' cy='136' r='1.4'/%3E%3C/svg%3E") 0 0/150px 150px;color:#111;box-shadow:0 0 0 1.5px #111,0 calc(var(--u)*2) calc(var(--u)*4) rgba(17,17,17,.2);overflow:hidden;container-type:inline-size;transition:background-color .9s,color .9s}
.ag-cab{position:relative;z-index:3;display:flex;align-items:center;gap:calc(var(--u)*.9);padding:calc(var(--u)*.8) calc(var(--u)*1.4) calc(var(--u)*.8) calc(var(--u)*.9);background:#fff;border-bottom:1px solid rgba(17,17,17,.08);transition:background .9s,border-color .9s}
.ag-vuelve{display:grid;opacity:.6}
.ag-vuelve .ia-i{width:max(18px,calc(var(--u)*1.9));height:max(18px,calc(var(--u)*1.9));stroke-width:2.1}
.ag-av{position:relative;flex:none;display:grid;place-items:center;width:max(36px,calc(var(--u)*3.8));height:max(36px,calc(var(--u)*3.8));border-radius:50%;background:var(--tono);transition:background .6s}
.ag-av-i{display:block;width:80%;height:80%;object-fit:contain}
.ag-av-ia{position:absolute;right:-9%;bottom:-9%;display:grid;place-items:center;width:44%;height:44%;border-radius:50%;background:var(--k);box-shadow:0 0 0 2px #fff;transition:box-shadow .9s}
.ag-av-ia svg{width:62%;height:62%;fill:#111}
.ag-quien{display:grid;gap:2px;min-width:0;margin-right:auto;line-height:1.15}
.ag-nom{font-weight:900;font-stretch:110%;font-size:max(13.5px,calc(var(--u)*1.42));letter-spacing:-.005em}
.ag-est{display:flex;align-items:center;gap:6px;font:500 max(9.5px,calc(var(--u)*.86)) 'DM Mono',monospace;letter-spacing:.04em;opacity:.6;transition:opacity .3s,color .3s}
.ag-est-p{flex:none;width:7px;height:7px;border-radius:50%;background:#1f9d55}
.ag-demo.escribe .ag-est{opacity:1;color:#13804a}
.ag-demo.escribe .ag-est-p,.ag-demo[data-paso="1"] .ag-est-p{animation:ia-escr .9s ease-in-out infinite}
.ag-demo[data-paso="1"] .ag-est-p{background:#e0a100}
.ag-cab-ics{display:flex;align-items:center;gap:calc(var(--u)*1.2);opacity:.55}
.ag-cab-ics .ia-i{width:max(17px,calc(var(--u)*1.75));height:max(17px,calc(var(--u)*1.75))}
.ag-cab-ics .ia-i:last-child{stroke-width:3.2}
.ag-cuerpo{position:relative;min-height:0}

/* paso 1: la hoja que se lee. Cada ficha que llega enciende su parte; arriba, cuánto lleva */
.ag-apr{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:calc(var(--u)*1.2) calc(var(--u)*1.6);transition:opacity .5s,translate .7s cubic-bezier(.2,1,.3,1)}
.ag-demo:not([data-paso="1"]) .ag-apr{opacity:0;translate:0 calc(var(--u)*-2.5);pointer-events:none}
.ag-hoja{position:relative;width:min(100%,calc(var(--u)*47));padding:calc(var(--u)*1.4) calc(var(--u)*1.7) calc(var(--u)*1.6);border-radius:calc(var(--u)*1.2);background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.09),0 calc(var(--u)*1.2) calc(var(--u)*2.8) rgba(17,17,17,.16);rotate:-1.2deg;font-size:max(11px,calc(var(--u)*1.06));line-height:1.36}
.ag-hoja-cab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--u)*1.1)}
.ag-hoja-img{display:block;width:calc(var(--u)*7.6);aspect-ratio:1.6;border-radius:calc(var(--u)*.8);background:var(--tono);overflow:hidden;transition:background .6s}
.ag-hoja-img img,.ag-perfil-img img{display:block;width:100%;height:100%;object-fit:cover}
.ag-hoja-tt{display:grid;gap:.3em;min-width:0}
.ag-hoja-ey{font-size:max(9.5px,calc(var(--u)*.8));opacity:.55}
.ag-hoja-nom{font-weight:900;font-stretch:112%;font-size:1.55em;line-height:1;letter-spacing:-.01em}
.ag-hoja-pc{display:flex;align-items:baseline;gap:.08em;font-weight:900;font-stretch:118%;font-variant-numeric:tabular-nums;line-height:.9}
.ag-pc{font-size:2.7em;letter-spacing:-.03em}
.ag-pc-s{font-size:1.25em}
.ag-hoja-bar{display:block;height:max(4px,calc(var(--u)*.42));margin:calc(var(--u)*1.1) 0 calc(var(--u)*1);border-radius:99px;background:#eeeae0;overflow:hidden}
.ag-hoja-bi{display:block;height:100%;width:calc(var(--pc,0)*1%);border-radius:inherit;background:#111;transition:width .7s cubic-bezier(.2,1,.3,1)}
.ag-hoja-l{display:grid;gap:calc(var(--u)*.7)}
.ag-hs{display:grid;gap:.28em}
.ag-hs-t{display:flex;align-items:center;gap:.6em;font-size:max(9.5px,calc(var(--u)*.8));color:rgba(17,17,17,.55);transition:color .4s}
.ag-hs-ok{position:relative;flex:none;width:1.55em;height:1.55em;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.25);transition:background .35s,box-shadow .35s}
.ag-hs-ok::after{content:'';position:absolute;left:34%;top:20%;width:26%;height:45%;border:solid #111;border-width:0 .2em .2em 0;rotate:45deg;scale:0;transition:scale .4s cubic-bezier(.2,1.6,.4,1)}
.ag-hs.leida .ag-hs-t{color:#111}
.ag-hs.leida .ag-hs-ok{background:var(--k);box-shadow:none}
.ag-hs.leida .ag-hs-ok::after{scale:1}
.ag-lee{opacity:.3;background:linear-gradient(transparent 58%,rgba(241,223,92,.8) 0) 0 0/0% 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:opacity .35s,background-size .85s cubic-bezier(.6,0,.3,1)}
.ag-hs.leida .ag-lee{opacity:1;background-size:100% 100%}
.ag-hoja-sello{position:absolute;right:calc(var(--u)*-1.2);bottom:calc(var(--u)*-1.3);display:flex;align-items:center;gap:.5em;padding:.62em 1.05em .62em .8em;border-radius:99px;background:#111;color:var(--k);font-weight:800;font-size:1em;white-space:nowrap;rotate:-5deg;box-shadow:0 .6em 1.2em -.5em rgba(17,17,17,.5);opacity:0;scale:.6;transition:opacity .3s,scale .6s cubic-bezier(.2,1.6,.4,1)}
.ag-hoja-sello svg{width:1.15em;height:1.15em;fill:currentColor}
.ag-hoja.lista .ag-hoja-sello{opacity:1;scale:1}

/* la conversación: de abajo arriba; lo más viejo se va por arriba */
.ag-msgs{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(var(--u)*.6);padding:calc(var(--u)*1.1) calc(var(--u)*1.5) calc(var(--u)*.8);overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 calc(var(--u)*4.5));mask:linear-gradient(transparent,#000 calc(var(--u)*4.5))}
.ag-msgs [hidden]{display:none}
.ag-msgs .entra{animation:ag-entra .45s cubic-bezier(.2,1.3,.35,1) both}
@keyframes ag-entra{from{opacity:0;translate:0 40%;scale:.92}}
.ag-perfil{flex:none;align-self:center;margin-bottom:auto;display:flex;align-items:center;gap:calc(var(--u)*1.1);max-width:100%;padding:calc(var(--u)*.6) calc(var(--u)*1.5) calc(var(--u)*.6) calc(var(--u)*.6);border-radius:calc(var(--u)*1.5);background:#fff;box-shadow:0 1px 2px rgba(17,17,17,.1);transition:background .9s}
.ag-perfil-img{flex:none;display:block;width:calc(var(--u)*8.6);aspect-ratio:1.6;border-radius:calc(var(--u)*1);background:var(--tono);overflow:hidden;transition:background .6s}
.ag-perfil-tx{display:grid;gap:.28em;min-width:0;line-height:1.2}
.ag-perfil-n{font-weight:900;font-stretch:112%;font-size:max(14px,calc(var(--u)*1.45));letter-spacing:-.01em}
.ag-perfil-s{font-size:max(11px,calc(var(--u)*1.02));opacity:.62}
.ag-perfil-ia{display:flex;align-items:center;gap:.5em;margin-top:.15em;font-size:max(9px,calc(var(--u)*.76))}
.ag-perfil-ia svg{flex:none;width:1.35em;height:1.35em;padding:.2em;border-radius:50%;background:var(--k);fill:#111}
.ag-dia{flex:none;align-self:center;margin:calc(var(--u)*.2) 0;padding:.45em 1.05em;border-radius:99px;background:rgba(255,255,255,.75);box-shadow:0 1px 2px rgba(17,17,17,.08);font-size:10px;transition:background .9s}
.ag-m{flex:none;position:relative;max-width:min(72%,34em);padding:.56em .88em .6em;border-radius:1.1em;font-size:max(12.5px,calc(var(--u)*1.26));line-height:1.36;text-wrap:pretty;transition:background-color .9s,color .9s,box-shadow .9s}
.ag-m.b{align-self:flex-start;border-bottom-left-radius:.3em;background:#fff;box-shadow:0 1px 2px rgba(17,17,17,.12)}
.ag-m.u{align-self:flex-end;border-bottom-right-radius:.3em;background:#111;color:#f3eee4}
/* la hora de cada burbuja y el ✓✓ de leído */
.ag-h{float:right;display:inline-flex;align-items:center;gap:.25em;margin:.52em -.25em -.32em .85em;font:500 .68em/1 'DM Mono',monospace;opacity:.5}
.ag-m.u .ag-h{opacity:.72}
.ag-vv{display:block;width:1.5em;height:1em;color:var(--k);stroke-width:2.2}
/* mientras piensa: tres puntos en lugar del texto */
.ag-pts{display:none;gap:4px;padding:.3em 0}
.ag-pts i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35;animation:ia-pt 1s ease-in-out infinite}
.ag-pts i:nth-child(2){animation-delay:.15s}.ag-pts i:nth-child(3){animation-delay:.3s}
.ag-m.piensa{width:auto}
.ag-m.piensa .ag-pts{display:flex}
.ag-m.piensa > :not(.ag-pts){display:none}
.ag-horas{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.55em}
.ag-horas span{padding:.3em .8em;border-radius:99px;box-shadow:inset 0 0 0 1.5px currentColor;font-weight:700;font-size:.92em;font-variant-numeric:tabular-nums;white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s,scale .4s cubic-bezier(.2,1.6,.4,1)}
.ag-horas span.si{background:var(--k);color:#111;box-shadow:none;scale:1.06}
/* la reserva: una tarjeta con su día, su hora y «Añadir al calendario» */
.ag-cita{display:grid;width:min(78%,25em);padding:0;overflow:hidden}
.ag-cita-c{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.85em;padding:.75em .7em .75em .75em}
.ag-cita-cal{display:grid;grid-template-rows:auto 1fr;width:3.3em;height:3.5em;border-radius:.7em;background:#111;color:#f3eee4;overflow:hidden;text-align:center;line-height:1}
.ag-cita-dd{display:block;padding:.32em 0 .28em;background:var(--k);color:#111;font:500 .66em 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.ag-cita-dn{display:grid;place-items:center;font-weight:900;font-stretch:112%;font-size:1.45em}
.ag-cita-tx{display:grid;gap:.14em;min-width:0}
.ag-cita-ok{display:flex;align-items:center;gap:.35em;color:#0b6b4c;font-weight:800;font-size:.84em;transition:color .9s}
.ag-cita-ok .ia-i{flex:none;width:1.2em;height:1.2em;stroke-width:2.7}
.ag-cita-cu{font-weight:900;font-stretch:108%;font-size:1.22em;line-height:1.1;letter-spacing:-.01em}
.ag-cita-do{font-size:.86em;opacity:.62}
.ag-cita-img{display:block;width:3.7em;height:3.7em;object-fit:contain;margin:-.2em -.1em -.2em 0}
.ag-cita-bt{display:flex;align-items:center;justify-content:center;gap:.5em;padding:.62em .8em .66em;border-top:1px solid rgba(17,17,17,.08);font-weight:700;font-size:.9em;transition:border-color .9s}
.ag-cita-bt .ia-i{flex:none;width:1.25em;height:1.25em}
.ag-cita .ag-h{float:none;justify-self:end;margin:.15em 0 0}
/* «Pregúntale tú»: respuestas rápidas sobre la caja de escribir */
.ag-rap{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--u)*.55);padding:calc(var(--u)*.7) calc(var(--u)*1.3) 0}
.ag-rap-t{margin-right:auto;font-size:max(9.5px,calc(var(--u)*.8));opacity:.55}
.ag-rap-b{padding:.5em 1em;border:1.5px solid #111;border-radius:99px;background:#fff;color:#111;font:600 max(12px,calc(var(--u)*1.16)) 'Archivo',sans-serif;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,border-color .9s,scale .3s cubic-bezier(.2,1.4,.4,1)}
.ag-rap-b:hover{background:var(--k);color:#111}
.ag-rap-b:active{scale:.95}
.ag-rap-b:focus-visible{outline:2.5px solid #111;outline-offset:2px}
.ag-escribe{display:flex;align-items:center;gap:calc(var(--u)*.85);margin:calc(var(--u)*.7) calc(var(--u)*1.3) calc(var(--u)*1.1);padding:calc(var(--u)*.42) calc(var(--u)*.42) calc(var(--u)*.42) calc(var(--u)*1.05);border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.1);font-size:max(12px,calc(var(--u)*1.14));color:rgba(17,17,17,.45);transition:background .9s,color .3s,box-shadow .9s}
.ag-escribe-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.ag-escribe.lleno{color:#111}
.ag-escribe.lleno .ag-escribe-t::after{content:'';display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:currentColor;animation:ia-caret .8s steps(1) infinite}
.ag-es-i{flex:none;width:1.5em;height:1.5em;opacity:.5}
.ag-env{display:grid;place-items:center;flex:none;width:max(30px,calc(var(--u)*3.05));height:max(30px,calc(var(--u)*3.05));border-radius:50%;background:#111;color:var(--k);transition:background .9s,color .9s}
.ag-env .ia-i{width:52%;height:52%;stroke-width:2.3}
.ag-env.envia{animation:ia-envia .5s cubic-bezier(.2,1.6,.4,1)}
.ag-ej{grid-area:2/1;justify-self:end;align-self:start;z-index:4;margin:calc(var(--u)*-1.1) calc(var(--u)*-1.3) 0 0;rotate:7deg;font-size:11px;background:var(--k);color:#111}

/* --- de madrugada, el chat entero pasa a modo noche --- */
.ag-noche .ag-chat{background-color:#0e0f1d;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' fill='none' stroke='%23f3eee4' stroke-opacity='.06' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 13c.4 4.2 3.8 7.6 8 8-4.2.4-7.6 3.8-8 8-.4-4.2-3.8-7.6-8-8 4.2-.4 7.6-3.8 8-8z'/%3E%3Cpath d='M107 28a9.5 9.5 0 1 1-9 12.6 7.4 7.4 0 0 0 9-12.6z'/%3E%3Cpath d='M64 84h18a4 4 0 0 1 4 4v9a4 4 0 0 1-4 4h-9l-6 5v-5h-3a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4z'/%3E%3Cpath d='M127 104c-3-4-9-2-8 3 1 4 8 8 8 8s7-4 8-8c1-5-5-7-8-3z'/%3E%3Ccircle cx='30' cy='114' r='7.5'/%3E%3Cpath d='M30 110v4.2l2.6 1.6'/%3E%3Ccircle cx='122' cy='68' r='1.4'/%3E%3Ccircle cx='58' cy='44' r='1.4'/%3E%3Ccircle cx='94' cy='136' r='1.4'/%3E%3C/svg%3E");color:#f3eee4}
.ag-noche .ag-cab{background:#17182b;border-color:rgba(243,238,228,.08)}
.ag-noche .ag-av-ia{box-shadow:0 0 0 2px #17182b}
.ag-noche .ag-m.b{background:#24263d;box-shadow:none}
.ag-noche .ag-m.u{background:#f3eee4;color:#111}
.ag-noche .ag-m.u .ag-vv{color:#0b6b4c}
.ag-noche .ag-perfil{background:#1c1e32;box-shadow:none}
.ag-noche .ag-dia{background:rgba(243,238,228,.1);box-shadow:none}
.ag-noche .ag-cita-ok{color:#6fe0a8}
.ag-noche .ag-cita-cal{background:#f3eee4;color:#111}
.ag-noche .ag-cita-bt{border-color:rgba(243,238,228,.1)}
.ag-noche .ag-rap-b{background:#1c1e32;border-color:rgba(243,238,228,.4);color:#f3eee4}
.ag-noche .ag-rap-b:hover{background:var(--k);color:#111}
.ag-noche .ag-escribe{background:#1c1e32;box-shadow:none;color:rgba(243,238,228,.45)}
.ag-noche .ag-escribe.lleno{color:#f3eee4}
.ag-noche .ag-env{background:var(--k);color:#111}
.ag-noche .ag-est{color:#f3eee4}
.ag-noche.escribe .ag-est{color:#6fe0a8}

/* --- tu móvil: bloqueado y en silencio; de madrugada, en descanso; en el paso 5 se enciende con los avisos --- */
.ag-tel{grid-area:2/2;position:relative;align-self:start;justify-self:center;width:var(--tw);aspect-ratio:.47;container-type:size}
.ag-tel-c{position:absolute;inset:0;padding:3cqw;border-radius:15cqw;background:linear-gradient(155deg,#464a57 0%,#17181e 24%,#0b0c10 66%,#30323c 100%);box-shadow:inset 0 0 0 .5cqw rgba(255,255,255,.14),0 0 0 .4cqw #000,0 9cqw 18cqw rgba(17,17,17,.32)}
.ag-tel-c::before,.ag-tel-c::after{content:'';position:absolute;width:1.2%;border-radius:2px;background:#2c2e37}
.ag-tel-c::before{right:-.9%;top:14%;height:9%}
.ag-tel-c::after{left:-.9%;top:11%;height:4.5%;box-shadow:0 13cqw 0 #2c2e37,0 25cqw 0 #2c2e37}
.ag-tel-p{position:relative;height:100%;border-radius:12cqw;overflow:hidden;background:#000;color:#f6f2ea;font-family:'Archivo',sans-serif}
.ag-tel-fn{position:absolute;inset:0;background:radial-gradient(ellipse 90% 50% at 50% 100%,rgba(232,70,143,.35),transparent 70%),linear-gradient(180deg,#090c30 0%,#21196a 50%,#4b23b8 100%);opacity:.3;transition:opacity 1.2s .2s}
.ag-tel-isla{position:absolute;z-index:3;left:50%;top:2.6cqw;width:28cqw;height:8cqw;margin-left:-14cqw;border-radius:5cqw;background:#000;box-shadow:0 0 0 .3cqw #111}
.ag-tel-cand{position:absolute;z-index:2;left:50%;top:15cqw;width:5.4cqw;height:5.4cqw;margin-left:-2.7cqw;fill:none;stroke:currentColor;stroke-width:2;opacity:.45;transition:opacity 1s}
.ag-tel-hora{position:absolute;z-index:2;left:0;right:0;top:22cqw;text-align:center;font-weight:300;font-stretch:80%;font-size:27cqw;line-height:.95;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:rgba(246,242,234,.38);transition:color 1s .2s,font-weight 1s}
.ag-tel-modo{position:absolute;z-index:2;left:50%;top:52cqw;translate:-50% 0;display:flex;align-items:center;gap:1.4cqw;padding:1.3cqw 3cqw 1.3cqw 2.4cqw;border-radius:9cqw;background:rgba(255,255,255,.1);font-weight:700;font-size:max(9px,3.8cqw);white-space:nowrap;opacity:0;transition:opacity .8s}
.ag-tel-modo svg{width:3.9cqw;height:3.9cqw;fill:#f1df5c}
.ag-noche .ag-tel-modo{opacity:.8}
.ag-notis{position:absolute;z-index:2;left:4cqw;right:4cqw;top:64cqw;display:grid;gap:2.6cqw}
.ag-noti{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:3cqw;padding:3.2cqw 3.6cqw 3.4cqw 3.2cqw;border-radius:6.5cqw;background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);font-size:max(10px,5cqw);line-height:1.26;opacity:0;translate:0 -9cqw;scale:.94;transition:opacity .5s,translate .8s cubic-bezier(.2,1.3,.35,1),scale .8s cubic-bezier(.2,1.3,.35,1)}
.ag-noti-ic{display:grid;place-items:center;width:10cqw;height:10cqw;border-radius:2.8cqw;background:#f1df5c;color:#111}
.ag-noti-ic svg{width:58%;height:58%;fill:currentColor}
.ag-noti-r .ag-noti-ic{background:#2a1f78;color:#f1df5c}
.ag-noti-tx{display:grid;gap:.5cqw;min-width:0}
.ag-noti-cab{display:flex;align-items:baseline;justify-content:space-between;gap:2cqw;font-size:max(8.5px,3.6cqw);opacity:.68}
.ag-noti-h{flex:none;white-space:nowrap}
.ag-noti-t{display:flex;align-items:center;gap:1.4cqw;font-weight:800}
.ag-noti-p{flex:none;width:2.4cqw;height:2.4cqw;border-radius:50%;background:#3ddc84}
.ag-noti-m{opacity:.86}
.ag-tel-home{position:absolute;z-index:2;left:50%;bottom:2.3cqw;width:34cqw;height:1.3cqw;margin-left:-17cqw;border-radius:1cqw;background:currentColor;opacity:.35}
.ag-demo[data-paso="5"] .ag-tel-fn{opacity:1}
.ag-demo[data-paso="5"] .ag-tel-hora{color:#f6f2ea;font-weight:600}
.ag-demo[data-paso="5"] .ag-tel-cand{opacity:.9}
.ag-demo[data-paso="5"] .ag-tel-modo{opacity:0}
.ag-demo[data-paso="5"] .ag-noti{opacity:1;translate:0 0;scale:1;transition-delay:.75s}
.ag-demo[data-paso="5"] .ag-noti-r{transition-delay:1.35s}
/* el zumbido: tiembla y salen dos ondas */
.ag-onda{position:absolute;inset:-1.5%;border-radius:16cqw;box-shadow:0 0 0 .8cqw rgba(241,223,92,.65);opacity:0;pointer-events:none}
.ag-tel.zumba .ag-tel-c{animation:ia-zumba .55s cubic-bezier(.36,.07,.19,.97) 2}
.ag-tel.zumba .ag-onda{animation:ia-onda 1.2s cubic-bezier(.2,.7,.3,1) both}
.ag-tel.zumba .ag-onda + .ag-onda{animation-delay:.25s}
.ag-zz{position:absolute;z-index:4;left:50%;bottom:9%;translate:-50% 0;padding:.6em 1.05em;border-radius:99px;background:var(--k);color:#111;font-weight:800;font-size:max(12px,calc(var(--u)*1.2));white-space:nowrap;rotate:-6deg;box-shadow:0 .6em 1.2em -.4em rgba(0,0,0,.45);opacity:0;scale:.5;transition:opacity .4s,scale .7s cubic-bezier(.2,1.6,.4,1)}
.ag-demo[data-paso="4"] .ag-zz{opacity:1;scale:1;transition-delay:1s}
/* al cambiar de negocio, el chat parpadea un instante */
.ag-chat.dm-cambia,.ag-fis.dm-cambia{animation:dm-cambia .45s ease}
.ag-demo:not(.ve) .ag-rl-est::after,.ag-demo:not(.ve) .ag-pts i{animation-play-state:paused}

/* los casos reales son una foto fija: el ayudante abierto */
.caso.fijo .cs-pant{animation:none!important}

/* --- el chat, cuando es estrecho: las respuestas rápidas en una tira que se desliza --- */
@container (max-width:500px){
  .ag-rap{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-mask:linear-gradient(90deg,#000 86%,transparent);mask:linear-gradient(90deg,#000 86%,transparent)}
  .ag-rap::-webkit-scrollbar{display:none}
  .ag-rap-t{display:none}
  .ag-rap-b{flex:none}
  .ag-cab-ics{display:none}
}

@media (max-width:980px){
  /* móvil: arriba el título y el reloj pequeño (solo el paso de ahora con su nombre); debajo, el negocio y el chat */
  .ag-demo{--rl:clamp(78px,23vw,92px);--lf:12.5px;--S:auto}
  .ag-demo .sv-pin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:12px;padding:76px var(--pad) 12px}
  .ag-izq{grid-template-columns:minmax(0,1fr);align-content:start}
  .ag-izq .ojo{margin-bottom:8px}
  .ag-izq h2{margin-bottom:6px}
  .ag-rl{width:100%;height:calc(var(--rl) + 30px);margin-top:4px}
  .ag-rl-es{top:15px}
  .ag-rl-cu{display:none}
  .ag-rl-h{padding-bottom:0}
  .ag-pasos li{top:calc(15px + var(--rl)/2 + (var(--rl)/2 + 1.3em)*sin(var(--a)*.86));left:calc(var(--rl)/2 + (var(--rl)/2 + 1.3em)*cos(var(--a)*.86))}
  .ag-pasos .t{display:none}
  .ag-pasos .ahora .t{display:inline;font-size:13.5px}
  .ag-pasos button{padding:.2em .2em}
  .ag-pasos .ahora button{padding:.2em .95em .2em .2em}
  .ag-fis{display:none}
  .ag-demo .dm-esc{--tw:0px;height:auto;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px}
  .ag-negs{gap:6px}
  .ag-negs > .mono{display:none}
  .ag-neg{padding:.28em .8em .28em .28em;font-size:12.5px}
  .ag-der-t{display:none}
  .ag-chat{border-radius:18px}
  .ag-ej{margin:-9px -6px 0 0}
  .ag-hoja{width:100%;padding:14px 16px 16px}
  .ag-hoja-img{width:64px}
  /* el móvil del dueño se queda en sus avisos: bajan encima del chat, como en un móvil de verdad */
  .ag-tel{grid-area:2/1;align-self:stretch;justify-self:stretch;width:auto;aspect-ratio:auto;container-type:normal;z-index:5;pointer-events:none}
  .ag-tel-c{position:absolute;inset:auto 8px auto 8px;top:62px;padding:0;border-radius:0;background:none;box-shadow:none}
  .ag-tel-c::before,.ag-tel-c::after,.ag-tel-fn,.ag-tel-isla,.ag-tel-cand,.ag-tel-hora,.ag-tel-modo,.ag-tel-home,.ag-onda{display:none}
  .ag-tel-p{height:auto;border-radius:0;overflow:visible;background:none}
  .ag-notis{position:static;gap:8px}
  .ag-noti{gap:10px;padding:11px 13px 12px 11px;border-radius:18px;background:#1d1a4a;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 12px 26px -8px rgba(0,0,0,.6);font-size:13px;translate:0 -30px}
  .ag-noti-ic{width:34px;height:34px;border-radius:10px}
  .ag-noti-cab{font-size:10.5px}
  .ag-noti-t{gap:6px}
  .ag-noti-p{width:8px;height:8px}
  .ag-zz{display:none}
  .ag-tel.zumba .ag-tel-c{animation:none}
}

/* movimiento reducido: se ve el paso 5 entero, sin nada a medias */
@media (prefers-reduced-motion:reduce){
  .ag-demo *,.ag-demo *::before,.ag-demo *::after{transition:none!important;animation:none!important}
  .ag-vuela{display:none}
}


/* =====================================================================================================================
   «LA CONVERSACIÓN» (prefijo ia-): cada sección cuenta lo suyo con el formato de un chat o de un móvil
   2 · la noche (pantalla bloqueada) · 4 · los ajustes · 5 · así aprende (anillo) · 7 · pregúntanos (chat) · 8 · el último mensaje
   ===================================================================================================================== */
.ia-i{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ia-cab{display:grid;gap:calc(var(--u)*1.8);align-content:center;justify-items:start}
.ia-cab .ojo{opacity:.65}
.ia-h{font-weight:900;font-stretch:125%;font-size:min(calc(var(--u)*6),3.3vw);line-height:.84;letter-spacing:-.03em;text-transform:uppercase}
.ia-s{font-weight:600;font-size:max(15px,calc(var(--u)*1.6));line-height:1.3;max-width:15em;opacity:.8}
/* «escribiendo…»: tres puntos */
.ia-pts{display:inline-flex;align-items:center;gap:4px}
.ia-pt{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;animation:ia-pt 1s ease-in-out infinite}
.ia-pt:nth-child(2){animation-delay:.15s}.ia-pt:nth-child(3){animation-delay:.3s}
@keyframes ia-pt{0%,60%,100%{translate:0 0}30%{translate:0 -5px}}

/* ---------- 2 · por qué importa: «Mensaje sin contestar» (fijada, de noche) ---------- */
.ia-noche{height:calc(var(--alto)*3.2);background:#070917;color:var(--cream)}
.ia-noche .sv-pin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);grid-template-rows:minmax(0,1fr);align-items:center;justify-items:start;gap:calc(var(--u)*5);padding:calc(70px + var(--u)*.8) var(--pad) calc(var(--u)*1.8);background:radial-gradient(ellipse 40% 70% at 78% 48%,rgba(75,35,184,.45),transparent 72%),linear-gradient(180deg,#05071a 0%,#0b0f2e 58%,#151a49 100%)}
.ia-noche .sv-pin::before,.ia-noche .sv-pin::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
/* las estrellas de fuera; y el amanecer, que sube por abajo cuando el móvil llega a las 07:40 */
.ia-noche .sv-pin::before{background-image:radial-gradient(circle at 23% 31%,rgba(243,238,228,.8) 0 1px,transparent 1.7px),radial-gradient(circle at 71% 64%,rgba(243,238,228,.5) 0 .8px,transparent 1.4px),radial-gradient(circle at 42% 83%,rgba(243,238,228,.65) 0 1.2px,transparent 1.9px),radial-gradient(circle at 88% 12%,rgba(243,238,228,.35) 0 .7px,transparent 1.2px);background-size:211px 173px,157px 239px,293px 197px,127px 149px;-webkit-mask:linear-gradient(#000 15%,transparent 80%);mask:linear-gradient(#000 15%,transparent 80%);transition:opacity 1.6s}
.ia-noche .sv-pin::after{background:radial-gradient(ellipse 60% 55% at 76% 112%,rgba(255,159,67,.34),rgba(232,70,143,.16) 48%,transparent 76%);opacity:0;transition:opacity 1.8s}
.ia-noche:not([data-cielo="noche"]) .sv-pin::after{opacity:1}
.ia-noche[data-cielo="dia"] .sv-pin::before{opacity:.3}
/* la frase, palabra a palabra, y el contador de lo que lleva sin contestar */
.ia-nc-tx{display:grid;justify-items:start;gap:calc(var(--u)*2.3);min-width:0}
.ia-nc-tx .ojo{opacity:.6}
.ia-fr{max-width:17em;font-weight:800;font-stretch:112%;font-size:min(calc(var(--u)*6.4),4.2vw);line-height:1.06;letter-spacing:-.022em;text-wrap:pretty}
.ia-w{opacity:.16;transition:opacity .35s,color .35s}
.ia-w.on{opacity:1}
.ia-w.ia-k.on{color:var(--k)}
.ia-k:not(.ia-w){font-style:normal;color:var(--k)}
.ia-cuenta{display:flex;align-items:center;gap:calc(var(--u)*1.1);padding:calc(var(--u)*.8) calc(var(--u)*1.7) calc(var(--u)*.8) calc(var(--u)*1.3);border-radius:99px;background:rgba(243,238,228,.06);box-shadow:inset 0 0 0 1px rgba(243,238,228,.14);opacity:0;translate:0 calc(var(--u)*1.4);transition:opacity .5s,translate .8s cubic-bezier(.2,1,.3,1)}
.ia-noche:not([data-h="0"]) .ia-cuenta{opacity:1;translate:0 0}
.ia-cuenta-p{flex:none;width:9px;height:9px;border-radius:50%;background:var(--k);box-shadow:0 0 0 4px color-mix(in srgb,var(--k) 22%,transparent);animation:ia-late 1.6s ease-in-out infinite}
@keyframes ia-late{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--k) 0%,transparent)}}
.ia-noche[data-h="5"] .ia-cuenta-p{background:#ff6b6b;box-shadow:0 0 0 4px rgba(255,107,107,.2);animation:none}
.ia-cuenta-e{font-size:max(11px,calc(var(--u)*1));opacity:.7}
.ia-cuenta-n{font-weight:800;font-stretch:112%;font-size:max(17px,calc(var(--u)*2));line-height:1;font-variant-numeric:tabular-nums;color:var(--k);white-space:nowrap}

/* el móvil: el tamaño sale del alto que queda; dentro, todo se mide en anchos del móvil (cqw) */
.ia-tel{--th:min(calc(var(--alto) - 70px - var(--u)*2.6),calc(var(--u)*48));position:relative;justify-self:center;container-type:size;width:calc(var(--th)*.47);height:var(--th)}
.ia-tel-c{--pw:100cqw;position:absolute;inset:0;margin:auto;width:var(--pw);height:100cqh;container-type:size;padding:calc(var(--pw)*.03);border-radius:calc(var(--pw)*.15);background:linear-gradient(155deg,#464a57 0%,#17181e 24%,#0b0c10 66%,#30323c 100%);box-shadow:inset 0 0 0 calc(var(--pw)*.005) rgba(255,255,255,.14),0 0 0 calc(var(--pw)*.004) #000,0 calc(var(--pw)*.09) calc(var(--pw)*.2) rgba(0,0,0,.6),0 0 calc(var(--pw)*.34) rgba(75,35,184,.36)}
.ia-tel-c::before,.ia-tel-c::after{content:'';position:absolute;width:1.2%;border-radius:2px;background:#2c2e37}
.ia-tel-c::before{right:-.9%;top:14%;height:9%}
.ia-tel-c::after{left:-.9%;top:11%;height:4.5%;box-shadow:0 calc(var(--pw)*.13) 0 #2c2e37,0 calc(var(--pw)*.25) 0 #2c2e37}
.ia-pant{position:relative;height:100%;border-radius:12cqw;overflow:hidden;background:#0b0f2e;color:#f6f2ea;font-family:'Archivo',sans-serif;transition:color 1.2s}
.ia-noche[data-cielo="dia"] .ia-pant{color:#111}
/* el fondo de pantalla: un paisaje que pasa de la noche al amanecer y a la mañana */
.ia-fn,.ia-fn-n,.ia-fn-a,.ia-fn-d,.ia-estrellas{position:absolute;inset:0}
.ia-fn-n{background:linear-gradient(180deg,#090c30 0%,#21196a 46%,#4b23b8 78%,#6d3fd0 100%)}
.ia-fn-a{background:linear-gradient(180deg,#1c1d5c 0%,#6b3a91 34%,#e8468f 62%,#ffb340 88%,#ffd36b 100%);opacity:0;transition:opacity 1.8s}
.ia-fn-d{background:linear-gradient(180deg,#f1df5c 0%,#f7e9a6 42%,#f3eee4 100%);opacity:0;transition:opacity 1.8s}
.ia-noche:not([data-cielo="noche"]) .ia-fn-a,.ia-noche[data-cielo="dia"] .ia-fn-d{opacity:1}
.ia-estrellas{background-image:radial-gradient(circle at 30% 40%,#fff 0 .32cqw,transparent .55cqw),radial-gradient(circle at 70% 20%,rgba(255,255,255,.55) 0 .28cqw,transparent .5cqw),radial-gradient(circle at 15% 75%,rgba(255,255,255,.7) 0 .25cqw,transparent .45cqw);background-size:27cqw 23cqw,41cqw 33cqw,33cqw 47cqw;-webkit-mask:linear-gradient(#000 25%,transparent 72%);mask:linear-gradient(#000 25%,transparent 72%);transition:opacity 1.5s}
.ia-estrellas::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 60% 55%,#fff 0 .42cqw,transparent .75cqw);background-size:53cqw 37cqw;animation:ia-titila 3.2s ease-in-out infinite}
@keyframes ia-titila{50%{opacity:.15}}
.ia-noche:not([data-cielo="noche"]) .ia-estrellas{opacity:0}
.ia-luna,.ia-sol{position:absolute;border-radius:50%}
.ia-luna{right:16cqw;bottom:37%;width:13cqw;height:13cqw;box-shadow:inset -3.6cqw -1.4cqw 0 0 #f1df5c;filter:drop-shadow(0 0 3cqw rgba(241,223,92,.5));rotate:-14deg;transition:opacity 1.4s,translate 1.8s cubic-bezier(.6,0,.3,1)}
.ia-noche:not([data-cielo="noche"]) .ia-luna{opacity:0;translate:0 -18cqw}
.ia-sol{left:20cqw;bottom:17%;width:21cqw;height:21cqw;background:radial-gradient(circle,#fff7d1 0 28%,#ffd24a 62%,#ffbd21);box-shadow:0 0 7cqw rgba(255,189,33,.65),0 0 0 4cqw rgba(255,210,74,.16),0 0 0 9cqw rgba(255,210,74,.08);opacity:0;translate:0 26cqw;transition:translate 2.4s cubic-bezier(.2,1,.3,1),scale 2.4s cubic-bezier(.2,1,.3,1),opacity 1.2s}
.ia-noche[data-cielo="alba"] .ia-sol{opacity:1;translate:0 6cqw}
.ia-noche[data-cielo="dia"] .ia-sol{opacity:1;translate:38cqw -27cqw;scale:.8}
.ia-colinas{position:absolute;left:0;right:0;bottom:0;width:100%;height:31%}
.ia-co1{fill:#2a1f78;transition:fill 1.8s}
.ia-co2{fill:#120d45;transition:fill 1.8s}
.ia-noche[data-cielo="alba"] .ia-co1{fill:#7a2f72}
.ia-noche[data-cielo="alba"] .ia-co2{fill:#3a1747}
.ia-noche[data-cielo="dia"] .ia-co1{fill:#2f9a6a}
.ia-noche[data-cielo="dia"] .ia-co2{fill:#0b6b4c}
/* lo de arriba: isla, barra de estado, candado, día, hora y el modo descanso */
.ia-isla{position:absolute;z-index:3;left:50%;top:2.6cqw;width:28cqw;height:8cqw;margin-left:-14cqw;border-radius:5cqw;background:#000}
.ia-barra{position:absolute;z-index:3;right:7.5cqw;top:4.2cqw;display:flex;align-items:center;gap:1.5cqw;height:3.6cqw}
.ia-barra-i{display:block;height:3cqw;width:auto;fill:currentColor}
.ia-bat{position:relative;width:6.6cqw;height:3.2cqw;border-radius:1cqw;box-shadow:inset 0 0 0 .32cqw currentColor}
.ia-bat::after{content:'';position:absolute;right:-1cqw;top:1.05cqw;width:.6cqw;height:1.1cqw;border-radius:0 .4cqw .4cqw 0;background:currentColor;opacity:.6}
.ia-bat-n{position:absolute;left:.7cqw;top:.7cqw;bottom:.7cqw;width:calc(5.2cqw*var(--bat,.82));border-radius:.4cqw;background:currentColor}
.ia-candado{position:absolute;z-index:2;left:50%;top:14.5cqw;width:5cqw;height:5cqw;margin-left:-2.5cqw;fill:none;stroke:currentColor;stroke-width:2;opacity:.9}
.ia-dia{position:absolute;z-index:2;left:0;right:0;top:21.5cqw;text-align:center;font-weight:600;font-size:5.2cqw;letter-spacing:.01em}
.ia-hora{position:absolute;z-index:2;left:0;right:0;top:27cqw;text-align:center;font-weight:600;font-stretch:80%;font-size:27cqw;line-height:.95;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.ia-modo{position:absolute;z-index:2;left:50%;top:54.5cqw;translate:-50% 0;display:flex;align-items:center;gap:1.4cqw;padding:1.3cqw 3cqw 1.3cqw 2.4cqw;border-radius:9cqw;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-weight:700;font-size:3.7cqw;white-space:nowrap;transition:opacity .8s}
.ia-modo-i{width:3.9cqw;height:3.9cqw;fill:currentColor}
.ia-noche:not([data-cielo="noche"]) .ia-modo{opacity:0}
/* los avisos: el nuevo entra arriba y empuja al de antes */
.ia-notis{position:absolute;z-index:2;left:4cqw;right:4cqw;top:66.5cqw;display:grid;grid-template-rows:0fr auto;transition:grid-template-rows .8s cubic-bezier(.2,1,.3,1)}
.ia-noche[data-h="5"] .ia-notis{grid-template-rows:1fr auto}
.ia-noti-w{min-height:0;overflow:hidden}
.ia-noti{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:3cqw;padding:3.2cqw 3.8cqw 3.4cqw 3.2cqw;border-radius:6.5cqw;background:rgba(18,16,48,.5);box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.09);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);font-size:5cqw;line-height:1.28;opacity:0;translate:0 -8cqw;scale:.94;transition:background 1.2s,box-shadow 1.2s,opacity .5s,translate .8s cubic-bezier(.2,1.3,.35,1),scale .8s cubic-bezier(.2,1.3,.35,1)}
.ia-n2{margin-bottom:2.4cqw}
.ia-noche:not([data-h="0"]) .ia-n1,.ia-noche[data-h="5"] .ia-n2{opacity:1;translate:0 0;scale:1}
.ia-noche[data-cielo="dia"] .ia-noti{background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 .3cqw rgba(17,17,17,.05)}
.ia-app{display:grid;place-items:center;width:10cqw;height:10cqw;border-radius:2.6cqw;background:#f1df5c;color:#111}
.ia-app-i{width:6.2cqw;height:6.2cqw;fill:currentColor}
.ia-noti-tx{display:grid;gap:.5cqw;min-width:0}
.ia-noti-cab{display:flex;align-items:baseline;justify-content:space-between;gap:2cqw}
.ia-noti-de{font-weight:800}
.ia-noti-h{flex:none;font-size:3.6cqw;opacity:.62;white-space:nowrap}
/* lo de abajo: linterna, cámara y la barrita */
.ia-bot{position:absolute;z-index:2;left:8cqw;right:8cqw;bottom:7.5cqw;display:flex;justify-content:space-between}
.ia-bot-b{display:grid;place-items:center;width:12.5cqw;height:12.5cqw;border-radius:50%;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff}
.ia-bot-b .ia-i{width:5.6cqw;height:5.6cqw;stroke-width:1.7}
.ia-home{position:absolute;z-index:2;left:50%;bottom:2.3cqw;width:34cqw;height:1.3cqw;margin-left:-17cqw;border-radius:1cqw;background:currentColor;opacity:.85}
/* de noche la pantalla está apagada a medias; se enciende un momento cuando llega un mensaje */
.ia-oscuro{position:absolute;inset:0;z-index:6;background:#000;opacity:.26;pointer-events:none;transition:opacity 1.4s}
.ia-noche:not([data-cielo="noche"]) .ia-oscuro,.ia-tel.luz .ia-oscuro{opacity:0;transition-duration:.3s}
/* el zumbido: el móvil tiembla y salen dos ondas */
.ia-onda{position:absolute;inset:-1%;border-radius:16cqw;box-shadow:0 0 0 .7cqw rgba(241,223,92,.6);opacity:0;pointer-events:none}
.ia-tel.zumba .ia-tel-c{animation:ia-zumba .55s cubic-bezier(.36,.07,.19,.97) 2}
.ia-tel.zumba .ia-onda{animation:ia-onda 1.2s cubic-bezier(.2,.7,.3,1) both}
.ia-tel.zumba .ia-onda + .ia-onda{animation-delay:.25s}
@keyframes ia-zumba{10%,90%{translate:-.5% 0}20%,80%{translate:1% 0}30%,50%,70%{translate:-1.5% 0}40%,60%{translate:1.5% 0}}
@keyframes ia-onda{0%{opacity:.9;scale:1}100%{opacity:0;scale:1.07 1.035}}
.ia-noche:not(.ve) .ia-estrellas::after,.ia-noche:not(.ve) .ia-cuenta-p{animation-play-state:paused}

/* ---------- 4 · qué incluye: «Lo que lleva tu ayudante» (sus ajustes, sobre tinta) ---------- */
.ia-inc{min-height:var(--alto);background:var(--ink);color:var(--cream);display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,2fr);align-items:center;gap:calc(var(--u)*4);padding:calc(70px + var(--u)*1.4) var(--pad) calc(var(--u)*3)}
.ia-inc > .ct{z-index:-1}
.ia-aj{display:grid;grid-template-rows:auto minmax(0,1fr);height:calc(var(--alto) - 70px - var(--u)*4.4);border-radius:calc(var(--u)*2.2);background:#18181d;box-shadow:inset 0 0 0 1px rgba(243,238,228,.1),0 calc(var(--u)*2.4) calc(var(--u)*5) rgba(0,0,0,.5);overflow:hidden;opacity:0;translate:0 calc(var(--u)*4);transition:opacity .7s,translate 1s cubic-bezier(.2,1,.3,1)}
.ia-inc.vis .ia-aj{opacity:1;translate:0 0}
.ia-aj-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:calc(var(--u)*1.5);padding:calc(var(--u)*1) calc(var(--u)*1.8);background:#1f1f25;border-bottom:1px solid rgba(243,238,228,.08)}
.ia-aj-vuelve{display:flex;align-items:center;gap:2px;color:var(--k);font-weight:600;font-size:max(13px,calc(var(--u)*1.3))}
.ia-aj-vuelve .ia-i{width:1.35em;height:1.35em;stroke-width:2.2}
.ia-aj-quien{display:flex;align-items:center;gap:calc(var(--u)*.9)}
.ia-aj-av{display:grid;place-items:center;flex:none;width:max(30px,calc(var(--u)*3.1));height:max(30px,calc(var(--u)*3.1));border-radius:50%;background:var(--k);color:var(--ink)}
.ia-es{width:52%;height:52%;fill:currentColor;stroke:none}
.ia-aj-qt{display:grid;line-height:1.15}
.ia-aj-nom{font-weight:800;font-size:max(14px,calc(var(--u)*1.45))}
.ia-aj-act{font-size:max(10px,calc(var(--u)*.88));opacity:.6}
.ia-aj-bar .ej-tag{justify-self:end;font-size:11px;color:var(--k)}
.ia-aj-l{list-style:none;margin:0;padding:0 calc(var(--u)*1.8);display:grid;grid-template-rows:repeat(6,minmax(0,1fr))}
.ia-aj-f{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr) auto;align-items:center;gap:calc(var(--u)*1.6);min-height:0;border-top:1px solid rgba(243,238,228,.07)}
.ia-aj-f:first-child{border-top:0}
@media (hover:hover){.ia-aj-f{transition:background .3s}.ia-aj-f:hover{background:rgba(243,238,228,.025)}}
.ia-ico{display:grid;place-items:center;width:max(34px,calc(var(--u)*3.6));height:max(34px,calc(var(--u)*3.6));border-radius:28%;background:#303037;color:rgba(243,238,228,.55);transition:background .5s,color .5s}
.ia-ico .ia-i{width:56%;height:56%}
.ia-aj-f.on .ia-ico{background:var(--ic);color:var(--it,#f3eee4);animation:ia-ico .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes ia-ico{40%{scale:1.16}}
.ia-aj-tx{display:grid;gap:3px;min-width:0;transition:opacity .5s}
.ia-aj-f:not(.on) .ia-aj-tx{opacity:.5}
.ia-aj-t{font-weight:800;font-stretch:108%;font-size:max(14px,calc(var(--u)*1.6));line-height:1.1}
.ia-aj-d{font-weight:500;font-size:max(12.5px,calc(var(--u)*1.2));line-height:1.3;opacity:.62}
/* el interruptor: se enciende solo; si lo apagas, vuelve («Viene incluido») */
.ia-sw{--sw:max(44px,calc(var(--u)*4.6));--sh:max(26px,calc(var(--u)*2.7));all:unset;position:relative;box-sizing:border-box;flex:none;width:var(--sw);height:var(--sh);border-radius:99px;background:#3a3a43;cursor:pointer;transition:background .35s}
.ia-sw:focus-visible{outline:2.5px solid var(--k);outline-offset:3px}
.ia-sw-b{position:absolute;left:3px;top:3px;width:calc(var(--sh) - 6px);height:calc(var(--sh) - 6px);border-radius:50%;background:#f3eee4;box-shadow:0 2px 5px rgba(0,0,0,.4);transition:translate .45s cubic-bezier(.2,1.3,.35,1),background .35s}
.ia-aj-f.on .ia-sw{background:var(--k)}
.ia-aj-f.on .ia-sw-b{translate:calc(var(--sw) - var(--sh)) 0;background:var(--ink)}
.ia-aj-f.on .ia-sw.tira{background:#3a3a43}
.ia-aj-f.on .ia-sw.tira .ia-sw-b{translate:0 0;background:#f3eee4}
/* si lo intentas apagar: rebota y su muestra lo dice (en su sitio, sin taparle nada a nadie) */
.ia-mu::after{content:'Viene incluido: siempre encendido';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--k);white-space:nowrap;opacity:0;translate:0 35%;transition:opacity .3s,translate .5s cubic-bezier(.2,1.3,.35,1);pointer-events:none}
.ia-mu > *{transition:opacity .3s}
.ia-aj-f.dice .ia-mu > *{opacity:0!important}
.ia-aj-f.dice .ia-mu::after{opacity:1;translate:0 0}
/* la muestra viva de cada fila: se abre desde el interruptor */
.ia-mu{position:relative;container-type:inline-size;display:flex;align-items:center;gap:calc(var(--u)*1);min-width:0;height:max(46px,calc(var(--u)*4.9));padding:0 calc(var(--u)*1.1);border-radius:calc(var(--u)*1.3);background:rgba(243,238,228,.045);box-shadow:inset 0 0 0 1px rgba(243,238,228,.07);font-size:max(11.5px,min(calc(var(--u)*1.15),.9vw));line-height:1.2;overflow:hidden;clip-path:inset(0 0 0 100% round calc(var(--u)*1.3));transition:clip-path .85s cubic-bezier(.7,0,.2,1)}
.ia-aj-f.on .ia-mu{clip-path:inset(0 0 0 0 round calc(var(--u)*1.3))}
.ia-aj-f:not(.on) .ia-mu *,.ia-inc:not(.ve) .ia-mu *{animation-play-state:paused}
/* 1 · en tu web y WhatsApp: llegan por los dos sitios y los dos se contestan */
.ia-cn{display:flex;align-items:center;gap:.6em;flex:1 1 0;min-width:0;padding:.42em .75em .42em .42em;border-radius:99px;background:#25252c;box-shadow:inset 0 0 0 1px rgba(243,238,228,.06);opacity:0;animation:ia-cn 6s cubic-bezier(.2,1,.3,1) infinite}
.ia-cn + .ia-cn{animation-delay:1.1s}
.ia-cn-ic{display:grid;place-items:center;flex:none;width:2.3em;height:2.3em;border-radius:50%;background:#f3eee4;color:#111}
.ia-cn-ic.ia-wa{background:#0b6b4c;color:#f3eee4}
.ia-cn-ic .ia-i{width:58%;height:58%}
.ia-cn-tx{display:grid;min-width:0;white-space:nowrap}
.ia-cn-de{font-size:max(9px,calc(var(--u)*.78));letter-spacing:.08em;opacity:.55}
.ia-cn-msg{font-weight:600}
.ia-vv{flex:none;width:1.45em;height:1em;margin-left:auto;color:rgba(243,238,228,.3);stroke-width:2;animation:ia-vv 6s infinite}
.ia-cn + .ia-cn .ia-vv{animation-delay:1.1s}
@keyframes ia-cn{0%{opacity:0;translate:0 45%}7%,86%{opacity:1;translate:0 0}94%,100%{opacity:0;translate:0 0}}
@keyframes ia-vv{0%,24%{color:rgba(243,238,228,.3)}30%,100%{color:#f1df5c}}
/* 2 · 24 horas: el reloj no para y todos los días se encienden */
.ia-rl{position:relative;flex:none;width:2.9em;height:2.9em;border-radius:50%;background:#f3eee4;box-shadow:0 0 0 .22em #4b23b8}
.ia-rl-h,.ia-rl-m{position:absolute;left:50%;bottom:50%;width:2px;margin-left:-1px;border-radius:2px;background:#111;transform-origin:50% 100%}
.ia-rl-h{height:25%;animation:ia-gira 12s linear infinite}
.ia-rl-m{height:37%;animation:ia-gira 1s linear infinite}
.ia-rl-c{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#c8102e}
@keyframes ia-gira{to{rotate:360deg}}
.ia-rl-tx{display:grid;gap:3px;min-width:0}
.ia-rl-hs,.ia-rl-es{display:grid}
.ia-rl-t{grid-area:1/1;font-weight:800;font-stretch:112%;font-size:1.45em;line-height:1;font-variant-numeric:tabular-nums}
.ia-rl-e{grid-area:1/1;font-size:max(9px,calc(var(--u)*.78));letter-spacing:.08em;color:rgba(243,238,228,.55);white-space:nowrap}
.ia-rl-t,.ia-rl-e{opacity:0;animation:ia-rota 6s infinite}
.ia-rl-t:nth-child(2),.ia-rl-e:nth-child(2){animation-delay:1.5s}
.ia-rl-t:nth-child(3),.ia-rl-e:nth-child(3){animation-delay:3s}
.ia-rl-t:nth-child(4),.ia-rl-e:nth-child(4){animation-delay:4.5s}
@keyframes ia-rota{0%{opacity:0;translate:0 40%}4%,22%{opacity:1;translate:0 0}26%,100%{opacity:0;translate:0 -40%}}
.ia-dias{display:flex;gap:3px;margin-left:auto}
.ia-dd{display:grid;place-items:center;width:1.95em;height:1.95em;border-radius:50%;background:rgba(243,238,228,.08);font-style:normal;font-weight:700;font-size:.92em;animation:ia-dd 6s infinite}
.ia-dd:nth-child(2){animation-delay:.1s}.ia-dd:nth-child(3){animation-delay:.2s}.ia-dd:nth-child(4){animation-delay:.3s}.ia-dd:nth-child(5){animation-delay:.4s}.ia-dd:nth-child(6){animation-delay:.5s}.ia-dd:nth-child(7){animation-delay:.6s}
@keyframes ia-dd{0%,3%{background:rgba(243,238,228,.08);color:inherit}8%,94%{background:#4b23b8;color:#f3eee4}100%{background:rgba(243,238,228,.08)}}
.ia-fest{flex:none;padding:.42em .75em;border-radius:99px;box-shadow:inset 0 0 0 1.5px #8d72ff;color:#d4c9ff;font-weight:700;font-size:.92em;white-space:nowrap}
/* 3 · reserva por ti: elige una hora libre y la apunta */
.ia-hs{display:flex;gap:5px}
.ia-hh{padding:.42em .7em;border-radius:99px;box-shadow:inset 0 0 0 1.5px rgba(243,238,228,.28);font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ia-hh.ia-si{animation:ia-hsi 5.5s infinite}
@keyframes ia-hsi{0%,12%{background:transparent;color:inherit;scale:1}17%{scale:1.14}22%,88%{background:#c8102e;color:#fff;box-shadow:inset 0 0 0 1.5px #c8102e;scale:1}95%,100%{background:transparent}}
.ia-flu{position:relative;flex:1 1 auto;min-width:2em;height:2px;margin-right:4px;background:linear-gradient(90deg,rgba(243,238,228,.34) 55%,transparent 0) 0 0/10px 2px repeat-x;animation:ia-flu .8s linear infinite}
.ia-flu::after{content:'';position:absolute;right:-1px;top:50%;width:7px;height:7px;margin-top:-4.5px;border-top:2px solid rgba(243,238,228,.45);border-right:2px solid rgba(243,238,228,.45);rotate:45deg}
@keyframes ia-flu{to{background-position:10px 0}}
.ia-cita{display:flex;align-items:center;gap:.6em;min-width:0;padding:.32em .75em .32em .32em;border-radius:.85em;background:#f3eee4;color:#111;opacity:0;animation:ia-cita 5.5s cubic-bezier(.2,1.2,.35,1) infinite}
@keyframes ia-cita{0%,26%{opacity:0;translate:-14% 0;scale:.94}34%,88%{opacity:1;translate:0 0;scale:1}95%,100%{opacity:0}}
.ia-cita-ic{display:grid;place-items:center;align-content:center;flex:none;width:2.5em;height:2.5em;border-radius:.55em;background:#c8102e;color:#fff;line-height:1}
.ia-cita-d{font-size:max(8px,calc(var(--u)*.68));letter-spacing:.06em}
.ia-cita-n{font-weight:900;font-size:1.05em}
.ia-cita-tx{display:grid;line-height:1.2;white-space:nowrap}
.ia-cita-t{font-weight:800}
.ia-cita-s{font-size:.88em;opacity:.65}
.ia-cita-ok{flex:none;width:1.45em;height:1.45em;padding:.24em;border-radius:50%;background:#0b6b4c;color:#fff;stroke-width:2.6;scale:0;animation:ia-ok 5.5s cubic-bezier(.2,1.6,.4,1) infinite}
@keyframes ia-ok{0%,38%{scale:0}46%,88%{scale:1}95%,100%{scale:0}}
/* 4 · habla como tu negocio: hola, bon dia, hello */
.ia-ids{display:flex;flex:none;gap:4px;margin-left:auto}
.ia-id{padding:.38em .55em;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(243,238,228,.22);font:500 max(10px,calc(var(--u)*.9)) 'DM Mono',monospace;font-style:normal;letter-spacing:.06em;animation:ia-id 6s infinite}
.ia-id:nth-child(2){animation-delay:2s}.ia-id:nth-child(3){animation-delay:4s}
@keyframes ia-id{0%,31%{background:#e8468f;color:#fff;box-shadow:inset 0 0 0 1px #e8468f}35%,100%{background:transparent;color:inherit}}
.ia-bo{display:grid;flex:0 1 auto;min-width:0}
.ia-bo-t{grid-area:1/1;justify-self:start;padding:.55em .95em;border-radius:1.15em 1.15em 1.15em .3em;background:#f3eee4;color:#111;font-weight:600;white-space:nowrap;opacity:0;animation:ia-bo 6s cubic-bezier(.2,1,.3,1) infinite}
.ia-bo-t:nth-child(2){animation-delay:2s}.ia-bo-t:nth-child(3){animation-delay:4s}
@keyframes ia-bo{0%{opacity:0;translate:0 35%;scale:.94}5%,29%{opacity:1;translate:0 0;scale:1}34%,100%{opacity:0;translate:0 -25%;scale:1}}
/* 5 · no se inventa nada: el precio inventado se tacha y contesta lo que sí sabe */
.ia-nd-x{flex:none;padding:.55em .95em;border-radius:1.15em 1.15em 1.15em .3em;box-shadow:inset 0 0 0 1.5px rgba(243,238,228,.32);white-space:nowrap;animation:ia-ndx 5.5s infinite}
.ia-nd-pr{position:relative;font-weight:800}
.ia-nd-pr::after{content:'';position:absolute;left:-.2em;right:-.2em;top:55%;height:2px;margin-top:-1px;border-radius:2px;background:#ff5a6e;scale:0 1;transform-origin:0 50%;animation:ia-tacha 5.5s cubic-bezier(.7,0,.2,1) infinite}
@keyframes ia-tacha{0%,20%{scale:0 1}30%,90%{scale:1 1}97%,100%{scale:0 1}}
@keyframes ia-ndx{0%,30%{opacity:1}38%,90%{opacity:.4}97%,100%{opacity:1}}
.ia-nd-ok{display:flex;align-items:center;gap:.45em;min-width:0;padding:.5em .95em .5em .7em;border-radius:1.15em 1.15em .3em 1.15em;background:var(--k);color:var(--ink);font-weight:700;white-space:nowrap;opacity:0;animation:ia-ndok 5.5s cubic-bezier(.2,1.3,.35,1) infinite}
.ia-nd-ok .ia-i{flex:none;width:1.25em;height:1.25em;stroke-width:2}
@keyframes ia-ndok{0%,36%{opacity:0;translate:0 35%;scale:.92}44%,90%{opacity:1;translate:0 0;scale:1}97%,100%{opacity:0}}
/* 6 · te pasa los contactos: baja el aviso y suena */
.ia-avn{display:flex;align-items:center;gap:.7em;width:100%;min-width:0;padding:.4em .45em;border-radius:.95em;background:#f3eee4;color:#111;box-shadow:0 .4em 1em rgba(0,0,0,.35);animation:ia-avn 4.8s cubic-bezier(.2,1.2,.35,1) infinite}
.ia-avn-ic{display:grid;place-items:center;flex:none;width:2.35em;height:2.35em;border-radius:.6em;background:#ffbd21;color:#111}
.ia-avn-ic .ia-i{width:60%;height:60%;transform-origin:50% 15%;animation:ia-suena 4.8s infinite}
.ia-avn-tx{display:grid;min-width:0;line-height:1.2;white-space:nowrap}
.ia-avn-t{font-weight:800}
.ia-avn-s{font-size:.88em;opacity:.6}
.ia-avn-bt{flex:none;margin-left:auto;padding:.45em .95em;border-radius:99px;background:#111;color:#f1df5c;font-weight:700}
@keyframes ia-avn{0%{opacity:0;translate:0 -120%}9%,84%{opacity:1;translate:0 0}93%,100%{opacity:0;translate:0 -40%}}
@keyframes ia-suena{0%,12%,40%,100%{rotate:0deg}15%,23%,31%{rotate:-18deg}19%,27%,35%{rotate:18deg}}
/* cuando la muestra es estrecha, se queda con lo esencial (los cortes van en em: crecen con su letra) */
@container (max-width:37em){
  .ia-mu-nada .ia-flu{display:none}
  .ia-nd-ok{position:absolute;left:calc(var(--u)*1.1)}
  .ia-nd-x{animation-name:ia-ndx2}
  @keyframes ia-ndx2{0%,30%{opacity:1}38%,92%{opacity:0}100%{opacity:1}}
}
@container (max-width:33em){ .ia-fest{display:none} }
@container (max-width:31em){ .ia-hh:not(.ia-si){display:none} .ia-mu-agenda .ia-flu{min-width:1.2em} }
/* las lenguas, de una en una */
@container (max-width:27em){
  .ia-ids{display:grid}
  .ia-id{grid-area:1/1;opacity:0;animation-name:ia-id2}
  @keyframes ia-id2{0%,31%{opacity:1;background:#e8468f;color:#fff;box-shadow:inset 0 0 0 1px #e8468f}35%,100%{opacity:0}}
}
@container (max-width:26em){ .ia-dias{display:none} .ia-fest{display:block;margin-left:auto} }
@container (max-width:25em){ .ia-cn-msg{display:none} }
@container (max-width:24em){ .ia-avn-bt{display:none} }

/* ---------- 5 · cómo trabajamos: «Así aprende» (fijada, negro: el anillo se llena al bajar) ---------- */
.ia-pr{height:calc(var(--alto)*4.2);background:#050507;color:var(--cream)}
.ia-pr .sv-pin{--an:min(calc(var(--alto) - 70px - var(--u)*3.4),40vw);display:grid;grid-template-columns:minmax(0,1fr) var(--an) minmax(0,1fr);align-items:center;gap:calc(var(--u)*4);padding:calc(70px + var(--u)*1.2) var(--pad) calc(var(--u)*2.2)}
.ia-pr .sv-pin::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% calc(50% + 30px),rgba(241,223,92,.2),transparent 40%);opacity:calc(.3 + var(--n,0)*.17);transition:opacity .8s}
.ia-an{position:relative;width:var(--an);height:var(--an);container-type:size}
.ia-an-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ia-an-tk{fill:none;stroke:rgba(243,238,228,.2);stroke-width:.55;stroke-linecap:round}
.ia-an-tkm{fill:none;stroke:rgba(243,238,228,.55);stroke-width:.9;stroke-linecap:round}
.ia-an-tr{fill:none;stroke:rgba(243,238,228,.085);stroke-width:11}
.ia-an-f{fill:none;stroke:var(--k);stroke-width:11;filter:drop-shadow(0 0 2px rgba(241,223,92,.5))}
.ia-an-n{font-family:'DM Mono',monospace;font-weight:500;font-size:5px;letter-spacing:.04em;fill:rgba(243,238,228,.5);text-anchor:middle;dominant-baseline:central;transition:fill .35s}
.ia-an-n.on{fill:#111}
.ia-an-dot{fill:#fff8d6;filter:drop-shadow(0 0 2.5px rgba(241,223,92,.95));transition:opacity .3s}
/* dentro del anillo: el ✦ (crece y gira un cuarto con cada paso), y el paso de ahora */
.ia-an-c{position:absolute;inset:15%;display:grid;justify-items:center;align-content:center;gap:2.4cqw;text-align:center}
.ia-an-es{width:20cqw;height:20cqw;scale:calc(.42 + var(--n,0)*.145);rotate:calc(var(--n,0)*90deg);filter:drop-shadow(0 0 calc(1.5cqw + var(--n,0)*.9cqw) rgba(241,223,92,.55));transition:scale .9s cubic-bezier(.2,1.5,.4,1),rotate .9s cubic-bezier(.2,1.2,.3,1),filter .9s}
.ia-pr.fin .ia-an-es{animation:ia-brilla 2.4s ease-in-out infinite}
/* con cada paso, una onda sale del ✦ */
.ia-an-esw{position:relative;display:grid;place-items:center}
.ia-an-onda{position:absolute;left:50%;top:50%;width:20cqw;height:20cqw;margin:-10cqw 0 0 -10cqw;border-radius:50%;box-shadow:0 0 0 .5cqw rgba(241,223,92,.7);opacity:0;pointer-events:none}
.ia-an-esw.late .ia-an-onda{animation:ia-an-onda 1.1s cubic-bezier(.2,.7,.3,1)}
@keyframes ia-an-onda{0%{opacity:.9;scale:.45}100%{opacity:0;scale:2}}
@keyframes ia-brilla{50%{filter:drop-shadow(0 0 7cqw rgba(241,223,92,.9))}}
.ia-pr:not(.ve) .ia-an-es{animation-play-state:paused}
.ia-an-ps{display:grid;width:100%}
.ia-an-p{grid-area:1/1;display:grid;justify-items:center;align-content:start;gap:1.5cqw;opacity:0;translate:0 2.5cqw;transition:opacity .4s,translate .6s cubic-bezier(.2,1,.3,1)}
.ia-an-p.on{opacity:1;translate:0 0;transition-delay:.1s}
.ia-an-pn{font:500 2.5cqw 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--k)}
.ia-an-nom{font-weight:900;font-stretch:112%;font-size:5.4cqw;line-height:1.02;letter-spacing:-.015em;max-width:60cqw;text-wrap:balance}
.ia-an-px{font-weight:500;font-size:3cqw;line-height:1.38;max-width:52cqw;opacity:.78;text-wrap:balance}
/* cuando el texto son dos frases, cada una empieza en su línea */
.ia-an-fr{display:block;text-wrap:balance}
.ia-an-fin{display:none}
/* a la derecha, los cinco pasos: el de ahora encendido, los hechos con ✓ (y se pueden tocar) */
.ia-pr-l{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*.35);justify-self:end;width:min(100%,calc(var(--u)*31))}
.ia-pr-b{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--u)*1.3);width:100%;padding:calc(var(--u)*.85) calc(var(--u)*1.3);border-radius:calc(var(--u)*1.3);cursor:pointer;opacity:.4;transition:opacity .4s,background .4s}
.ia-pr-b:hover{opacity:.85}
.ia-pr-b:focus-visible{outline:2.5px solid var(--k);outline-offset:2px}
.ia-pr-n{font-size:max(11px,calc(var(--u)*1));transition:color .4s}
.ia-pr-tx{display:grid;gap:4px;min-width:0}
.ia-pr-t{font-weight:800;font-stretch:108%;font-size:max(14px,calc(var(--u)*1.6));line-height:1.15}
.ia-pr-x{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ia-pr-ok{width:max(16px,calc(var(--u)*1.7));height:max(16px,calc(var(--u)*1.7));color:var(--k);stroke-width:2.4;opacity:0;scale:.5;transition:opacity .35s,scale .5s cubic-bezier(.2,1.6,.4,1)}
.ia-pr-i.hecho .ia-pr-b{opacity:.78}
.ia-pr-i.hecho .ia-pr-ok{opacity:1;scale:1}
.ia-pr-i.ahora .ia-pr-b{opacity:1;background:rgba(243,238,228,.07)}
.ia-pr-i.ahora .ia-pr-n{color:var(--k)}

/* ---------- 7 · preguntas: «Pregúntanos» (un chat, sobre papel) ---------- */
.ia-fq{min-height:var(--alto);background:var(--paper);color:var(--ink);display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.3fr);align-items:center;gap:calc(var(--u)*5);padding:calc(70px + var(--u)*2) var(--pad) calc(var(--u)*4)}
.ia-fq .ia-h{font-size:min(calc(var(--u)*6.2),3.6vw)}
.ia-fq .ia-s{max-width:17em;opacity:.75}
.ia-ch{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;justify-self:end;width:min(100%,calc(var(--u)*92));height:calc(var(--alto) - 70px - var(--u)*6);border-radius:calc(var(--u)*2.2);background:radial-gradient(circle,rgba(17,17,17,.075) 0 1px,transparent 1.6px) 0 0/12px 12px,#f7f5f0;box-shadow:0 0 0 1.5px var(--ink),0 calc(var(--u)*2.2) calc(var(--u)*4.5) rgba(17,17,17,.14);overflow:hidden}
.ia-ch-cab{display:flex;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*1.1) calc(var(--u)*1.6);background:#fff;border-bottom:1px solid rgba(17,17,17,.08)}
.ia-ch-av{display:grid;place-items:center;flex:none;width:max(32px,calc(var(--u)*3.4));height:max(32px,calc(var(--u)*3.4));border-radius:50%;background:var(--ink);color:var(--k);font-weight:900;font-stretch:125%;font-size:max(14px,calc(var(--u)*1.5))}
.ia-ch-quien{display:grid;min-width:0;line-height:1.25}
.ia-ch-nom{font-weight:900;font-stretch:120%;font-size:max(14px,calc(var(--u)*1.4));letter-spacing:.01em}
.ia-ch-linea{display:flex;align-items:center;gap:6px;font:500 max(10px,calc(var(--u)*.9)) 'DM Mono',monospace;opacity:.6}
.ia-ch-pto{flex:none;width:7px;height:7px;border-radius:50%;background:#1f9d55}
/* mientras DOSIS escribe, arriba pone «escribiendo…» y el punto late */
.ia-ch-linea{transition:opacity .3s}
.ia-fq.teclea .ia-ch-linea{opacity:1;color:#13804a}
.ia-fq.teclea .ia-ch-x{display:none}
.ia-fq.teclea .ia-ch-pto{animation:ia-escr .9s ease-in-out infinite}
@keyframes ia-escr{50%{scale:.55;opacity:.5}}
.ia-ch-eti{margin-left:auto;padding:.5em .95em;border-radius:99px;background:var(--k);font-size:11px}
.ia-ch-msgs{display:flex;flex-direction:column;gap:calc(var(--u)*.75);min-height:0;padding:calc(var(--u)*1.6) calc(var(--u)*1.8) calc(var(--u)*1);overflow-y:auto;scrollbar-width:none;-webkit-mask:linear-gradient(transparent,#000 calc(var(--u)*2.2));mask:linear-gradient(transparent,#000 calc(var(--u)*2.2))}
.ia-ch-msgs::-webkit-scrollbar{display:none}
.ia-ch-ficha{align-self:center;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:calc(var(--u)*1.1);align-items:center;margin:auto 0 calc(var(--u)*.4);padding:calc(var(--u)*.9) calc(var(--u)*1.8) calc(var(--u)*.9) calc(var(--u)*1);border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.07)}
.ia-ch-fav{grid-row:1/3;display:grid;place-items:center;width:max(38px,calc(var(--u)*3.8));height:max(38px,calc(var(--u)*3.8));border-radius:50%;background:var(--ink);color:var(--k);font-weight:900;font-stretch:125%;font-size:max(15px,calc(var(--u)*1.6))}
.ia-ch-fn{font-weight:900;font-stretch:120%;font-size:max(13.5px,calc(var(--u)*1.35));line-height:1.1}
.ia-ch-ft{font-size:max(9.5px,calc(var(--u)*.82));opacity:.55}
.ia-ch-dia{align-self:center;padding:.45em 1em;border-radius:99px;background:#e9e6de;font-size:10px}
.ia-par{display:flex;flex-direction:column;gap:calc(var(--u)*.75)}
.ia-par[hidden],.ia-bu[hidden]{display:none}
.ia-bu{max-width:min(66%,34em);padding:.62em 1em .66em;border-radius:1.2em;font-size:max(13.5px,calc(var(--u)*1.35));line-height:1.38;text-wrap:pretty}
.ia-bu-d{align-self:flex-start;border-bottom-left-radius:.35em;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.08),0 1px 2px rgba(17,17,17,.05);transform-origin:0 100%}
.ia-bu-t{align-self:flex-end;border-bottom-right-radius:.35em;background:var(--ink);color:#f3eee4;transform-origin:100% 100%}
.ia-bu-h{display:inline-flex;align-items:center;gap:.3em;float:right;margin:.55em -.25em -.3em .9em;font:500 .7em/1 'DM Mono',monospace;opacity:.5}
.ia-bu-t .ia-bu-h{opacity:.65}
.ia-bu-vv{width:1.4em;height:.95em;color:var(--k);stroke-width:2.2}
.ia-bu.entra{animation:ia-entra .5s cubic-bezier(.2,1.3,.35,1) both}
@keyframes ia-entra{from{opacity:0;translate:0 30%;scale:.9}}
.ia-bu .ia-pts{display:none;padding:.3em 0}
.ia-bu.piensa .ia-pts{display:inline-flex}
.ia-bu.piensa .ia-bu-tx,.ia-bu.piensa .ia-bu-h{display:none}
.ia-ch-sug{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:calc(var(--u)*.6) calc(var(--u)*1.8) 0}
.ia-ch-sug[hidden]{display:none}
.ia-sg{padding:.58em 1.05em;border:1.5px solid var(--ink);border-radius:99px;background:#fff;color:var(--ink);font:600 max(13px,calc(var(--u)*1.25)) 'Archivo',sans-serif;cursor:pointer;transition:background .25s,color .25s,opacity .35s,scale .35s cubic-bezier(.2,1.4,.4,1),translate .5s cubic-bezier(.2,1.2,.3,1)}
.ia-sg:hover{background:var(--k)}
.ia-sg:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px}
.ia-sg.fuera{opacity:0;translate:0 70%;pointer-events:none}
.ia-sg.va{opacity:0;scale:.85;pointer-events:none}
.ia-sg[hidden]{display:none}
.ia-ch-esc{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:calc(var(--u)*.9) calc(var(--u)*1.4) calc(var(--u)*1.2);padding:calc(var(--u)*.55) calc(var(--u)*.55) calc(var(--u)*.55) calc(var(--u)*1.4);border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px rgba(17,17,17,.12);font-size:max(12px,calc(var(--u)*1.15));color:rgba(17,17,17,.45)}
.ia-ch-esc.lleno{color:var(--ink)}
.ia-ch-esc.lleno .ia-ch-esc-t::after{content:'';display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:currentColor;animation:ia-caret .8s steps(1) infinite}
@keyframes ia-caret{50%{opacity:0}}
.ia-ch-env.envia{animation:ia-envia .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes ia-envia{40%{scale:1.22;rotate:-14deg}}
.ia-ch-env{display:grid;place-items:center;flex:none;width:max(26px,calc(var(--u)*2.7));height:max(26px,calc(var(--u)*2.7));border-radius:50%;background:var(--ink);color:var(--k);font-style:normal;font-weight:900}

/* ---------- 8 · el cierre: «El último mensaje» (girasol) ---------- */
.ia-ci{height:var(--alto);background:var(--girasol);color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;padding:calc(70px + var(--u)*1.5) var(--pad) calc(var(--u)*3)}
.ia-ci::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 90% at 50% 42%,transparent 38%,rgba(232,108,0,.4) 100%)}
.ia-ci-in{display:grid;gap:calc(var(--u)*2.4);max-width:100%}
.ia-ci-chat{display:flex;align-items:flex-end;gap:calc(var(--u)*1.8);min-width:0}
.ia-ci-av{flex:none;width:calc(var(--u)*14);height:auto;margin-bottom:calc(var(--u)*-.8);rotate:-8deg;filter:drop-shadow(0 calc(var(--u)*1.2) calc(var(--u)*1.4) rgba(0,0,0,.22));opacity:0;scale:.6;transition:opacity .5s,scale .8s cubic-bezier(.2,1.5,.4,1)}
.ia-ci.vis .ia-ci-av{opacity:1;scale:1;animation:bobcap 6.5s ease-in-out infinite 1s}
.ia-ci:not(.ve) .ia-ci-av{animation-play-state:paused}
.ia-ci-bus{display:grid;justify-items:start;gap:calc(var(--u)*1);min-width:0;max-width:100%}
.ia-ci-m{position:relative;max-width:100%}
.ia-ci-m > .ia-pts{position:absolute;left:0;bottom:0;padding:1em 1.2em;border-radius:1.2em 1.2em 1.2em .35em;opacity:0}
.ia-ci-m1 > .ia-pts{background:var(--ink);color:var(--girasol)}
.ia-ci-m2 > .ia-pts{background:#fff8e7;color:var(--ink)}
.ia-ci-t{padding:calc(var(--u)*2.1) calc(var(--u)*3.2) calc(var(--u)*2.3);border-radius:calc(var(--u)*3.4) calc(var(--u)*3.4) calc(var(--u)*3.4) calc(var(--u)*.9);background:var(--ink);color:var(--girasol);font-weight:900;font-stretch:125%;font-size:min(6.6vw,17svh);line-height:.84;letter-spacing:-.035em;text-transform:uppercase;transform-origin:0 100%}
.ia-ci-p{max-width:25em;padding:calc(var(--u)*1.5) calc(var(--u)*2.2) calc(var(--u)*1.6);border-radius:calc(var(--u)*2.3) calc(var(--u)*2.3) calc(var(--u)*2.3) calc(var(--u)*.7);background:#fff8e7;font-weight:600;font-size:max(16px,calc(var(--u)*1.9));line-height:1.3;text-wrap:pretty;transform-origin:0 100%}
.ia-ci-meta{padding-left:calc(var(--u)*1);font-size:11px;opacity:0}
.ia-ci-res{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:calc(var(--u)*1.2)}
.ia-ci-bt{display:inline-flex;align-items:center;gap:calc(var(--u)*1.4);padding:calc(var(--u)*1) calc(var(--u)*1) calc(var(--u)*1) calc(var(--u)*2.6);border-radius:99px;background:var(--ink);color:var(--girasol);font:500 max(13px,calc(var(--u)*1.4)) 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.ia-ci-fl{display:grid;place-items:center;width:max(34px,calc(var(--u)*3.4));height:max(34px,calc(var(--u)*3.4));border-radius:50%;background:var(--girasol);color:var(--ink);font-style:normal;font-size:1.3em;transition:rotate .4s cubic-bezier(.2,1.4,.4,1)}
.ia-ci-bt:hover .ia-ci-fl{rotate:-45deg}
.ia-ci-ot{display:inline-flex;align-items:center;padding:calc(var(--u)*1) calc(var(--u)*2.6);min-height:calc(max(34px,calc(var(--u)*3.4)) + var(--u)*2);box-sizing:border-box;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);font:500 max(13px,calc(var(--u)*1.4)) 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.ia-ci-bt:focus-visible,.ia-ci-ot:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
/* llegan como mensajes: «escribiendo…», la burbuja grande, la segunda y las respuestas rápidas */
.ia-ci-t,.ia-ci-p{opacity:0;scale:.82;transition:opacity .35s,scale .6s cubic-bezier(.2,1.35,.35,1)}
.ia-ci-bt,.ia-ci-ot{opacity:0;translate:0 50%;transition:opacity .45s,translate .7s cubic-bezier(.2,1.2,.3,1),scale .3s cubic-bezier(.2,1.4,.4,1),background .25s}
.ia-ci-ot:hover{background:rgba(17,17,17,.08)}
.ia-ci.vis .ia-ci-m1 > .ia-pts{animation:ia-tecl .8s .2s both}
.ia-ci.vis .ia-ci-t{opacity:1;scale:1;transition-delay:.95s}
.ia-ci.vis .ia-ci-m2 > .ia-pts{animation:ia-tecl .75s 1.3s both}
.ia-ci.vis .ia-ci-p{opacity:1;scale:1;transition-delay:1.95s}
.ia-ci.vis .ia-ci-meta{opacity:.6;transition:opacity .5s 2.2s}
.ia-ci.vis .ia-ci-bt{opacity:1;translate:0 0;transition-delay:2.35s,2.35s,0s,0s}
.ia-ci.vis .ia-ci-ot{opacity:1;translate:0 0;transition-delay:2.5s,2.5s,0s,0s}
.ia-ci.vis .ia-ci-bt:hover{scale:1.04}
@keyframes ia-tecl{0%{opacity:0;scale:.6}15%,85%{opacity:1;scale:1}100%{opacity:0;scale:.9}}

/* ---------- móvil ---------- */
@media (max-width:980px){
  .ia-h,.ia-fq .ia-h{font-size:clamp(36px,10.5vw,58px)}
  /* la noche: la frase arriba y el móvil debajo, con el alto que quede */
  .ia-noche{height:calc(var(--alto)*3)}
  .ia-noche .sv-pin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:14px;padding:78px var(--pad) 14px}
  .ia-nc-tx{gap:10px}
  .ia-fr{font-size:clamp(21px,6.3vw,36px);max-width:none}
  .ia-cuenta{padding:6px 14px 6px 10px}
  .ia-tel{width:100%;height:100%}
  .ia-tel-c{--pw:min(50cqh,100cqw);height:calc(var(--pw)*2)}
  .ia-notis{top:66cqw}
  .ia-noti{font-size:5.3cqw}
  .ia-luna{bottom:33%}
  /* los ajustes: la muestra pasa debajo de cada fila */
  .ia-inc{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:90px}
  .ia-aj{height:auto}
  .ia-aj-bar{grid-template-columns:auto minmax(0,1fr) auto;padding:12px 14px}
  .ia-aj-l{grid-template-rows:none;padding:0 14px}
  .ia-aj-f{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ico tx sw" "mu mu mu";row-gap:10px;column-gap:12px;padding:14px 0}
  .ia-ico{grid-area:ico}.ia-aj-tx{grid-area:tx}.ia-sw{grid-area:sw}.ia-mu{grid-area:mu;height:50px}
  .ia-aj-act{white-space:nowrap}
  /* así aprende: el anillo en medio y el paso debajo */
  .ia-pr{height:calc(var(--alto)*4)}
  .ia-pr .sv-pin{--an:min(78vw,calc(var(--alto)*.4));grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;justify-items:center;gap:18px;padding:84px var(--pad) 20px}
  .ia-pr-cab{justify-self:stretch}
  .ia-pr-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ia-an-c{inset:0;align-content:center}
  .ia-an-es{width:30cqw;height:30cqw}
  .ia-an-onda{width:30cqw;height:30cqw;margin:-15cqw 0 0 -15cqw}
  .ia-an-ps{position:absolute;left:50%;top:calc(100% + 16px);width:min(88vw,440px);translate:-50% 0}
  .ia-an-p{gap:8px}
  .ia-an-pn{font-size:11px}
  .ia-an-nom{font-size:clamp(22px,6.4vw,30px);max-width:none}
  .ia-an-px{font-size:15px;max-width:26em}
  .ia-an-n{font-size:7.5px}
  /* pregúntanos: el chat debajo, y las preguntas en una tira que se desliza */
  .ia-fq{grid-template-columns:minmax(0,1fr);gap:24px}
  .ia-ch{width:100%;height:min(540px,calc(var(--alto) - 150px))}
  .ia-ch-x,.ia-ch-ft{display:none}
  .ia-ch-fn{font-stretch:100%;font-size:13px}
  .ia-ch-ficha{grid-template-rows:auto;padding:8px 16px 8px 8px}
  .ia-ch-fav{grid-row:auto}
  .ia-bu{max-width:86%}
  .ia-ch-sug{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
  .ia-ch-sug::-webkit-scrollbar{display:none}
  .ia-sg{flex:none;white-space:nowrap}
  /* el cierre */
  .ia-ci-chat{flex-direction:column;align-items:flex-start;gap:12px}
  .ia-ci-av{width:84px;margin:0}
  .ia-ci-t{font-size:clamp(28px,9vw,64px);line-height:.94;padding:18px 22px 20px}
  .ia-ci-p{padding:14px 18px 15px}
  .ia-ci-res{flex-direction:column;align-items:stretch}
  .ia-ci-bt{justify-content:space-between}
  .ia-ci-ot{justify-content:center}
}
/* en los móviles estrechos, «Ajustes» se queda en la flecha para que el contador quepa en una línea */
@media (max-width:440px){ .ia-aj-vt{display:none} .ia-aj-vuelve .ia-i{width:1.6em;height:1.6em} }

/* ---------- movimiento reducido: todo en su estado final ---------- */
@media (prefers-reduced-motion:reduce){
  .ia-noche,.ia-pr{height:auto}
  .ia-noche *,.ia-noche .sv-pin::after,.ia-noche .sv-pin::before,.ia-inc *,.ia-pr *,.ia-fq *,.ia-ci *{transition:none!important}
  .ia-w{opacity:1}
  .ia-aj{opacity:1;translate:none}
  .ia-mu *,.ia-mu *::after{animation:none!important}
  .ia-cn,.ia-cita,.ia-nd-ok,.ia-rl-t:last-child,.ia-rl-e:last-child,.ia-bo-t:first-child{opacity:1}
  .ia-vv{color:#f1df5c}
  .ia-dd{background:#4b23b8;color:#f3eee4}
  .ia-hh.ia-si{background:#c8102e;color:#fff;box-shadow:inset 0 0 0 1.5px #c8102e}
  .ia-cita-ok{scale:1}
  .ia-id:first-child{opacity:1;background:#e8468f;color:#fff}
  .ia-nd-x{opacity:.45}
  .ia-nd-pr::after{scale:1 1}
  .ia-pr-x{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font-size:max(12.5px,calc(var(--u)*1.2));line-height:1.35;opacity:.75}
  .ia-pr-l{width:min(100%,calc(var(--u)*36))}
  .ia-an-ps{display:none}
  .ia-an-fin{display:block;font-size:max(11px,2.6cqw);color:var(--k)}
  .ia-ch{height:auto}
  .ia-ci-t,.ia-ci-p,.ia-ci-bt,.ia-ci-ot,.ia-ci-av{opacity:1;scale:none;translate:none}
  .ia-ci-meta{opacity:.6}
  .ia-ci-m > .ia-pts{display:none}
  @container (max-width:37em){ .ia-nd-x{opacity:0} }
}
@media (prefers-reduced-motion:reduce) and (max-width:980px){
  .ia-an-fin{font-size:12px}
  .ia-pr-l{position:static;width:100%;height:auto;overflow:visible;clip-path:none}
}