/* Local Bite web — negro, lima neón y cristal (referencia: el mockup de Local Bite y el logo de
   mindLab que mandó Leo el 2026-09-22, en static/img). Reglas de Leo del mismo día: ninguna
   pantalla hace scroll vertical; una sola pregunta por pantalla, solo la pregunta y sus
   respuestas; los resultados son tarjetas de cristal a pantalla completa con la foto del lugar,
   una por lugar, con desplazamiento LATERAL y un 10 % de margen a cada lado.
   Sin estilos en línea: el CSP (style-src 'self') los bloquea; todo estado entra por clases. */

/* Onest variable, 400-700 (SIL OFL 1.1, fonts/OFL-Onest.txt), auto-hospedada: el CSP no deja cargar
   Google Fonts. Es la letra del mockup de Diana (2026-09-24): medida contra él, alto de mayúscula,
   ancho y grosor coinciden a menos del 2 %. ss01 da la «y» recta del mockup (la de Onest es curva). */
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/onest-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/onest-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --lime-rgb:222,251,84;--lime:rgb(var(--lime-rgb));--on-lime:#060702;
  --bg:#000;--surface:#111213;--surface2:#1A1B1D;--surface3:#232427;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --text:#F4F5F0;--text2:rgba(244,245,240,.64);--text3:rgba(244,245,240,.42);
  --ok:#86EFAC;--danger:#FCA5A5;
  --ease:cubic-bezier(.22,1,.36,1);--col:480px;
  /* El riel de tarjetas mide lo que la columna: en móvil el ancho de la pantalla */
  --rail:min(100vw,var(--col));
  --dock:52px;
  /* Medidas del mockup de Diana (2026-09-24, pantalla de 390 px): botones de 336 × 55, círculos de
     40 y 42, margen lateral de 27. Los espacios siguen la escala áurea: cada uno es el anterior × φ. */
  --edge:27px;--row:55px;--ic:42px;--inset:6.5px;
  --g5:5px;--g8:8px;--g13:13px;--g21:21px;--g34:34px;--g55:55px;
  --ask-gap:var(--g34);--dock-gap:var(--g34);--dock-bottom:var(--g34);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
html{background:var(--bg);color:var(--text);font-family:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-feature-settings:'ss01';font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{background:var(--bg);position:relative;overflow-wrap:anywhere}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;background:none}
a{color:inherit;-webkit-tap-highlight-color:transparent}
::selection{background:rgba(var(--lime-rgb),.35)}
svg.i{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
[hidden]{display:none!important}
em{font-style:normal;color:var(--lime)}

/* ── Fondo: una foto de comida o de un restaurante del mundo (CC0, static/img/bg) que se funde a
   negro hacia abajo, donde van la pregunta y las respuestas. Dos capas para el fundido cruzado. ── */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000}
.bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.1s ease,transform 12s ease-out}
.bg img.on{opacity:1;transform:scale(1)}
.bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.34) 22%,rgba(0,0,0,.78) 48%,rgba(0,0,0,.96) 64%,#000 78%)}
.bg.dim img.on{opacity:.45}
.bg.dim::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.9) 40%,#000 62%)}
.bg.off img{opacity:0}
/* Las fotos de los cuatro pasos (Diana, 2026-09-24: tacos, borsch, jachapuri, tom yum) ya vienen
   oscuras abajo y con el plato arriba a la derecha: casi sin velo, para que el plato brille. En
   pantallas anchas la foto vertical no se estira: va del alto de la ventana detrás de la columna,
   con los bordes fundidos a negro. */
.bg img.art{object-position:50% 0}
.bg.art::after{background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,.16) 56%,rgba(0,0,0,.5) 100%)}
/* El mercado de la búsqueda (Diana, 2026-09-25): velo suave, que la foto se vea y la tarjeta se lea */
.bg.soft::after{background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,.6) 68%,rgba(0,0,0,.86) 100%)}
@media(min-aspect-ratio:3/4){.bg img.art{margin:0 auto;width:max(var(--col),calc(100dvh * .4615));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}}

/* ── Manchas de lima muy tenues que respiran, más grano ── */
.glow{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;transition:opacity .8s ease}
body.art .glow{opacity:0}
.glow i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.glow i:nth-child(1){width:70vmax;height:70vmax;right:-38vmax;top:-34vmax;background:radial-gradient(circle,rgba(var(--lime-rgb),.14),transparent 65%);animation:drift 26s ease-in-out infinite}
.glow i:nth-child(2){width:60vmax;height:60vmax;left:-36vmax;bottom:-30vmax;background:radial-gradient(circle,rgba(var(--lime-rgb),.08),transparent 65%);animation:drift 34s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4vmax,5vmax,0) scale(1.08)}}
.glow::after{content:'';position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── Logo oficial de Local Bite (static/img/localbite-wordmark.*: el texto y el pin, con
   fondo transparente, recortados del cuadrado negro que mandó Leo el 2026-09-22) ── */
.wordmark{display:block;height:auto}
.wordmark.small{height:37px;width:auto}
.wordmark.hero{width:min(58vw,240px);margin:0 auto;filter:drop-shadow(0 8px 30px rgba(0,0,0,.6))}

/* ── Estructura: la página mide exactamente la pantalla y reparte el alto en columna ── */
.page{position:relative;z-index:1;height:100dvh;display:flex;flex-direction:column}
.top{position:relative;flex:none;width:100%;max-width:var(--col);margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + var(--g5)) var(--edge) 0;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:calc(env(safe-area-inset-top,0px) + var(--g5) + 48px)}
/* El «2 / 4» del mockup: centrado en la fila del logo, tenue */
.stepno{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + var(--g5) + 24px);transform:translate(-50%,-50%);font-size:13px;font-weight:500;color:rgba(255,255,255,.3);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.brand{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.tools{display:flex;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:rgba(6,6,6,.72);color:var(--text);font-size:13.5px;font-weight:600;white-space:nowrap;transition:transform .18s var(--ease),background .2s}
.chip:active{transform:scale(.94)}
.chip.coins svg.i{color:var(--lime)}
.circle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:0;background:rgba(6,6,6,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text);flex-shrink:0;text-decoration:none;transition:transform .18s var(--ease),background .2s}
/* Aro de 1 px del mockup, con degradado: en el círculo, gris que se enciende en lima abajo a la
   derecha. Va en ::before con máscara porque un borde con degradado taparía el cristal de adentro.
   El ::after da 44 px de dedo al círculo de 40. */
.circle::before,.ans::before,.tile::before,.dock::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.circle::before{background:linear-gradient(135deg,rgba(255,255,255,.14) 30%,rgba(255,255,255,.1) 55%,rgba(var(--lime-rgb),.9))}
.circle::after{content:'';position:absolute;inset:-2px;border-radius:50%}
.circle:active{transform:scale(.92)}
.circle.lime{background:var(--lime);color:var(--on-lime);box-shadow:0 0 24px rgba(var(--lime-rgb),.35)}
.circle.lime::before{display:none}
.circle svg.i{width:18px;height:18px;stroke-width:1.7}
/* Logo y perfil un 20 % más grandes que en el mockup (Diana, 2026-09-24): 37 y 48 px */
#profile-button{width:48px;height:48px}
#profile-button svg.i{width:22px;height:22px}
.circle:disabled{opacity:.35;cursor:default}

main{flex:1;min-height:0;width:100%;max-width:var(--col);margin:0 auto;padding:var(--g13) var(--edge) calc(var(--dock) + var(--dock-gap) + var(--dock-bottom) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column}
main.bare{padding-top:calc(env(safe-area-inset-top,0px) + 16px);padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px}
.view-anim{animation:viewIn .42s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.stagger>*{animation:viewIn .5s var(--ease) both}
.stagger>:nth-child(2){animation-delay:.05s}.stagger>:nth-child(3){animation-delay:.1s}.stagger>:nth-child(4){animation-delay:.15s}
.stagger>:nth-child(5){animation-delay:.2s}.stagger>:nth-child(6){animation-delay:.25s}

h1{font-size:clamp(30px,8.4vw,38px);font-weight:600;letter-spacing:-.01em;line-height:1.08;white-space:pre-line}
h2{font-size:clamp(22px,6.4vw,28px);font-weight:600;letter-spacing:-.01em;line-height:1.12}
h3{font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.lead{color:var(--text2);font-size:15px;line-height:1.5}
.hint{color:var(--text3);font-size:13px;line-height:1.45}
.eyebrow{font-size:13px;font-weight:600;color:var(--text2)}
.card{background:rgba(22,23,24,.66);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:24px;padding:18px}
.head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px}
.head .mid{flex:1;min-width:0;text-align:center;font-size:13px;font-weight:500;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{width:40px;flex-shrink:0}
.steps{display:flex;gap:6px;justify-content:center}
.steps i{width:6px;height:6px;border-radius:3px;background:var(--line2);transition:width .3s var(--ease),background .3s}
.steps i.on{background:rgba(var(--lime-rgb),.55)}
.steps i.now{width:22px;background:var(--lime)}

/* ── Una pregunta: ocupa el aire libre, centrada; las respuestas se apoyan abajo ── */
.question{flex:1;min-height:0;display:flex;align-items:center;overflow:hidden}
.answers{flex:none;display:flex;flex-direction:column;gap:var(--g8)}
/* ── Los cuatro pasos, como el mockup de Diana (2026-09-24): el título abajo del espacio libre y
   alineado con los círculos de los botones (el margen descuenta el lado de la letra), 34 px sobre
   las respuestas; botones de 55 a 8 px uno de otro; del círculo al texto, 13. ── */
.ask{gap:0}
.ask .question{align-items:flex-end;padding-bottom:var(--ask-gap)}
.ask h1{font-size:clamp(28px,8.72vw,34px);font-weight:600;letter-spacing:0;line-height:1.02;padding:.15em 0 0 calc(var(--inset) - .087em)}
.ans{position:relative;display:flex;align-items:center;gap:var(--g13);width:100%;min-height:var(--row);padding:var(--inset) var(--g13) var(--inset) var(--inset);border-radius:999px;background:rgba(8,8,8,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:0;color:var(--text);text-align:left;font-size:13.5px;font-weight:600;line-height:1.2;transition:transform .18s var(--ease),background .2s,box-shadow .2s}
.ans::before{background:linear-gradient(115deg,rgba(var(--lime-rgb),.5),rgba(255,255,255,.09) 32%,rgba(255,255,255,.07) 64%,rgba(var(--lime-rgb),.5))}
.ans:active{transform:scale(.98)}
.ans .ic{width:var(--ic);height:var(--ic);border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);color:var(--lime);flex-shrink:0;transition:background .2s,color .2s,box-shadow .2s}
.ans .ic svg.i{width:19px;height:19px;stroke-width:1.7}
.ans .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ans.two .txt>span{font-size:13px}
.ans .txt small{font-size:11px;font-weight:500;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ans .chev{width:16px;height:16px;stroke-width:1.6;color:rgba(255,255,255,.42)}
.ans.saved{box-shadow:0 0 22px rgba(var(--lime-rgb),.1)}
.ans.saved::before{background:linear-gradient(100deg,rgba(var(--lime-rgb),.9),rgba(var(--lime-rgb),.38) 50%,rgba(var(--lime-rgb),.62))}
.ans.saved .ic{background:var(--lime);color:var(--on-lime);box-shadow:0 0 18px rgba(var(--lime-rgb),.35)}
/* La respuesta elegida se pinta de lima como «Определить местоположение» (Diana, 2026-09-24) */
.ans.primary,.ans.on{background:var(--lime);color:var(--on-lime);box-shadow:0 10px 34px rgba(var(--lime-rgb),.3)}
.ans.primary::before,.ans.on::before{display:none}
.ans.primary .ic,.ans.on .ic{background:rgba(0,0,0,.1);color:var(--on-lime);box-shadow:none}
.ans.primary .chev,.ans.on .chev{color:rgba(6,7,2,.45)}
.ans.on .txt small{color:rgba(6,7,2,.6)}
.ans.primary:disabled{opacity:.6;cursor:progress}
.ans.input{padding:var(--inset) var(--inset) var(--inset) var(--g21);cursor:text}
.ans.input input{flex:1;min-width:0;min-height:var(--ic);background:none;border:0;outline:none;font-size:16px;font-weight:500;color:var(--text)}
/* 16 px en el campo, porque con menos el iPhone agranda la página al tocarlo; la pista va a 14 como en el mockup */
.ans.input input::placeholder{font-size:14px;font-weight:500;color:rgba(255,255,255,.4)}
.ans.input .circle{width:var(--ic);height:var(--ic)}
/* «Когда» y «Как добираешься»: dos botones lado a lado (Diana, 2026-09-24), con el marco del sitio.
   Alto = dos botones más su separación (118 en el mockup), 13 entre ambos, 21 de relleno, icono de 34. */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--g13)}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--g13);min-height:calc(2 * var(--row) + var(--g8));padding:var(--g21);border-radius:28px;background:rgba(8,8,8,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:0;color:var(--text);text-align:left;font-size:15px;font-weight:500;line-height:1.2;transition:transform .18s var(--ease),background .25s,color .25s,box-shadow .25s}
.tile::before{background:linear-gradient(135deg,rgba(var(--lime-rgb),.5),rgba(255,255,255,.09) 38%,rgba(255,255,255,.07) 62%,rgba(var(--lime-rgb),.5))}
.tile svg.i{width:34px;height:34px;color:var(--lime);stroke-width:1.6}
.tile:active{transform:scale(.97)}
.tile.on{background:var(--lime);color:var(--on-lime);box-shadow:0 10px 34px rgba(var(--lime-rgb),.3)}
.tile.on::before{display:none}
.tile.on svg.i{color:var(--on-lime)}
/* Al elegir una respuesta (Leo, 2026-10-01): la elegida se enciende con un pulso, las demás se
   oscurecen y después la pregunta sale y entra la siguiente (choose / pick / leave en app.js).
   Oscurecer va por filter y scale, no por opacity ni transform: .stagger deja su animación de
   entrada fijada sobre esas dos propiedades y las taparía. Con GPS, la elegida late mientras ubica. */
.answers .dim{filter:brightness(.3) saturate(.45);scale:.965;pointer-events:none;
  transition:filter .36s var(--ease),scale .36s var(--ease),background .25s,color .25s,box-shadow .25s}
.answers .chosen{animation:pick-pop .44s var(--ease);transition:transform .18s var(--ease),background .2s,color .2s,box-shadow .2s}  /* el texto se oscurece junto con el lima, no antes */
.answers .ans.chosen:disabled{opacity:1;cursor:progress;animation:pick-pop .44s var(--ease),pick-wait 1.2s .44s ease-in-out infinite}
#app.leaving{animation:view-out .19s ease-in both}
@keyframes pick-pop{0%{scale:1}28%{scale:.96}64%{scale:1.035}100%{scale:1}}
@keyframes pick-wait{0%,100%{box-shadow:0 10px 34px rgba(var(--lime-rgb),.3)}50%{box-shadow:0 10px 48px rgba(var(--lime-rgb),.62)}}
@keyframes view-out{to{opacity:0;transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.answers .chosen,.answers .ans.chosen:disabled,#app.leaving{animation:none}.answers .dim{transition:none}}
/* Menos de tres lugares (Diana, 2026-09-24): el porqué y, en un toque, el ajuste que trae más */
.why-not{display:flex;flex-direction:column;gap:var(--g13)}
.why-not .lead{padding-left:var(--inset);max-width:32ch;color:var(--text2);font-size:14px}
.ans.plain{padding-left:var(--g21)}
/* Compacta (Diana, 2026-09-25: con cuatro ajustes no cabía en la tarjeta): icono de 34, título de 20 y los
   botones en dos columnas de 44 px; si son impares, el último va a lo ancho */
.gcard.more.tip{gap:var(--g8);padding:var(--g21)}
.gcard.more.tip>svg.i{width:34px;height:34px}
.gcard.more.tip h3{font-size:20px}
.gcard.more.tip .lead{font-size:13.5px;line-height:1.35;margin-bottom:var(--g5)}
.gcard.more.tip .fixes{display:grid;grid-template-columns:1fr 1fr;gap:var(--g8);width:100%}
.gcard.more.tip .fixes .btn{width:100%;min-width:0;min-height:44px;padding:8px 10px;font-size:13.5px;line-height:1.2}
.gcard.more.tip .fixes .btn:last-child:nth-child(odd){grid-column:1/-1}
@media(max-height:639px){.gcard.more.tip{padding:var(--g13);gap:var(--g5)}.gcard.more.tip>svg.i{display:none}.gcard.more.tip h3{font-size:18px}.gcard.more.tip .lead{font-size:12.5px;margin-bottom:0}.gcard.more.tip .fixes{gap:var(--g5)}.gcard.more.tip .fixes .btn{min-height:38px;font-size:13px}}

/* ── Más filtros: filas de chips, y el botón de texto que lleva a ellas ── */
.textbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;color:var(--text2);font-size:14.5px;font-weight:600;border-radius:999px}
.textbtn svg.i{color:var(--lime)}
.group{display:flex;flex-direction:column;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chipb{min-height:44px;padding:0 16px;border-radius:999px;background:rgba(22,23,24,.66);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line2);color:var(--text);font-size:14.5px;font-weight:600;transition:background .2s,color .2s,transform .18s var(--ease)}
.chipb:active{transform:scale(.96)}
.chipb.on{background:var(--lime);color:var(--on-lime);border-color:transparent}

/* ── Buscando: el dato curioso al centro; abajo, barra fina y segundos (Leo, 2026-09-23) ── */
.loading{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:28px}
.factcard{position:relative;display:flex;flex-direction:column;gap:12px;padding:30px 24px 28px;border-radius:30px;cursor:pointer;
  background:rgba(18,19,20,.62);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(var(--lime-rgb),.35);box-shadow:0 0 40px rgba(var(--lime-rgb),.12),inset 0 1px 0 rgba(255,255,255,.08)}
.factcard .quote{position:absolute;top:-6px;right:20px;font-size:110px;line-height:1;font-weight:800;color:rgba(var(--lime-rgb),.22);pointer-events:none}
.factcard .eyebrow{color:var(--lime);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.fact-text{font-size:clamp(20px,5.6vw,25px);font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--text);min-height:5.4em}
.factcard.in .fact-text{animation:viewIn .6s var(--ease) both}
.seeking{display:flex;flex-direction:column;align-items:center;gap:10px}
.seeking .bar{position:relative;width:160px;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.seeking .bar i{position:absolute;top:0;bottom:0;width:40%;border-radius:3px;background:var(--lime);box-shadow:0 0 12px rgba(var(--lime-rgb),.8);animation:seek 1.4s ease-in-out infinite}
@keyframes seek{0%{left:-40%}100%{left:100%}}
.seeking p{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text2)}
.seeking .pulse{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:breathe 1.2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.seeking .secs{color:var(--text3);font-variant-numeric:tabular-nums}

/* ── Botones píldora ── */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:var(--row);padding:12px 22px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:16px;text-decoration:none;color:var(--text);overflow-wrap:normal;position:relative;transition:transform .18s var(--ease),box-shadow .2s,opacity .2s,background .2s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:progress}
.btn.primary{color:var(--on-lime);background:var(--lime);box-shadow:0 10px 34px rgba(var(--lime-rgb),.28),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.primary .go{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(11,13,5,.08)}
.btn.ghost{background:var(--surface);border-color:var(--line2)}
.btn.ghost:active{background:var(--surface2)}
.btn.outline{border-color:rgba(var(--lime-rgb),.5);color:var(--lime);background:rgba(var(--lime-rgb),.06)}
.btn.small{min-height:46px;font-size:14.5px;padding:8px 18px}
.actions{display:flex;flex-direction:column;gap:10px}

/* ── Campo con etiqueta flotante (necesita placeholder=" ") ── */
.field{position:relative}
.field input{width:100%;min-height:58px;padding:23px 20px 8px;border-radius:20px;background:var(--surface);border:1px solid var(--line2);color:var(--text);outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.field label{position:absolute;left:20px;right:20px;top:18px;font-size:15px;color:var(--text3);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:top .18s var(--ease),font-size .18s var(--ease),color .18s}
.field input:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(var(--lime-rgb),.14)}
.field input:focus~label,.field input:not(:placeholder-shown)~label{top:8px;font-size:11px;font-weight:600;color:var(--lime)}
.field input::placeholder{color:transparent}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--surface) inset;caret-color:var(--text)}
.or{display:flex;align-items:center;gap:12px;width:100%;color:var(--text3);font-size:12.5px;font-weight:500;text-align:center}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line2)}


/* ── Buscando: un punto lima que late sobre una rejilla de mapa ── */
.searching{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}
.searching+.fact{margin-top:0}
.radar{position:relative;width:min(170px,30vh);height:min(170px,30vh);margin-bottom:10px;border-radius:50%;overflow:hidden;
  background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/28px 28px,var(--surface2);
  border:1px solid var(--line2);-webkit-mask:radial-gradient(circle,#000 62%,transparent 71%);mask:radial-gradient(circle,#000 62%,transparent 71%)}
.radar i{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--lime);box-shadow:0 0 22px rgba(var(--lime-rgb),.8)}
.radar i+i,.radar i+i+i{background:transparent;border:2px solid rgba(var(--lime-rgb),.55);box-shadow:none;animation:ping 2.2s var(--ease) infinite}
.radar i+i+i{animation-delay:1.1s}
@keyframes ping{from{transform:scale(1);opacity:1}to{transform:scale(8);opacity:0}}
.searching p{white-space:pre-line;font-weight:600;font-size:16px}

/* ── Resultados: un riel lateral de tarjetas de cristal, una por lugar ── */
.rail{flex:1;min-height:0;display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  margin:0 -18px;padding:4px calc(var(--rail) * .1) 10px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.gcard{position:relative;isolation:isolate;flex:0 0 calc(var(--rail) * .8);scroll-snap-align:center;scroll-snap-stop:always;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:32px;overflow:hidden;background:var(--surface2);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.28)}
.gcard .photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.gcard .photo.in{opacity:1}
.gcard .nophoto{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;padding-bottom:42%;color:rgba(var(--lime-rgb),.9);
  background:radial-gradient(55% 60% at 80% 18%,rgba(var(--lime-rgb),.45),transparent 70%),radial-gradient(50% 55% at 12% 92%,rgba(var(--lime-rgb),.28),transparent 70%),var(--surface2)}
.gcard .nophoto svg.i{width:26%;height:26%;stroke-width:1.2;filter:drop-shadow(0 0 18px rgba(var(--lime-rgb),.5))}
/* Brillo de cristal sobre la foto: luz arriba, sombra abajo para que el panel se lea */
.gcard::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 24%,rgba(0,0,0,0) 50%,rgba(0,0,0,.45) 100%)}
.gcard .num{position:absolute;z-index:2;top:14px;left:14px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--lime);color:var(--on-lime);font-size:15px;font-weight:800;box-shadow:0 0 18px rgba(var(--lime-rgb),.55)}
.gcard .tag{position:absolute;z-index:2;top:16px;right:14px;max-width:60%;padding:7px 12px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--text);background:rgba(20,20,20,.45);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pane{position:relative;z-index:2;margin:8px;padding:16px 16px 12px;border-radius:26px;display:flex;flex-direction:column;gap:8px;overflow:hidden;
  background:linear-gradient(180deg,rgba(44,46,40,.50),rgba(14,15,12,.74));backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 10px 30px rgba(0,0,0,.35)}
/* Un destello cruza el cristal una vez al aparecer */
.pane::after{content:'';position:absolute;top:-60%;bottom:-60%;left:-30%;width:40%;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.10) 46%,rgba(255,255,255,.22) 52%,transparent 70%);transform:translateX(-150%) rotate(8deg);animation:shine 1.5s var(--ease) .4s 1 both}
@keyframes shine{to{transform:translateX(420%) rotate(8deg)}}
.pane h3{flex-shrink:0;font-size:20px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;align-items:center;gap:5px;font-size:13.5px;color:var(--text2);flex-wrap:wrap;line-height:1.35}
.meta svg.i{width:15px;height:15px}
.meta .star{color:var(--lime);fill:var(--lime);stroke:var(--lime)}
.meta b{color:var(--text);font-weight:700}
.meta .lime{color:var(--lime);font-weight:600}
.meta .open{color:var(--ok)}
.meta .sep{color:var(--text3)}
.why{list-style:none;display:flex;flex-direction:column;gap:5px;margin-top:2px}
.why li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.4;color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.why li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px rgba(var(--lime-rgb),.7)}
.why li:nth-child(n+3){display:none}
.work{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text2)}
.work svg.i{color:var(--lime);width:16px;height:16px}
.work b{color:var(--text)}
.acts{display:flex;align-items:center;gap:8px;margin-top:4px}
.acts .btn{flex:1;min-width:0}
.acts .btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acts .circle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.credit{font-size:10.5px;color:var(--text3);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard.more{justify-content:center;align-items:center;text-align:center;padding:24px;gap:10px;
  background:radial-gradient(60% 50% at 70% 20%,rgba(var(--lime-rgb),.35),transparent 70%),radial-gradient(50% 45% at 20% 90%,rgba(var(--lime-rgb),.2),transparent 70%),var(--surface2)}
/* ── «Избранное» y «История поиска» (Diana, 2026-09-25) ── */
.circle.fav{color:var(--text)}
.circle.fav.on{color:var(--lime)}
.circle.fav.on svg.i{fill:var(--lime);filter:drop-shadow(0 0 8px rgba(var(--lime-rgb),.55))}
/* With the heart the row has three buttons: on a 320 px phone they tighten instead of pushing «Поделиться» out */
@media(max-width:360px){.acts{gap:6px}.acts .circle{width:36px;height:36px}.acts .btn{padding-inline:12px}}
.listhead{display:flex;flex-direction:column;gap:var(--g5)}
.listhead .lead{font-size:13.5px;color:var(--text3)}
.chips.cities{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:none}
.chips.cities::-webkit-scrollbar{display:none}
.chips.cities .chipb{flex:none;min-height:38px}
/* Without a photo (or until it arrives) the category glows in the room above the pane and shrinks with it */
.gcard .glyph{position:relative;z-index:0;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;color:rgba(var(--lime-rgb),.9);pointer-events:none;container-type:size}
.gcard .glyph svg.i{height:min(56%,96px);width:auto;aspect-ratio:1;stroke-width:1.2;filter:drop-shadow(0 0 18px rgba(var(--lime-rgb),.5))}
@container (max-height:64px){.glyph svg.i{display:none}}
.pane .kind{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lime);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.pane .kind svg.i{width:14px;height:14px;flex-shrink:0}
.gcard.hist .pane{gap:var(--g13)}
.hhead{display:flex;align-items:center;gap:var(--g13)}
.hhead .ic{width:var(--ic);height:var(--ic);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--lime);color:var(--on-lime)}
.hhead .ic svg.i{width:19px;height:19px}
.hhead .txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.hhead .txt b{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hhead .txt small{font-size:12.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hhead .ic.more{width:auto;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
@media(max-width:360px){.hhead{gap:var(--g8)}.hhead .ic.more{padding:0 9px}}
.hplaces{list-style:none;display:flex;flex-direction:column;gap:var(--g5)}
.hplaces li{display:flex;align-items:center;gap:var(--g8)}
.hplaces a{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--g8);min-height:36px;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text);text-decoration:none;font-size:13.5px;font-weight:500}
.hplaces a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hplaces a small{display:flex;align-items:center;gap:3px;flex-shrink:0;color:var(--text2);font-size:12.5px}
.hplaces a small svg.i{width:13px;height:13px}
.hplaces .circle{width:36px;height:36px}
.hplaces .circle svg.i{width:16px;height:16px}
.dots.count{min-width:64px;justify-content:center;font-size:13px;font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums}
@media(max-height:639px){.hhead .txt small+small{display:none}.gcard.hist .pane{gap:var(--g8)}}
/* Short screens: the name, the facts and the buttons stay; the «why» line gives way */
@media(max-height:600px){.pane{gap:5px;padding:12px 14px 10px}.why{display:none}.pane h3{-webkit-line-clamp:1}}
/* El brillo de cristal (::before, z-index 1) quedaba encima del texto de estas tarjetas y lo apagaba */
.gcard.more>*{position:relative;z-index:2}
.gcard.more>svg.i{width:64px;height:64px;color:var(--lime);stroke-width:1.4;filter:drop-shadow(0 0 16px rgba(var(--lime-rgb),.5))}
.gcard.more h3{font-size:24px;letter-spacing:-.02em}
.gcard.more .lead{margin-bottom:6px}
.gcard.more .btn{width:auto;min-width:70%}
.foot{flex:none;display:flex;align-items:center;justify-content:center;gap:18px;min-height:44px}
.dots{display:flex;gap:6px;align-items:center}
.dots i{width:6px;height:6px;border-radius:3px;background:var(--line2);transition:width .3s var(--ease),background .3s}
.dots i.on{width:20px;background:var(--lime)}
.foot .circle{width:40px;height:40px}

/* ── Perfil ── */
.me{display:flex;align-items:center;gap:14px}
.avatar{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--surface2);border:1px solid var(--line2);font-size:20px;font-weight:700;color:var(--text)}
.avatar svg.i{width:24px;height:24px;color:var(--text2)}
.me .txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.me .txt b{font-size:20px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .txt small{color:var(--text3);font-size:13px}
.plan-text{white-space:pre-line;line-height:1.45;font-size:13.5px;color:var(--text2)}
.copyrow{display:flex;gap:8px}
.copyrow input{flex:1;min-width:0;min-height:46px;padding:8px 16px;border-radius:999px;border:1px solid var(--line2);background:var(--surface2);color:var(--text2);font-size:13px;outline:none}
.copyrow .btn{width:auto;min-height:46px;padding:0 16px}
.stats{display:flex;gap:8px;flex-wrap:wrap}
.stats span{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;background:var(--surface2);color:var(--text2)}
.stats svg.i{color:var(--lime)}
.error{color:var(--danger);background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.28);padding:11px 14px;border-radius:16px;font-size:14px}
.bottom{margin-top:auto}

/* ── Dock flotante: la barra de avance del cuestionario ──
   Leo, 2026-09-22 noche: fino, traslúcido, sin círculos, iconos planos; los pasos ya recorridos se
   pueden tocar y los que faltan no; siempre separado de los botones (el hueco que le guarda <main>
   sale de --dock y no cambia: el dock solo se hace más chico).
   Leo, 2026-09-30: "mucho más dinámico, que se mueva y cambie de forma". Un riel pasa por los cinco
   iconos y se llena de lima del primero al actual; una chispa corre en la punta y el icono se
   enciende cuando la línea llega. A cada paso la cápsula se afina 3 px y se estrecha 8 px con un
   rebote, y su borde se carga de lima de izquierda a derecha. Mientras busca, la luz corre hacia el
   último icono; cuando llegan los lugares, un destello cruza la barra y enciende los cinco.
   El estado entra por data-fill / data-reach / data-jump y las clases busy / complete que pone
   renderDock (el CSP no deja estilos en línea); data-jump alarga el viaje si la línea salta varios
   pasos (una búsqueda nueva la rebobina entera). */
@property --dock-rim{syntax:'<percentage>';inherits:true;initial-value:10%}
.dock{--d-k:0;--d-p:0;--d-r:0;--d-t:.72s;--d-pop:.4s;--dock-rim:10%;--glide:cubic-bezier(.65,0,.35,1);--jelly:cubic-bezier(.34,1.45,.64,1);
  position:fixed;left:50%;bottom:calc(var(--dock-bottom) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:200;display:flex;align-items:stretch;
  width:calc(min(100vw,var(--col)) - 2 * var(--edge) - var(--d-k) * 8px);height:max(40px,calc(var(--dock) - var(--d-k) * 3px));padding:0;border-radius:999px;
  background:rgba(6,6,6,.78);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 calc(var(--d-k) * 7px) rgba(var(--lime-rgb),calc(var(--d-k) * .04));
  transition:width var(--d-t) var(--jelly),height var(--d-t) var(--jelly),box-shadow var(--d-t) ease,--dock-rim var(--d-t) var(--glide)}
.dock[data-fill="1"]{--d-k:1;--d-p:.25;--dock-rim:30%}
.dock[data-fill="2"]{--d-k:2;--d-p:.5;--dock-rim:50%}
.dock[data-fill="3"]{--d-k:3;--d-p:.75;--dock-rim:70%}
.dock[data-fill="4"]{--d-k:4;--d-p:1;--dock-rim:90%}
.dock.complete{--dock-rim:135%;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 34px rgba(var(--lime-rgb),.22)}
.dock[data-reach="1"]{--d-r:.25}.dock[data-reach="2"]{--d-r:.5}.dock[data-reach="3"]{--d-r:.75}.dock[data-reach="4"]{--d-r:1}
.dock[data-jump="2"]{--d-t:.86s;--d-pop:.56s}.dock[data-jump="3"]{--d-t:.98s;--d-pop:.68s}.dock[data-jump="4"]{--d-t:1.08s;--d-pop:.8s}
.dock.in{animation:dock-in .8s var(--ease)}
.dock::before{background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.07) 40%,rgba(255,255,255,.09))}
/* el borde que se va cargando de lima hasta el paso actual (--dock-rim, animable gracias a @property) */
.dock::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  background:linear-gradient(90deg,rgba(var(--lime-rgb),.85),rgba(var(--lime-rgb),.5) calc(var(--dock-rim) - 18%),rgba(var(--lime-rgb),0) var(--dock-rim))}
/* El riel va del centro del primer icono al del último (cada botón mide 1/5) y la máscara le abre
   un hueco alrededor de cada icono: la línea une los iconos sin pasarles por encima. */
.dock .track{--h:15px;--holes:linear-gradient(90deg,transparent var(--h),#000 calc(var(--h) + 4px) calc(25% - var(--h) - 4px),transparent calc(25% - var(--h)) calc(25% + var(--h)),#000 calc(25% + var(--h) + 4px) calc(50% - var(--h) - 4px),transparent calc(50% - var(--h)) calc(50% + var(--h)),#000 calc(50% + var(--h) + 4px) calc(75% - var(--h) - 4px),transparent calc(75% - var(--h)) calc(75% + var(--h)),#000 calc(75% + var(--h) + 4px) calc(100% - var(--h) - 4px),transparent calc(100% - var(--h)));
  position:absolute;left:10%;right:10%;top:50%;height:20px;margin-top:-10px;overflow:hidden;pointer-events:none;-webkit-mask-image:var(--holes);mask-image:var(--holes)}
.dock .track::before{content:''}
.dock .track::before,.dock .track b{position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;border-radius:2px}
.dock .track::before{background:rgba(255,255,255,.16)}
.dock .reach{background:rgba(var(--lime-rgb),.3);transform:translateX(calc((var(--d-r) - 1) * 100%));transition:transform var(--d-t) var(--glide)}
.dock .fill{background:var(--lime);box-shadow:0 0 5px rgba(var(--lime-rgb),.9),0 0 10px rgba(var(--lime-rgb),.35);transform:translateX(calc((var(--d-p) - 1) * 100%));transition:transform var(--d-t) var(--glide)}
/* la chispa de la punta: se ve mientras la línea viaja; en reposo queda dentro del hueco del icono
   (mide menos que el hueco y su halo no llega al tramo siguiente) */
.dock .fill::after{content:'';position:absolute;right:0;top:50%;width:calc(var(--h) - 3px);height:3px;margin-top:-1.5px;border-radius:3px;background:linear-gradient(90deg,rgba(255,255,255,0),#F7FFDA);box-shadow:0 0 6px 1px rgba(236,255,170,.85)}
/* un brillo que recorre de vez en cuando lo ya encendido y entra en el paso actual */
.dock .fill::before{content:'';position:absolute;top:-1px;bottom:-1px;left:0;width:16%;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));transform:translateX(-100%);animation:dock-shimmer 4s 1.4s ease-in-out infinite}
/* buscando: pulsos de luz del cuarto icono al último */
.dock .track .flow{left:75%;width:25%;top:0;height:100%;margin-top:0;overflow:hidden;opacity:0;transition:opacity .4s}
.dock .flow::before{content:'';position:absolute;left:0;top:50%;width:45%;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,rgba(var(--lime-rgb),0),var(--lime) 70%,#F7FFDA);box-shadow:0 0 8px rgba(var(--lime-rgb),.8);transform:translateX(-100%)}
.dock.busy .flow{opacity:1}
.dock.busy .flow::before{animation:dock-flow 1s linear infinite}
/* llegaron los lugares: un destello cruza el riel y cada icono se enciende cuando pasa */
.dock .track .sweep{width:34%;height:4px;margin-top:-2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0));opacity:0;transform:translateX(-100%)}
.dock.complete .sweep{animation:dock-sweep 1.3s .62s linear}
/* Mockup de Diana: iconos planos, blancos; Diana, 2026-09-24: los ya elegidos en lima y encendidos.
   Los que faltan quedan en blanco apagado para que el avance se lea como algo que se enciende. */
.dock button{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;height:100%;border-radius:999px;background:none;border:0;
  color:rgba(255,255,255,.5);transition:color .35s var(--ease),transform .25s var(--ease)}
.dock button svg.i{position:relative;z-index:1;width:22px;height:22px;stroke-width:1.6;transition:transform .55s var(--jelly),filter .45s ease}
.dock button span{display:none}
.dock button:disabled{cursor:default}
.dock button:not(:disabled):active{transform:scale(.9)}
.dock button.done{color:var(--lime)}
.dock button.done svg.i{filter:drop-shadow(0 0 6px rgba(var(--lime-rgb),.55))}
.dock button.on{color:var(--lime);transition-delay:var(--d-pop),0s}
.dock button.on svg.i{transform:scale(1.16);filter:drop-shadow(0 0 8px rgba(var(--lime-rgb),.8));transition-delay:var(--d-pop);animation:dock-breathe 2.8s calc(var(--d-pop) + .7s) ease-in-out infinite}
/* al rebobinar (búsqueda nueva) los iconos se apagan en orden, conforme la línea se retira */
.dock button.locked{transition-delay:var(--d-dim,0s),0s}
.dock button.locked svg.i{transition-delay:var(--d-dim,0s)}
.dock[data-jump="4"] button:nth-of-type(5){--d-dim:.1s}.dock[data-jump="4"] button:nth-of-type(4){--d-dim:.38s}
.dock[data-jump="4"] button:nth-of-type(3){--d-dim:.52s}.dock[data-jump="4"] button:nth-of-type(2){--d-dim:.66s}
/* destellos detrás del icono (luz difusa, no un aro): al encenderse y en la ola final */
.dock button::before,.dock button::after{content:'';position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(var(--lime-rgb),.5),rgba(var(--lime-rgb),.16) 55%,rgba(var(--lime-rgb),0))}
.dock button.on::after{animation:dock-bloom .8s var(--d-pop) var(--ease)}
.dock button:nth-of-type(2){--d-i:1}.dock button:nth-of-type(3){--d-i:2}.dock button:nth-of-type(4){--d-i:3}.dock button:nth-of-type(5){--d-i:4}
.dock.complete button::before{animation:dock-wave .8s calc(.5s + var(--d-i,0) * .245s) ease-out}
@media(hover:hover){.dock button.done:not(:disabled):hover svg.i{transform:translateY(-2px) scale(1.08)}}
@media(max-width:360px){.dock .track{--h:13px}}
@keyframes dock-in{from{opacity:0;transform:translate(-50%,20px) scale(.92)}}
@keyframes dock-shimmer{0%{opacity:0}10%,55%{opacity:1}65%,100%{opacity:0;transform:translateX(525%)}}
@keyframes dock-flow{to{transform:translateX(222%)}}
@keyframes dock-sweep{0%{opacity:0;transform:translateX(-100%)}10%,86%{opacity:1}100%{opacity:0;transform:translateX(295%)}}
@keyframes dock-breathe{0%,100%{filter:drop-shadow(0 0 8px rgba(var(--lime-rgb),.8))}50%{filter:drop-shadow(0 0 15px rgba(var(--lime-rgb),1))}}
@keyframes dock-bloom{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.9)}}
@keyframes dock-wave{0%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1.4)}}
@media(prefers-reduced-motion:reduce){.dock,.dock::after,.dock *,.dock *::before,.dock *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}}

/* ── Toast ── */
.toast{position:fixed;left:50%;bottom:calc(var(--dock) + var(--dock-bottom) + var(--g13) + env(safe-area-inset-bottom,0px));z-index:400;width:max-content;max-width:calc(100vw - 48px);padding:13px 20px;border-radius:20px;background:rgba(24,25,27,.95);border:1px solid rgba(var(--lime-rgb),.3);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 40px rgba(0,0,0,.6);color:var(--text);font-size:13.5px;font-weight:500;text-align:center;white-space:pre-line;line-height:1.45;opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── Entrada (Diana, 2026-10-06): sin invitados ni código. El logo y debajo las formas de entrar —
   Telegram, Google, correo— como cápsulas de cristal; el correo se abre en su lugar con el campo y
   luego el código. El bloque reparte el aire en proporción áurea, 1 arriba por 1.618 abajo. ── */
.center{text-align:center}
.login{justify-content:flex-start;gap:0;align-items:center}
.login::before{content:'';flex:1}
.login::after{content:'';flex:1.618}
.login .wordmark.hero{margin-bottom:var(--g55)}
.ways,.mailbox{display:flex;flex-direction:column;align-items:stretch;gap:var(--g13);width:100%;max-width:340px}
.way{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:var(--row);padding:0 22px;border-radius:999px;
  background:rgba(8,8,8,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line2);color:var(--text);font-size:16px;font-weight:600;text-decoration:none;
  transition:transform .18s var(--ease),background .2s,border-color .2s}
.way:first-child{border-color:rgba(var(--lime-rgb),.5);box-shadow:0 0 26px rgba(var(--lime-rgb),.1)}
.way svg.i{width:21px;height:21px;color:var(--lime)}
.way svg.g path{stroke:none}
.way svg.a{color:#fff}.way svg.a path{stroke:none;fill:currentColor}
.way svg.g path:nth-child(1){fill:#4285F4}.way svg.g path:nth-child(2){fill:#34A853}.way svg.g path:nth-child(3){fill:#FBBC05}.way svg.g path:nth-child(4){fill:#EA4335}
.way:active{transform:scale(.97)}
.mailbox input{width:100%;min-height:var(--row);padding:0 22px;border-radius:999px;background:rgba(8,8,8,.74);border:1px solid rgba(var(--lime-rgb),.45);color:var(--text);font-size:17px;font-weight:600;outline:none;text-align:center}
.mailbox input::placeholder{color:var(--text3);font-weight:500}
#email-code{font-size:26px;letter-spacing:.32em;font-variant-numeric:tabular-nums;padding-left:calc(22px + .32em)}
.mailbox .sent{color:var(--text2);font-size:14px;line-height:1.4;text-align:center;overflow-wrap:anywhere}
.mail-links{display:flex;gap:var(--g8)}
.mail-links .textbtn{flex:1;font-size:13.5px}
.mail-links .textbtn:disabled{opacity:.4}
.news{display:flex;align-items:flex-start;gap:10px;width:100%;max-width:340px;margin-top:var(--g21);color:var(--text2);font-size:13px;line-height:1.4;cursor:pointer}
.news input{flex:none;appearance:none;-webkit-appearance:none;display:grid;place-content:center;width:20px;height:20px;margin:0;border-radius:6px;
  border:1.5px solid rgba(255,255,255,.35);background:rgba(8,8,8,.6);cursor:pointer;transition:background .2s,border-color .2s}
.news input::after{content:'';width:10px;height:5px;border:solid var(--on-lime);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .22s var(--ease)}
.news input:checked{background:var(--lime);border-color:var(--lime)}
.news input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.news input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
#login-error{width:100%;max-width:340px;margin-top:var(--g13)}

/* ── Pantallas cortas, movimiento reducido, pantallas chicas y escritorio ── */
@media(max-height:740px){.wordmark.hero{width:150px}.login .lead,.login .hint{display:none}.why li:nth-child(n+2){display:none}.pane h3{font-size:18px}.fact-text{font-size:19px;min-height:6em}.chipb{min-height:38px;padding:0 11px;font-size:13.5px}.chips{gap:6px}.group{gap:5px}.textbtn{min-height:36px}#app.filters .question{display:none}h2{font-size:22px}.plan-text{font-size:13px;line-height:1.4}.copyrow input,.copyrow .btn{min-height:42px}}
@media(prefers-reduced-motion:reduce){.glow i{animation:none}.view-anim,.stagger>*{animation:none}.pane::after{display:none}.radar i+i,.radar i+i+i{animation-duration:4s}}
@media(max-width:360px){.wordmark.small{height:34px}.chip{padding:0 11px;font-size:12.5px}}
@media(hover:hover){.ans:not(.primary):not(.on):hover,.tile:not(.on):hover{background:var(--surface2)}.btn:not(:disabled):hover{filter:brightness(1.06)}.circle:not(:disabled):hover,.chip:hover{background:var(--surface2)}.circle.lime:hover,.circle.toggle.open:hover{background:var(--lime)}}
/* Pantallas bajas (menos de 640 px de alto, p. ej. un iPhone SE en Safari): la misma escala áurea un
   escalón abajo, para que los cinco botones del primer paso quepan sin scroll */
@media(max-height:639px){:root{--row:48px;--ic:36px;--inset:6px;--dock:46px;--ask-gap:var(--g21);--dock-gap:var(--g21);--dock-bottom:var(--g21)}.ask h1{font-size:28px}.answers{gap:var(--g5)}}

/* ── Cuenta (Diana, 2026-10-06): «Войти через Telegram», foto, nombre, ID, Coins con su
   renovación, Plus activo/no y los enlaces de pago. Mismo cristal y lima que el resto. ── */
.tg-wait{color:var(--text2);font-size:13px;line-height:1.4;text-align:center}
.avatar.edit{position:relative;cursor:pointer;overflow:visible;font-size:22px;font-weight:700;color:var(--text)}
.avatar.edit img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.avatar .cam{position:absolute;right:-3px;bottom:-3px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--lime);color:var(--on-lime);box-shadow:0 0 12px rgba(var(--lime-rgb),.45)}
.avatar .cam svg.i{width:14px;height:14px;color:var(--on-lime);stroke-width:2}
.me .txt{flex:1}
.me .uid{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.me-tools{display:flex;gap:var(--g8);flex-shrink:0}
.circle.small{width:36px;height:36px}
.circle.small svg.i{width:16px;height:16px}
.name-edit{flex:1;min-width:0;display:flex;align-items:center;gap:var(--g8)}
.name-edit input{flex:1;min-width:0;min-height:42px;padding:0 16px;border-radius:999px;background:rgba(8,8,8,.74);border:1px solid rgba(var(--lime-rgb),.45);color:var(--text);font-size:16px;font-weight:600;outline:none}
.me .txt .row{display:flex;align-items:center;gap:6px;min-width:0}
.me .txt .row b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .uid{white-space:nowrap}
.mini{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;color:var(--text3);transition:color .2s,background .2s}
.mini svg.i{width:15px;height:15px}
.mini:active{background:rgba(255,255,255,.08);color:var(--lime)}

/* ── Perfil (Diana, 2026-10-06, segunda vuelta): se abre y se cierra con el mismo icono —que se vuelve
   una cruz—, sin botón de atrás, y cabe entero sin scroll: la persona, la tarjeta de Coins con Plus
   dentro cuando está activo y los tres periodos del bot para comprar, cuatro azulejos y «Выйти». ── */
.circle.toggle svg.i{position:absolute;transition:transform .42s var(--ease),opacity .26s ease}
.circle.toggle .shut{opacity:0;transform:rotate(-90deg) scale(.5)}
.circle.toggle.open{background:var(--lime);color:var(--on-lime);box-shadow:0 0 22px rgba(var(--lime-rgb),.35)}
.circle.toggle.open::before{display:none}
.circle.toggle.open .who{opacity:0;transform:rotate(90deg) scale(.5)}
.circle.toggle.open .shut{opacity:1;transform:none}
.profile{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--g13)}
.error.slim{padding:8px 14px;font-size:13.5px;text-align:center}
.me .mail{color:var(--text3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wallet{display:flex;flex-direction:column;gap:var(--g13);padding:16px 16px 14px}
.wallet-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wallet .n{display:flex;align-items:baseline;gap:8px;font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1}
.wallet .n svg.i{width:26px;height:26px;color:var(--lime);align-self:center}
.wallet .n small{font-size:14px;font-weight:600;letter-spacing:0;color:var(--text2)}
.wallet .renew{max-width:52%;color:var(--text3);font-size:12px;line-height:1.35;text-align:right}
.plus-on{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;font-size:13.5px;
  background:linear-gradient(150deg,rgba(var(--lime-rgb),.2),rgba(var(--lime-rgb),.05));border:1px solid rgba(var(--lime-rgb),.5);box-shadow:0 0 22px rgba(var(--lime-rgb),.12)}
.plus-on svg.i{width:18px;height:18px;color:var(--lime);fill:rgba(var(--lime-rgb),.3)}
.plus-on b{color:var(--lime);font-weight:700}
.plus-on span{margin-left:auto;color:var(--text);font-weight:600;white-space:nowrap}
.buy{display:flex;flex-direction:column;gap:var(--g8)}
.buy .eyebrow{font-size:12.5px}
.periods{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g8)}
.period{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;padding:6px 4px;border-radius:18px;text-align:center;text-decoration:none;
  color:var(--text);background:rgba(8,8,8,.6);border:1px solid var(--line2);transition:transform .18s var(--ease),background .2s,border-color .2s}
.period b{font-size:14.5px;font-weight:700;white-space:nowrap}
.period small{color:var(--lime);font-size:13px;font-weight:700;white-space:nowrap}
.period:active{transform:scale(.96);background:var(--surface2)}
.pay-hint{color:var(--text3);font-size:12px;line-height:1.4;text-align:center}
.tiles2{display:grid;grid-template-columns:1fr 1fr;gap:var(--g8)}
.tile2{position:relative;display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 12px;border-radius:20px;text-align:left;color:var(--text);cursor:pointer;
  background:rgba(22,23,24,.66);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);transition:transform .18s var(--ease),background .2s}
.tile2>svg.i{flex:none;width:21px;height:21px;color:var(--lime)}
.tile2 .txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.tile2 .txt b{font-size:14px;font-weight:600;line-height:1.2}
.tile2 .txt small{color:var(--text3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile2:active{transform:scale(.97);background:var(--surface2)}
.tile2 select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}
.out{display:flex;justify-content:center}
.out .textbtn{width:auto;min-height:38px;padding:0 18px;color:var(--text3);font-size:13.5px}
.out .textbtn svg.i{width:17px;height:17px;color:var(--text3)}
@media(hover:hover){.tile2:hover,.period:hover,.way:hover{background:var(--surface2)}}
/* Teléfonos bajos (Safari con sus barras deja ~660 px en un iPhone): todo un escalón más apretado */
@media(max-height:760px){.profile{gap:10px}.wallet{gap:9px;padding:12px 14px 11px}.wallet .n{font-size:28px}.period{min-height:48px;padding:4px}.tile2{min-height:50px;padding:6px 12px}.plus-on{min-height:34px}.out .textbtn{min-height:30px}}
@media(max-height:700px){.profile{gap:8px}.wallet{gap:8px}}
@media(max-height:639px){.profile{gap:8px}.avatar{width:44px;height:44px}.me .txt b{font-size:18px}.me .mini{width:26px;height:26px}.wallet{gap:8px;padding:10px 12px}.wallet .n{font-size:24px}.wallet .n svg.i{width:22px;height:22px}
  .period{min-height:44px;border-radius:15px}.period b{font-size:13.5px}.tile2{min-height:44px;padding:4px 10px;border-radius:16px}.tile2 .txt b{font-size:13px}.out .textbtn{min-height:32px}.pay-hint{font-size:11.5px}}
/* Teléfonos angostos (320-360 px): la línea de Plus sigue en una sola línea y la persona ocupa menos */
@media(max-width:360px){.tile2{gap:8px;padding-inline:10px}.tile2 .txt b{font-size:13px}.period b{font-size:13.5px}
  .plus-on{gap:6px;padding:0 10px;font-size:12.5px}.plus-on svg.i{width:16px;height:16px}.plus-on b,.plus-on span{white-space:nowrap}
  .me{gap:12px}.avatar{width:48px;height:48px}.me .txt b{font-size:18px}.me .mini{width:26px;height:26px}.wallet .renew{font-size:11.5px}}