:root{
  --niebla:#F7F6F9; --papel:#FFFFFF; --tinta:#2B2733; --pizarra:#6B6475; --musgo:#4F6B58; --lila:#CCC2CD;
  --musgo-hondo:#3E5747; --musgo-velo:#E6ECE3; --salvia:#E4EADF; --lila-hondo:#6E5C86; --lila-velo:#EEE9F2;
  --bruma:#E4E1E9; --borde-campo:#8F889A; --velo-hoja:rgba(43,39,51,0.42);
  --sans:'Atkinson Hyperlegible Next','Atkinson Hyperlegible',system-ui,sans-serif;
  --serif:'Literata',Georgia,serif;
  --entra:cubic-bezier(.2,.7,.1,1);
  --trazo:cubic-bezier(.65,0,.35,1);
  --respira:cubic-bezier(.45,0,.55,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--niebla)}
body{margin:0;background:var(--niebla);color:var(--tinta);font-family:var(--sans);-webkit-font-smoothing:antialiased}
/* una sola pantalla sólo cuando hay alto; con zoom fuerte o el teléfono acostado, la página baja */
@media (min-height:600px){ html,body{overflow:hidden} }
:where(h1,h2,p,ol,ul,li,figure){margin:0;padding:0}
:where(ul){list-style:none}
:where(button){font:inherit;color:inherit;margin:0;background:none;border:0;padding:0;cursor:pointer}
img{display:block}
.k-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
a:focus-visible,button:focus-visible{outline:3px solid var(--lila-hondo);outline-offset:3px}

/* ═════════ escritorio: dos columnas. A la izquierda todo lo que se lee; a la derecha el anillo con el teléfono ═════════ */
.pagina{
  --L:clamp(32px,5vw,112px);
  --col:clamp(340px,30.5vw,560px);
  --gap:clamp(32px,3.4vw,72px);
  position:relative;height:100vh;height:100svh;
  display:grid;grid-template-columns:var(--L) var(--col) var(--gap) minmax(0,1fr);grid-template-rows:minmax(0,1fr);
}
main{display:contents}
.texto{grid-column:2;grid-row:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:clamp(20px,4svh,44px) 0 clamp(8px,1.6svh,20px);container-type:inline-size}
.centro{align-self:center;padding:clamp(12px,2.4svh,28px) 0}
.escena{grid-column:4;grid-row:1;position:relative;min-width:0;container-type:size}

.marca .logo{height:clamp(26px,3.2svh,32px);width:auto}

/* pregunta y respuesta: la voz de Koan */
.pregunta,.respuesta{position:relative;font-family:var(--serif);font-size:clamp(34px,min(11.2cqi,6.4svh),66px);line-height:1.08;letter-spacing:-0.02em;font-variation-settings:'opsz' 72}
.pregunta{font-weight:500}
.ln{display:block}
.respuesta{font-weight:400;margin-top:.26em}
.cursor{position:absolute;left:0;top:0;width:3px;height:.8em;border-radius:2px;background:var(--musgo);opacity:0;pointer-events:none}
.que-es{margin-top:clamp(14px,2.4svh,26px);max-width:27em;font-size:clamp(16px,calc(.5vw + .8svh),18px);line-height:1.5;text-wrap:pretty}

/* los tres pasos de la demostración, siempre a la vista */
.pasos{margin-top:clamp(14px,2.6svh,28px);display:flex;flex-direction:column;gap:2px}
.pasos li{display:flex;align-items:center;gap:12px;min-height:34px;font-size:17px;line-height:24px;color:var(--pizarra);transition:color .4s ease}
.p-anillo{width:20px;height:20px;flex:none;overflow:visible;fill:none;stroke-width:2.25;stroke-linecap:round}
.p-base{stroke:var(--lila)}
.p-tinta{stroke:var(--lila-hondo);stroke-dasharray:0 56.55;transition:stroke-dasharray .3s ease}
.pasos li.activo{color:var(--tinta)}
.pasos li.activo .p-tinta{stroke-dasharray:49.5 7.05;transition:stroke-dasharray .9s var(--trazo) .1s}
.p-c{display:none}
html:not(.mov) .pasos li{color:var(--tinta)}

/* tiendas */
.cta{margin-top:clamp(18px,3.4svh,36px)}
.cta-t{font-size:17px;line-height:24px;font-weight:600}
.cta-t span{font-weight:400;color:var(--pizarra)}
.tiendas{display:flex;gap:12px;margin-top:12px}
.tienda{flex:1 1 0;min-width:0;max-width:240px;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 18px 8px 16px;border-radius:999px;background:var(--musgo);color:#FFFFFF;text-decoration:none;transition:background-color .2s ease,transform .25s var(--entra)}
.tienda:hover{background:var(--musgo-hondo)}
.tienda:active{transform:scale(.98)}
.tienda:focus-visible{outline-offset:4px}
.tienda svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tienda-t{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.tienda-s{font-size:13px;line-height:16px}
.tienda-n{font-size:19px;line-height:22px;font-weight:600;white-space:nowrap}

/* QR chico, al lado de los botones, para pasar del escritorio al teléfono */
.qr{display:flex;align-items:center;gap:16px;margin-top:16px}
.qr-cod{flex:none;display:flex;gap:10px}
.qr-cod figure{display:flex;flex-direction:column;align-items:center;gap:4px}
.qr-cod figcaption{font-size:13px;line-height:18px;color:var(--pizarra)}
.qr-img{display:block;width:88px;height:88px;border-radius:8px;background:var(--papel)}
.qr-img path{fill:var(--tinta)}
.qr-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.qr-txt p{font-size:14px;line-height:20px;color:var(--pizarra)}
.qr-sel{display:none;align-self:flex-start;margin-left:-10px}
.qr-sel button{min-height:44px;padding:0 10px;border-radius:999px;font-size:14px;line-height:20px;font-weight:600;color:var(--pizarra);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .2s ease}
.qr-sel button:hover{color:var(--tinta)}
.qr-sel button[aria-pressed="true"]{color:var(--tinta);text-decoration-color:var(--lila-hondo);text-decoration-thickness:2px}
.js .qr-sel{display:flex}
.js .qr-cod figcaption{display:none}
.js .qr-cod figure[hidden]{display:none}
@media (max-height:819px){ .qr{display:none} }

/* pie, en la columna del texto */
.pie{display:flex;flex-wrap:wrap;align-items:center;column-gap:20px}
.pie p{font-size:13px;line-height:18px;color:var(--pizarra)}
.pie nav{display:flex;gap:4px;margin-left:-8px}
.pie a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-radius:8px;color:var(--musgo);font-size:14px;line-height:20px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pie a:hover{color:var(--musgo-hondo)}

/* pausa: cerca de la demostración que frena, en la esquina libre del escenario */
.pausa{position:absolute;z-index:3;right:clamp(12px,1.6vw,28px);bottom:clamp(10px,1.6svh,20px);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;border-radius:999px;font-size:14px;line-height:20px;font-weight:600;color:var(--pizarra);transition:background-color .2s ease,color .2s ease}
.pausa:hover{background:var(--bruma);color:var(--tinta)}
.pausa svg{width:18px;height:18px;flex:none;fill:currentColor}
.pausa .ico-play{display:none}
.pausada .pausa .ico-play{display:block}
.pausada .pausa .ico-pausa{display:none}
html:not(.mov) .pausa{display:none}

/* ───────── el escenario ───────── */
.escena-in{
  position:absolute;inset:0;
  /* el anillo entero: lo que dé el alto y el ancho, nunca más de 1000 */
  --D:min(100cqh - 48px, 100cqw - 48px, 1000px);
  /* el teléfono entra en el anillo a 0,872·D; no baja de 0,8 ni se sale de la pantalla */
  --s:min(max(.8, tan(atan2(var(--D), 1000px))), tan(atan2(100cqh - 16px, 872px)), 1);
  --telW:calc(418px * var(--s));
  --telH:calc(872px * var(--s));
}
.anillo{position:absolute;z-index:0;pointer-events:none;width:calc(var(--D) * 1.00604);height:calc(var(--D) * 1.00604);left:calc(50% - var(--D) * .50302);top:calc(50% - var(--D) * .50302)}
.anillo div,.anillo svg{display:block;width:100%;height:100%;transform-origin:50% 50%}
.anillo svg{overflow:visible}
.a-base{fill:var(--lila)}
.a-traza{fill:none;stroke:var(--lila-hondo);stroke-width:10;stroke-dasharray:0 200;stroke-linecap:round}
/* Koan escribe: un trazo fino sale de la abertura, da la vuelta y se apaga */
.e-escribe .a-traza{animation:traza-escribe 2.2s var(--trazo) both}
@keyframes traza-escribe{0%{stroke-dasharray:0 200;stroke-dashoffset:0}30%{stroke-dasharray:15 185;stroke-dashoffset:-6}100%{stroke-dasharray:15 185;stroke-dashoffset:-100}}
/* convierte tu audio: un trazo corto gira; el anillo no se mueve */
.e-gira .a-traza{stroke-dasharray:12 188;animation:traza-gira 1.3s linear infinite}
@keyframes traza-gira{from{stroke-dashoffset:12}to{stroke-dashoffset:-100}}
/* te escucha: late, sin pasar nunca de su tamaño */
.e-oye .a-oye{animation:a-oye 1.4s ease-in-out infinite}
@keyframes a-oye{0%,100%{transform:scale(.985)}22%{transform:scale(1)}40%{transform:scale(.978)}68%{transform:scale(1)}}
/* Relajarse: respira de 0,94 a 1, con el aro de la app */
.a-respira{transition:transform .6s var(--respira)}
.e-exhalado .a-respira{transform:scale(.94)}
.e-respira .a-respira{animation:a-respira 10s linear both}
@keyframes a-respira{0%{transform:scale(.94);animation-timing-function:var(--respira)}40%{transform:scale(1);animation-timing-function:var(--respira)}100%{transform:scale(.94)}}

/* ───────── el teléfono ───────── */
.tel-marco{position:absolute;z-index:1;left:calc(50% - var(--telW) / 2);top:calc(50% - var(--telH) / 2);width:var(--telW);height:var(--telH)}
.tel-caja{position:absolute;left:0;top:0;width:var(--telW);height:var(--telH)}
.tel{position:absolute;left:0;top:0;width:418px;height:872px;transform:scale(var(--s));transform-origin:0 0;border-radius:74px;isolation:isolate;background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 30%,rgba(48,42,34,0) 36%,rgba(48,42,34,.2) 43%,rgba(48,42,34,.2) 50%,rgba(48,42,34,0) 56%,rgba(255,255,255,.1) 62%,rgba(255,255,255,0) 69%,rgba(0,0,0,0) 80%,rgba(0,0,0,.12) 100%),conic-gradient(from 0deg at 50% 50%,#c6c0b6 0deg,#b7b1a7 14deg,#dcd8d0 24deg,#b0aaa0 30deg,#928c82 50deg,#857f75 90deg,#958f85 125deg,#bcb6ac 146deg,#d6d2ca 154deg,#979187 162deg,#7c766c 180deg,#8a847a 198deg,#c0bab0 206deg,#9d978d 214deg,#aaa49a 250deg,#bbb5ab 290deg,#cec9c0 320deg,#dfdbd3 334deg,#d6d1c9 345deg,#c6c0b6 360deg);box-shadow:0 0 0 1.5px rgba(0,0,0,.45),inset 0 0 0 1.25px rgba(70,62,52,.42),inset 0 0 0 4.4px rgba(255,255,255,.2),0 8px 25px rgba(0,0,0,.22)}
.tel::before{content:'';position:absolute;inset:6px;z-index:1;border-radius:68px;background:#050506;box-shadow:0 0 0 .9px rgba(52,47,40,.55)}
.tel-brillo{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:radial-gradient(142px 109px at 6% 3%,rgba(255,255,255,.3),rgba(255,255,255,0) 70%),radial-gradient(92px 125px at 97% 90%,rgba(255,255,255,.2),rgba(255,255,255,0) 70%),radial-gradient(75px 251px at 0% 55%,rgba(255,255,255,.16),rgba(255,255,255,0) 70%)}
.tel-brillo::after{content:'';position:absolute;right:1px;top:525px;width:5px;height:100px;border-radius:4px;background:linear-gradient(90deg,rgba(60,55,48,0),rgba(60,55,48,.55) 55%,rgba(60,55,48,.25))}
.tel-pantalla{position:absolute;left:14px;top:14px;width:390px;height:844px;z-index:2;overflow:hidden;border-radius:60px;background:var(--niebla)}
.tel-isla{position:absolute;z-index:3;top:27px;left:50%;width:121px;height:36px;margin-left:-60.5px;border-radius:999px;background:radial-gradient(circle 5.6px at calc(100% - 17.8px) 50%,#1b2233 0 45%,#0b0d12 70%,#000 100%)}
.tel-boton{position:absolute;z-index:0;width:3px;background:linear-gradient(90deg,#7f796f,#c2bdb4 55%,#a09a90);box-shadow:0 -1.5px 0 rgba(0,0,0,.45),0 1.5px 0 rgba(0,0,0,.45),-1.5px 0 0 rgba(0,0,0,.45)}
.tel-boton-1,.tel-boton-2,.tel-boton-3{right:100%;border-radius:5px 0 0 5px/12px 0 0 12px}
.tel-boton-1{top:179px;height:40px}
.tel-boton-2{top:249px;height:66px}
.tel-boton-3{top:332px;height:66px}
.tel-boton-4{left:100%;top:272px;height:103px;border-radius:0 5px 5px 0/0 12px 12px 0;background:linear-gradient(90deg,#a09a90,#c2bdb4 45%,#7f796f);box-shadow:0 -1.5px 0 rgba(0,0,0,.45),0 1.5px 0 rgba(0,0,0,.45),1.5px 0 0 rgba(0,0,0,.45)}

/* ───────── la app (sistema §11, sin cambios) ───────── */
.pant{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--niebla);padding:58px 0 34px;font-family:var(--sans);color:var(--tinta);font-size:16px;line-height:24px}
.k-barra{height:52px;flex:none;display:flex;align-items:center;gap:4px;padding:0 8px}
.k-saludo{font-family:var(--serif);font-size:24px;line-height:32px;font-weight:500}
.k-enc{font-family:var(--serif);font-size:21px;line-height:28px;font-weight:500}
.k-ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.k-ico-20{width:20px;height:20px}
.k-ico-16{width:16px;height:16px}
.k-anillo{width:22px;height:22px;flex:none;fill:none;stroke:var(--lila);stroke-width:2.25;stroke-linecap:round}
.k-ibtn{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:var(--tinta)}
.k-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;padding:0 24px;border-radius:999px;font-size:17px;line-height:22px;font-weight:600;text-align:center;transition:background-color .15s ease}
.k-btn-sec{background:var(--musgo-velo);color:#2F4A39}
.k-btn-sec.is-pressed{background:#D9E2D5}
.k-relajarse{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:999px;background:var(--lila-velo);font-size:15px;line-height:20px;font-weight:600;color:var(--tinta);transition:background-color .15s ease}
.k-relajarse .k-anillo{width:20px;height:20px;stroke:var(--lila-hondo);stroke-width:2}
.k-relajarse.is-pressed{background:var(--lila)}
.k-mic{position:relative;width:52px;height:52px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--musgo);color:#FFFFFF;transition:background-color .15s ease}
.k-mic.is-pressed{background:var(--musgo-hondo)}
.k-campo{display:flex;align-items:center;height:54px;padding:0 4px 0 16px;border:1px solid var(--borde-campo);border-radius:16px;background:var(--papel)}
.k-compositor{position:relative;flex:1;min-width:0;height:52px;border-radius:999px;padding:0 16px 0 20px}
.k-sug{display:block;max-width:300px;min-height:44px;padding:10px 16px;border:1px solid #CFCAD6;border-radius:22px 22px 6px 22px;background:var(--papel);font-size:16px;line-height:22px;text-align:left;transition:background-color .2s ease,border-color .2s ease}
.k-sug.is-pressed,.k-sug.elegida{background:var(--salvia);border-color:var(--salvia)}
.k-yo{align-self:flex-end;max-width:78%;padding:12px 16px;border-radius:22px 22px 6px 22px;background:var(--salvia);font-size:16px;line-height:24px}
.k-koan{display:flex;gap:10px;align-items:flex-start}
.k-koan .k-anillo{margin-top:3px}
.k-koan p{font-family:var(--serif);font-size:18px;line-height:28px}
.k-hora{font-size:13px;line-height:18px;color:var(--pizarra)}
.k-velo{background:var(--velo-hoja)}
.k-hoja{background:var(--papel);border-radius:28px 28px 0 0;padding:8px 20px 34px;box-shadow:0 -8px 32px rgba(43,39,51,.14)}
.k-asa{width:36px;height:5px;margin:0 auto;border-radius:3px;background:#D6D2DC}
.k-avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--salvia);color:var(--musgo-hondo);font-weight:600}
.v-fila{display:flex;align-items:center;gap:8px}
.v-barra{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:52px;padding:0 16px 0 4px;border-radius:999px;background:var(--lila-velo)}
.v-cancelar{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--papel);color:var(--tinta)}
.v-oye{width:40px;height:40px;flex:none}
.v-t1{font-size:16px;line-height:24px;font-weight:600;color:var(--tinta);font-variant-numeric:tabular-nums}
.v-t2{font-size:13px;line-height:18px;color:var(--pizarra);font-variant-numeric:tabular-nums}
.rx-burbuja{position:absolute;border-radius:50%;background:rgba(255,255,255,0.6);border:1.5px solid rgba(110,92,134,0.45)}
.rx-guia{position:absolute;border-radius:50%;border:1px dashed rgba(110,92,134,0.4)}
.rx-cuenta{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:30px;line-height:36px;font-weight:500;color:var(--lila-hondo)}
.rx-fase{font-family:var(--serif);font-size:36px;line-height:42px;font-weight:400;text-align:center;color:var(--tinta)}

/* ───────── la charla en vivo ───────── */
.ch-zona{position:relative;flex:1;min-height:0;overflow:hidden;transition:opacity .4s ease}
.ch-zona.fundido{opacity:0}
.ch-pila{position:absolute;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column}
.ap{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--entra),opacity .22s ease}
.ap.on{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .5s var(--entra),opacity .35s ease .06s}
.ap>.in{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.ch-pila .ap>.in{padding-top:24px}
.ch-pila .ap.sug>.in{padding-top:8px;align-items:flex-end}
.ch-pila .ap.sug1>.in{padding-top:32px}
.ch-pila .ap.sug.elegida-ap>.in{padding-top:24px;transition:padding-top .5s var(--entra)}
.sin-trans .ap,.sin-trans .capa,.sin-trans .k-sug,.sin-trans .ap>.in{transition:none !important}
.ch-ind{display:flex;align-items:center;gap:10px;height:28px}
.ch-ind span{font-size:14px;line-height:20px;color:var(--pizarra)}
.ch-ind .k-anillo circle{animation:k-dibuja 1.2s ease-in-out infinite}
@keyframes k-dibuja{0%{stroke-dasharray:0 56.55}65%,100%{stroke-dasharray:49.5 7.05}}
.k-koan+.k-hora{margin-top:6px;padding-left:32px}
.pal{display:inline}
.mov .ap .pal{opacity:0}
.mov .ap.on .pal{animation:aparece .3s ease both;animation-delay:calc(var(--i) * 32ms + 60ms)}
.mov .ap .k-hora{opacity:0}
.mov .ap.on .k-hora{animation:aparece .4s ease .9s both}

.ch-abajo{flex:none;display:flex;flex-direction:column;padding:0 12px 8px}
.ch-abajo .ap>.in{padding-bottom:8px}
.ch-https{display:flex;align-items:center;gap:6px;padding:0 8px}
.ch-slot{position:relative;height:52px}
/* las capas del compositor cambian en secuencia: sale 120 ms, pausa 60 ms, entra 180 ms */
.capa{position:absolute;inset:0;display:flex;align-items:center;gap:8px;opacity:0;visibility:hidden;transition:opacity .12s ease,visibility 0s linear .12s}
.capa.on{opacity:1;visibility:visible;transition:opacity .18s ease .18s,visibility 0s linear .18s}
.ch-ph{font-size:17px;line-height:24px;color:var(--pizarra);white-space:nowrap}
.ch-txt{font-size:17px;line-height:24px;color:var(--tinta);white-space:nowrap;overflow:hidden}
.ch-caret{display:none;flex:none;width:2px;height:22px;margin-left:1px;border-radius:1px;background:var(--tinta)}
.con-texto .ch-ph{display:none}
.escribiendo .ch-caret{display:block;animation:parpadea 1s steps(1,end) infinite}
@keyframes parpadea{0%,55%{opacity:1}56%,100%{opacity:0}}
.k-mic .i-env{display:none}
.con-texto .k-mic .i-mic{display:none}
.con-texto .k-mic .i-env{display:block}
.oye{transform-box:fill-box;transform-origin:center;animation:oye 1.4s ease-in-out infinite}
@keyframes oye{0%,100%{transform:scale(.78)}22%{transform:scale(1)}40%{transform:scale(.86)}68%{transform:scale(1.04)}}
.gira{transform-origin:20px 20px;animation:girar 1s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* Relajarse */
.rx-velo{position:absolute;inset:0;z-index:4;opacity:0;transition:opacity .3s ease}
.rx-hoja{position:absolute;left:0;right:0;top:82px;bottom:0;z-index:5;display:flex;flex-direction:column;background:var(--lila-velo);font-family:var(--sans);color:var(--tinta);font-size:16px;line-height:24px;transform:translateY(105%);transition:transform .26s cubic-bezier(.4,0,.8,.4)}
.hoja-abierta .rx-velo{opacity:1}
.hoja-abierta .rx-hoja{transform:none;transition:transform .32s var(--entra)}
.rx-campo{position:absolute;inset:0;overflow:hidden}
.mov .hoja-abierta .rx-burbuja{animation:sube var(--dur) linear var(--del) infinite}
@keyframes sube{0%{transform:translateY(var(--y0));opacity:0}14%,82%{opacity:1}100%{transform:translateY(var(--y1));opacity:0}}
.rx-anillo{position:absolute;left:6px;top:6px;width:252px;height:252px;overflow:visible;transform:scale(.595);transform-origin:50% 50%}
.respirando .rx-anillo{animation:rx-respira 10s linear both}
@keyframes rx-respira{0%{transform:scale(.595);animation-timing-function:var(--respira)}40%{transform:scale(1);animation-timing-function:var(--respira)}100%{transform:scale(.595)}}
.rx-fases{position:relative;width:264px;height:42px}
.rx-fase{position:absolute;left:0;right:0;top:0;transition:opacity .3s ease}
.rx-fase.exhala{opacity:0}
.exhalando .rx-fase.inhala{opacity:0}
.exhalando .rx-fase.exhala{opacity:1}

/* ───────── apertura: una sola secuencia ───────── */
@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes a-dibuja{from{stroke-dasharray:0 100}to{stroke-dasharray:100 0}}
@keyframes a-abre{from{transform:rotate(-40deg)}to{transform:rotate(0)}}
@keyframes iris{from{clip-path:circle(0 at 50% 50%)}to{clip-path:circle(100% at 50% 50%)}}
.mov .marca,.mov .respuesta,.mov .que-es,.mov .pasos,.mov .cta-t,.mov .tiendas,.mov .qr,.mov .pausa,.mov .pie{opacity:0}
.mov .tel-marco{clip-path:circle(0 at 50% 50%)}
.mov .m-dibuja{stroke-dasharray:0 100}
.mov [data-tipeo] .l{opacity:0}
.mov [data-tipeo] .l.v{opacity:1}
.anda .marca{animation:aparece .6s ease .1s both}
.anda .m-dibuja{animation:a-dibuja 1.4s var(--trazo) .2s both}
.anda .a-abre{animation:a-abre 1.4s var(--trazo) .2s both}
.anda .respuesta{animation:aparece .22s ease 1.7s both}
.anda .tel-marco{animation:iris .7s var(--entra) 2s both}
.anda .que-es{animation:aparece .6s ease 2.5s both}
.anda .pasos{animation:aparece .6s ease 2.65s both}
.anda .cta-t,.anda .tiendas{animation:aparece .6s ease 2.8s both}
.anda .qr,.anda .pausa,.anda .pie{animation:aparece .6s ease 3.4s both}
.cursor.on{opacity:1}

/* pausa: congela todo lo que se mueve */
.pausada *,.pausada *::before,.pausada *::after{animation-play-state:paused !important}

/* escritorio bajo: textos un punto más chicos para que todo entre */
@media (max-height:760px) and (min-width:960px){
  .que-es{font-size:16px;line-height:1.45}
  .pasos li{min-height:30px;font-size:16px}
  .tienda{min-height:56px}
}

/* ═════════ teléfono: una columna; el anillo abre la app y la cámara sigue la charla ═════════ */
@media (max-width:959px),(max-height:599px),(orientation:portrait) and (max-width:1199px){
  .pagina{
    display:flex;flex-direction:column;max-width:600px;margin:0 auto;
    padding:max(12px,env(safe-area-inset-top)) 16px max(8px,env(safe-area-inset-bottom));
  }
  .texto,.centro{display:contents}
  .marca{order:0;min-height:44px;display:flex;align-items:center}
  .marca .logo{height:24px}
  .pregunta{order:1}
  .respuesta{order:2}
  .que-es{order:3}
  .escena{order:4;flex:1 1 0;min-height:220px;margin-top:12px}
  .pasos{order:5}
  .cta{order:6}
  .pie{order:7}
  .pregunta,.respuesta{font-size:clamp(24px,7.4vw,32px);line-height:1.12;letter-spacing:-0.015em}
  .pregunta{margin-top:6px;text-wrap:balance}
  .ln{display:inline}
  .respuesta{margin-top:2px}
  .que-es{margin-top:8px;max-width:none;font-size:15px;line-height:21px}
  .pasos{margin-top:10px;flex-direction:row;justify-content:space-between;gap:8px}
  .pasos li{min-height:32px;gap:8px;font-size:16px;line-height:22px}
  .p-anillo{width:18px;height:18px}
  .p-l{display:none}
  .p-c{display:inline}
  .cta{margin-top:8px}
  .cta-t{font-size:15px;line-height:20px}
  .tiendas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
  .tienda{max-width:none;min-height:56px;padding:6px 10px;gap:10px;justify-content:center}
  .tienda svg{width:22px;height:22px}
  .tienda-n{font-size:18px;line-height:22px}
  .qr{display:none}
  .pie{margin-top:6px;flex-wrap:nowrap;column-gap:8px;justify-content:space-between}
  .pie p{flex:0 1 auto;max-width:15em}
  .pie nav{flex:none;margin:0 -8px 0 0}
  .pausa{right:6px;top:max(12px,env(safe-area-inset-top));bottom:auto;width:44px;height:44px;padding:0;justify-content:center}
  .pz-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

  /* el escenario es una ventana con borde duro: el teléfono la llena de ancho y la cámara lo recorre */
  .escena{overflow:hidden}
  .escena-in{
    --s:min(tan(atan2(100cqw - 4px, 418px)), .92);
    --D:calc(min(100cqw, 100cqh) - 8px);
  }
  .tel-marco{left:0;top:0;width:100%;height:100%;overflow:hidden}
  .tel-caja{left:calc(50% - var(--telW) / 2);transform:translateY(var(--camY,0px));transition:transform 1.1s var(--trazo)}
  .cam-abajo .tel-caja{--camY:calc(100cqh - var(--telH) - 10px)}
  .cam-arriba .tel-caja{--camY:8px}
  .cam-aro .tel-caja{--camY:calc(50cqh - 442px * var(--s))}
  /* el anillo abre la app y se va: después vive en la app y en los pasos */
  .anillo{z-index:2}
  .anda .anillo{animation:a-sale .8s var(--entra) 2s both}
  html:not(.mov) .anillo{display:none}
}
@keyframes a-sale{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}
@media (max-width:379px){ .cta-t span{display:none} }
@media (max-width:374px),(max-width:959px) and (max-height:700px){
  .que-es{font-size:14px;line-height:20px}
  .pasos li{font-size:15px}
  .tienda-n{font-size:17px}
}
/* sin alto: la página baja con scroll y el escenario tiene alto propio */
@media (max-height:599px){
  .pagina{height:auto;min-height:100vh;min-height:100svh}
  .escena{flex:none;height:min(520px,130vw)}
  .pausa{position:absolute}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ex style="" del HTML (CSP sin 'unsafe-inline'): #pagina para ganarle a las reglas de clase, como el inline */
#pagina .e-1{height:22px;width:auto;margin-left:2px}
#pagina .e-2{flex:1}
#pagina .e-3{width:36px;height:36px}
#pagina .e-4{width:26px;height:26px;margin-top:3px}
#pagina .e-5{display:flex;flex-direction:column;gap:2px}
#pagina .e-6{flex:1;min-width:0;display:flex;flex-direction:column}
#pagina .e-7{padding:0 14px 0 8px}
#pagina .e-8{font-weight:400;white-space:nowrap}
#pagina .e-9{background:#E2E0E6;color:#6F6A78}
#pagina .e-10{height:52px;margin-top:8px;display:flex;align-items:center;gap:4px;margin-right:-12px}
#pagina .e-11{position:relative;flex:1}
#pagina .e-12{left:18px;top:24px;width:56px;height:56px;--y0:520px;--y1:-110px;--dur:11s;--del:-2s}
#pagina .e-13{left:236px;top:8px;width:72px;height:72px;--y0:540px;--y1:-110px;--dur:14s;--del:-9s}
#pagina .e-14{left:302px;top:150px;width:44px;height:44px;--y0:400px;--y1:-230px;--dur:12s;--del:-5s}
#pagina .e-15{left:0px;top:330px;width:44px;height:44px;--y0:220px;--y1:-410px;--dur:13s;--del:-7s}
#pagina .e-16{left:280px;top:460px;width:64px;height:64px;--y0:100px;--y1:-560px;--dur:15s;--del:-1s}
#pagina .e-17{left:52px;top:476px;width:48px;height:48px;--y0:90px;--y1:-560px;--dur:12.5s;--del:-11s}
#pagina .e-18{position:absolute;left:43px;top:115px;width:264px;display:flex;flex-direction:column;align-items:center;gap:12px}
#pagina .e-19{position:relative;width:264px;height:264px}
#pagina .e-20{left:0;top:0;width:264px;height:264px}
#pagina .e-21{text-align:center;color:var(--pizarra);font-size:16px;line-height:24px;padding:0 12px 16px}