/* Prototipo para revisar con el dueño (2026-10-17, tercera vuelta).
   Inspirado en el iOS más reciente: materiales de cristal, esquinas continuas, letra del sistema (SF en Apple) y movimiento con resorte.
   Colores de la paleta oficial. Títulos en Montserrat: geométrica y ancha como el logotipo GENTE MÉXICO (propuesta; el kit no define tipografía). */
:root{--papel:#F4F2EB;--hueso:#E8E5D6;--tinta:#1B1B1B;--gris:#6B675E;--linea:#DDD8C8;--magenta:#ED217C;--naranja:#FBAF61;--oro:#C9A66B;--blanco:#FFFFFF;--grisos:#BDB8AA;--borde:#3a3833;
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;--mt:Montserrat,-apple-system,system-ui,sans-serif;--muelle:cubic-bezier(.32,.72,0,1);--cel:78px}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#E9E6DC;color:var(--tinta);font:15px/1.45 var(--sf);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible,label:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.escena{max-width:1120px;margin:0 auto;padding:28px 16px 48px;display:grid;gap:28px;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:900px){.escena{grid-template-columns:410px minmax(0,1fr)}}
.tel{position:relative;width:100%;max-width:410px;height:864px;margin:0 auto;background:var(--tinta);border-radius:48px;border:10px solid var(--tinta);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
@media(max-width:430px){.tel.d-iphone,.tel:not([class*="d-"]){border-width:0;border-radius:0;height:100svh;max-width:none}.escena{padding:0}.lado{padding:0 16px 40px}}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ej{display:inline-block;font:600 9.5px/1 var(--sf);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 7px;white-space:nowrap;background:rgba(255,255,255,.8);color:var(--gris);border:1px solid rgba(27,27,27,.08)}
/* Encabezado: logotipo blanco sin isotipo y «?» en blanco y negro */
.cab{flex:none;display:flex;align-items:center;gap:10px;padding:max(13px,env(safe-area-inset-top)) 18px 11px;background:var(--tinta)}
.cab img{height:20px;width:auto;display:block}
.cab .sp{flex:1}
.cab .proto{font:600 9.5px/1 var(--sf);letter-spacing:.08em;text-transform:uppercase;color:var(--grisos);border:1px solid var(--borde);border-radius:999px;padding:5px 8px}
.ayuda{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--papel);background:var(--tinta);color:var(--papel);font:700 16px/1 var(--mt);display:grid;place-items:center;padding:0}
/* Zona: fondo con la personalización, panel y dock de cristal */
.zona{position:relative;flex:1;overflow:hidden;border-radius:26px 26px 0 0;background:var(--papel)}
.ambiente{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ambiente i{position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(52px);opacity:.42;transition:background .9s ease}
.ambiente .b1{bottom:-60px;left:-60px;background:#F7A6C8}
.ambiente .b2{bottom:40px;right:-80px;background:#FCD3A4}
.ambiente .b3{top:-90px;right:-40px;width:220px;height:220px;background:#F9D9C2;opacity:.35}
.ambiente img{position:absolute;left:0;right:0;bottom:0;width:100%;height:320px;object-fit:cover;filter:blur(30px) saturate(1.3);opacity:0;transform:scale(1.15);transition:opacity 1s ease}
.ambiente img.on{opacity:.38}
.panel{position:absolute;inset:0;overflow-y:auto;padding:12px 14px calc(var(--dockh,180px) + 22px);scrollbar-width:none}
.panel::-webkit-scrollbar{display:none}
.panel-top{display:flex;align-items:center;gap:10px;margin:2px 2px 12px}
.anillo{position:relative;width:54px;height:54px;flex:none}
.anillo .av{position:absolute;inset:6px;width:auto;height:auto;font-size:14px;color:#fff;background:var(--tinta) center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.anillo circle{fill:none;stroke-width:3.6}
.anillo .pista{stroke:rgba(27,27,27,.1)}
.anillo .avance{stroke:url(#g-anillo);stroke-linecap:round;stroke-dasharray:150.8;stroke-dashoffset:150.8;transition:stroke-dashoffset .8s var(--muelle)}
.anillo b{position:absolute;inset:0;display:grid;place-items:center;font:800 13px/1 var(--mt)}
.pt-txt{min-width:0;display:grid;gap:3px}
.pt-titulo{font:800 21px/1.05 var(--mt);letter-spacing:-.02em;white-space:nowrap;overflow:hidden}
.pt-sub{font:600 10px/1 var(--sf);letter-spacing:.1em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.panel-top .sp{flex:1}
.pildora{border:1px solid rgba(27,27,27,.08);background:rgba(255,255,255,.65);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:999px;padding:0 13px;min-height:28px;font:600 12.5px var(--sf)}
.pildora.on{background:var(--tinta);color:var(--papel)}
/* Rejilla de widgets tipo Centro de control: chico 1×1, mediano 2×1, grande 2×2 y ancho 4×1 */
.rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:var(--cel);gap:10px;grid-auto-flow:row dense}
.w{position:relative;border-radius:22px;overflow:hidden;background:rgba(255,255,255,.92);border:1px solid rgba(27,27,27,.05);box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 24px -16px rgba(0,0,0,.25);padding:10px;min-width:0}
.w.s{grid-column:span 1;grid-row:span 1}
.w.m{grid-column:span 2;grid-row:span 1}
.w.l{grid-column:span 2;grid-row:span 2}
.w.x{grid-column:span 4;grid-row:span 1}
.w.vacio{background:rgba(255,255,255,.3);border:1.5px dashed rgba(27,27,27,.15);box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:rgba(27,27,27,.38)}
.w.vacio span{font:600 10.5px/1 var(--sf);white-space:nowrap}
.w.encaja{animation:encaja .62s var(--muelle) both}
@keyframes encaja{0%{opacity:0;transform:scale(.86)}60%{opacity:1;transform:scale(1.02)}100%{transform:none}}
.etq{font:600 10px/1 var(--sf);letter-spacing:.08em;text-transform:uppercase;color:var(--gris);white-space:nowrap;display:flex;align-items:center;gap:5px}
.etq svg.i{width:13px;height:13px}
.w .gran{font:800 15px/1.15 var(--mt);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w .peq{font-size:11.5px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w.oscuro{color:var(--papel);border:0}
.w.oscuro .peq,.w.oscuro .etq{color:rgba(244,242,235,.75)}
/* Negocio */
.neg{display:flex;align-items:center;gap:12px;height:100%}
.av{width:52px;height:52px;border-radius:50%;background:var(--papel) center/contain no-repeat;color:var(--tinta);display:grid;place-items:center;font:800 16px var(--mt);flex:none}
.w.m .av{width:40px;height:40px;font-size:13px}
.neg .txt{min-width:0}
.neg .gran{font-size:19px}
.w.m .neg .gran{font-size:14px}
/* Tienda y promoción */
.mosaico{display:grid;gap:5px;height:calc(100% - 18px);margin-top:6px}
.w.l .mosaico{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.w.m .mosaico{grid-template-columns:repeat(3,1fr);height:100%;margin:0}
.w.s .mosaico{height:100%;margin:0}
.w.m .etq-t,.w.s .etq-t{display:none}
.tesela{border-radius:10px;overflow:hidden;background:var(--hueso);position:relative;min-height:0}
.tesela img{width:100%;height:100%;object-fit:cover;display:block}
.tesela.mas{border:1.5px dashed var(--linea);background:none;display:grid;place-items:center;color:var(--grisos);font-size:16px}
.tesela .ej{position:absolute;left:4px;bottom:4px;font-size:7.5px;padding:3px 4px}
.cuenta{position:absolute;right:8px;bottom:8px;font:700 10px/1 var(--sf);background:rgba(27,27,27,.75);color:#fff;border-radius:999px;padding:4px 6px}
.ajedrez{background-color:#fff;background-image:linear-gradient(45deg,#ece9e0 25%,transparent 25%),linear-gradient(-45deg,#ece9e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ece9e0 75%),linear-gradient(-45deg,transparent 75%,#ece9e0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}
.w.promo{padding:0}
.promo .foto{position:absolute;inset:0 0 34px 0;background:var(--hueso)}
.promo .foto img{width:100%;height:100%;object-fit:cover;display:block}
.promo .foto.limpia img{object-fit:contain}
.promo .pie{position:absolute;left:0;right:0;bottom:0;height:34px;display:flex;align-items:center;gap:6px;padding:0 8px 0 8px;background:rgba(255,255,255,.95)}
.promo .pie b{flex:1;font:700 11.5px/1 var(--sf);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.promo .pie span{font:800 11.5px var(--mt)}
.mas-c{width:22px;height:22px;border-radius:50%;background:var(--magenta);color:#fff;display:grid;place-items:center;font:700 14px/1 var(--sf);flex:none}
.w.m.promo .foto{inset:0 50% 0 0}
.w.m.promo .pie{left:50%;top:0;height:auto;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px}
.w.s.promo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px}
/* Herramientas chicas y medianas */
.herr{display:flex;flex-direction:column;justify-content:space-between;height:100%}
.herr .ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff}
.herr .ico svg.i{width:17px;height:17px}
.w.m .herr{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px}
.w.m .herr .ico{width:40px;height:40px}
.herr .txt{min-width:0}
.w.l .herr .etq{display:none}
.herr .gran{font-size:13px}
.w.l .herr{height:auto;gap:10px}
.w.l .herr .gran{font-size:16px}
.renglones{display:grid;gap:5px;margin-top:10px}
.renglones div{font-size:11.5px;display:flex;justify-content:space-between;gap:6px;white-space:nowrap}
.renglones span{color:var(--gris)}
/* Tarjeta de negocio */
.w.tarjeta{background:linear-gradient(135deg,#2a2b2e,#141516 55%,#222326);color:var(--papel);border:0}
.tarjeta .qr{position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:6px;background:#fff;padding:4px}
.tarjeta .qr i{display:block;width:100%;height:100%;background:conic-gradient(from 90deg at 30% 30%,#1B1B1B 25%,transparent 0) 0 0/8px 8px,repeating-linear-gradient(90deg,#1B1B1B 0 3px,transparent 3px 6px);opacity:.85}
.tarjeta .gran{font-size:13px}
.tarjeta .peq{color:rgba(244,242,235,.7)}
.tarjeta .dor{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--oro)}
.w.s.tarjeta .qr{right:auto;left:10px}
.w.s.tarjeta .txt{left:10px!important;right:8px!important}
.w.s.tarjeta .peq{display:none}
/* Prioridad */
.w.prio{background:linear-gradient(135deg,var(--magenta),var(--naranja));color:#fff;border:0}
.prio .etq{color:rgba(255,255,255,.85)}
.prio .gran{font-size:16px;margin-top:6px}
.prio .peq{color:rgba(255,255,255,.9)}
/* Nombre de cada widget: siempre visible y sutil, en cualquier tamaño */
.cap{display:flex;align-items:center;gap:5px;height:13px;margin-bottom:6px;font:600 9.5px/1 var(--sf);letter-spacing:.09em;text-transform:uppercase;color:var(--gris);white-space:nowrap;min-width:0}
.cap > span{overflow:hidden;text-overflow:ellipsis}
.cap svg.i{width:12px;height:12px;stroke-width:2;color:var(--c)}
.w.s .cap svg.i{display:none}
.w.s .cap{letter-spacing:.06em}
.ej-mini{margin-left:auto;font:600 8px/1 var(--sf);letter-spacing:.06em;font-style:normal;color:var(--gris);background:rgba(27,27,27,.06);border-radius:999px;padding:3px 5px;flex:none}
.w.oscuro .cap,.w.tarjeta .cap,.w.prio .cap{color:rgba(255,255,255,.8)}
.w.oscuro .cap svg.i,.w.tarjeta .cap svg.i,.w.prio .cap svg.i{color:rgba(255,255,255,.85)}
.w.oscuro .ej-mini,.w.tarjeta .ej-mini,.w.prio .ej-mini{background:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
.w.ejemplo{border:1px dashed rgba(27,27,27,.16)}
.w.ejemplo.oscuro,.w.ejemplo.tarjeta,.w.ejemplo.prio{border:1px dashed rgba(255,255,255,.35)}
.valor{font:800 15px/1.15 var(--mt);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:11.5px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.w.oscuro .sub,.w.tarjeta .sub{color:rgba(244,242,235,.72)}
.w.prio .sub{color:rgba(255,255,255,.9)}
.w.s .dato{position:absolute;left:10px;right:10px;bottom:10px}
.w.s .valor{font-size:14px}
.w.m .dato,.w.x .dato{margin-top:2px}
.w.l .dato .valor{font-size:18px}
.w .neg{height:auto}
.w .neg .av{width:40px;height:40px;font-size:13px}
.w .neg .valor{font-size:17px}
.w.m .neg .valor{font-size:14px}
.cap-flota{position:absolute;left:8px;top:8px;right:8px;z-index:1}
.cap-flota .cap{display:inline-flex;max-width:100%;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;padding:4px 8px;height:auto;margin:0}
.cap-flota .ej-mini{margin-left:6px}
.crear{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:6px}
.crear b{font:800 14px var(--mt)}
.tarjeta .compartir{margin-left:auto;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.tarjeta .compartir svg.i{width:13px;height:13px;color:#fff}
.tarjeta .ej-mini + .compartir{margin-left:6px}
.w.tarjeta .qr{position:absolute;right:10px;bottom:9px;top:auto;width:36px;height:36px;border-radius:6px;background:#fff;padding:2px}
.w.tarjeta .qr svg{width:100%;height:100%;display:block}
.w.tarjeta .txt{padding-right:42px;min-width:0}
.w.tarjeta .valor{font-size:13px}
.wallet{position:absolute;left:12px;bottom:8px;display:inline-flex;align-items:center;gap:4px;font:600 9.5px/1 var(--sf);color:rgba(244,242,235,.8)}
.wallet svg.i{width:11px;height:11px}
.w.s.tarjeta .qr{right:auto;left:10px;bottom:10px;width:40px;height:40px}
.w.s.tarjeta .compartir{position:absolute;right:10px;bottom:10px}
.w.s.tarjeta .txt{display:none}
/* Burbuja: para qué sirve cada widget */
.pop{position:absolute;z-index:4;max-width:260px;font:600 12.5px/1.2 var(--sf);color:var(--papel);background:rgba(27,27,27,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:14px;padding:9px 12px;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px) scale(.96);transition:opacity .22s,transform .3s var(--muelle)}
.pop.on{opacity:1;transform:none}
/* Modo editar: los widgets tiemblan y se pueden cambiar de tamaño */
.rejilla.editando .w:not(.vacio){animation:tiembla .32s ease-in-out infinite alternate}
.rejilla.editando .w:nth-child(2n):not(.vacio){animation-delay:-.16s}
@keyframes tiembla{from{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}}
.tam{display:none;position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(255,255,255,.95);color:var(--tinta);box-shadow:0 2px 8px rgba(0,0,0,.2);padding:0;place-items:center;z-index:2}
.tam svg.i{width:13px;height:13px;stroke-width:2.2}
.rejilla.editando .tam{display:grid}
/* Dock de cristal (bienvenida y simulador) */
.dock{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;border-radius:30px;padding:12px 12px 14px;overflow:hidden;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.75);box-shadow:0 18px 40px -18px rgba(27,27,27,.4),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3);transition:height .55s var(--muelle)}
.dock::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(150deg,rgba(255,255,255,.65),rgba(255,255,255,0) 35%,rgba(255,255,255,0) 75%,rgba(255,255,255,.3));mix-blend-mode:soft-light}
.contenido{position:relative;animation:aparece .5s var(--muelle) both}
@keyframes aparece{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
/* Bienvenida */
.eye{font:600 10.5px/1 var(--mt);letter-spacing:.32em;text-transform:uppercase;color:var(--gris);margin:6px 4px 10px;display:block}
.titulo{font:800 26px/1.05 var(--mt);letter-spacing:-.025em;margin:0 4px 10px}
.titulo .grad{background:linear-gradient(90deg,var(--magenta),var(--naranja));-webkit-background-clip:text;background-clip:text;color:transparent}
.deck{margin:0 4px 14px;font-size:14px;line-height:1.4;color:#3d3a34;max-width:32ch}
.marquesina{margin:0 -12px 14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);display:grid;gap:7px}
.tira-g{display:flex;gap:7px;width:max-content;animation:corre 60s linear infinite}
.tira-g.inv{animation-direction:reverse;animation-duration:70s}
@keyframes corre{to{transform:translateX(-50%)}}
.tira-g span{font:600 12px/1 var(--sf);white-space:nowrap;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(27,27,27,.07)}
.acciones{display:flex;align-items:center;gap:8px;margin:0}
.prim{border:0;border-radius:999px;background:var(--tinta);color:var(--papel);font:700 14px/1 var(--sf);min-height:42px;padding:0 13px;white-space:nowrap;transition:transform .2s var(--muelle)}
.prim:active{transform:scale(.96)}
.play{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--sf);white-space:nowrap;min-height:42px;padding:0 13px 0 5px;border-radius:999px;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 3px 10px -4px rgba(27,27,27,.25)}
.play .pl{width:30px;height:30px;flex:none;border-radius:50%;background:rgba(255,255,255,.7);border:1px solid rgba(27,27,27,.08);display:grid;place-items:center;position:relative}
.play .pl::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--magenta);opacity:0;animation:pulso 2.4s var(--muelle) infinite}
@keyframes pulso{0%{opacity:.7;transform:scale(.85)}100%{opacity:0;transform:scale(1.25)}}
.play .pl i{width:0;height:0;border-left:9px solid var(--magenta);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
/* Hoja de bienvenida deslizable (bottom sheet): abierta o recogida con su asa (grabber) */
.agarre{width:38px;height:5px;border-radius:5px;background:rgba(27,27,27,.2);margin:-4px auto 8px;cursor:grab}
.dock.bienvenida{touch-action:none;cursor:grab}
.dock.arrastra{transition:none}
.dock.recogido{animation:brinca 2.8s var(--muelle) infinite}
@keyframes brinca{0%,62%,100%{transform:none}72%{transform:translateY(-12px)}82%{transform:translateY(0)}88%{transform:translateY(-5px)}94%{transform:translateY(0)}}
.recogida{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;border:0;background:none;padding:2px 0 0}
.grad-t{font:800 21px/1.15 var(--mt);letter-spacing:-.02em;white-space:nowrap;padding-bottom:2px;background:linear-gradient(90deg,var(--g1,#1B1B1B),var(--g2,#1B1B1B));-webkit-background-clip:text;background-clip:text;color:transparent}
.cuna{width:14px;height:14px;border-left:3px solid var(--g1,var(--magenta));border-top:3px solid var(--g2,var(--magenta));border-radius:3px 0 0 0;transform:rotate(45deg);margin-top:4px;animation:cuna 1.4s var(--muelle) infinite}
@keyframes cuna{0%,100%{transform:translateY(2px) rotate(45deg);opacity:.55}50%{transform:translateY(-4px) rotate(45deg);opacity:1}}
.dock.recogido .agarre{display:none}
/* Módulos: vidrio claro, vidrio oscuro o del color de la marca (detrás se asoman los colores del fondo) */
.rejilla .w:not(.oscuro):not(.tarjeta):not(.prio){-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%)}
.rejilla.mod-claro .w:not(.oscuro):not(.tarjeta):not(.prio){background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.75)}
.rejilla.mod-oscuro .w:not(.oscuro):not(.tarjeta):not(.prio){background:rgba(27,27,27,.66);border:1px solid rgba(255,255,255,.12);color:var(--papel)}
.rejilla.mod-color .w:not(.oscuro):not(.tarjeta):not(.prio){background:color-mix(in srgb,var(--c) 80%,transparent);border:1px solid rgba(255,255,255,.22);color:#fff}
.rejilla.mod-oscuro .w .sub,.rejilla.mod-color .w .sub{color:rgba(255,255,255,.75)}
.rejilla.mod-color.tono-claro .w:not(.oscuro):not(.tarjeta):not(.prio){color:var(--tinta)}
.rejilla.mod-color.tono-claro .w .sub{color:rgba(27,27,27,.68)}
.rejilla.mod-color.tono-claro .w:not(.oscuro):not(.tarjeta):not(.prio) .cap,.rejilla.mod-color.tono-claro .w:not(.oscuro):not(.tarjeta) .compartir{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.7);color:var(--tinta)}
.rejilla.mod-color.tono-claro .cap svg.i{color:var(--tinta)}
.rejilla.mod-color.tono-claro .promo .pie{background:rgba(255,255,255,.75);color:var(--tinta)}
.rejilla.mod-oscuro .w:not(.oscuro):not(.tarjeta):not(.prio) .cap,.rejilla.mod-color .w:not(.oscuro):not(.tarjeta):not(.prio) .cap,
.rejilla.mod-oscuro .w:not(.oscuro):not(.tarjeta) .compartir,.rejilla.mod-color .w:not(.oscuro):not(.tarjeta) .compartir{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.24);color:#fff}
.rejilla.mod-oscuro .cap svg.i,.rejilla.mod-color .cap svg.i{color:#fff}
.rejilla.mod-oscuro .promo .pie,.rejilla.mod-color .promo .pie{background:rgba(27,27,27,.55);color:#fff}
.rejilla.mod-oscuro .tesela.mas,.rejilla.mod-color .tesela.mas{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.6)}
.rejilla.mod-oscuro .w.ejemplo,.rejilla.mod-color .w.ejemplo{border-style:dashed}
.ambiente .b4{top:60px;left:-80px;width:260px;height:260px;opacity:.3}
.ambiente .b5{top:300px;right:-90px;width:240px;height:240px;opacity:.28}
.chips-div{width:1px;height:20px;background:rgba(27,27,27,.15);flex:none;align-self:center;margin:0 2px}
/* Avanzar: el botón «›» late cuando la pregunta ya está contestada (no avanza solo) */
.circ.ir.late:not(:disabled){animation:late 1.6s var(--muelle) infinite}
@keyframes late{0%,100%{box-shadow:0 0 0 0 rgba(237,33,124,.45)}60%{box-shadow:0 0 0 7px rgba(237,33,124,0)}}
/* Simulador compacto */
.barra{display:flex;align-items:center;gap:8px}
.circ{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 16px/1 var(--sf);padding:0 0 2px;border:1px solid rgba(27,27,27,.08);background:rgba(255,255,255,.65);transition:opacity .25s,background .25s,transform .2s var(--muelle)}
.circ:active{transform:scale(.9)}
.circ:disabled{opacity:.28;cursor:default}
.circ.ir{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.circ.ir:disabled{background:rgba(255,255,255,.65);color:var(--tinta);border-color:rgba(27,27,27,.08)}
.circ.fuera{visibility:hidden}
.etapas{flex:1;display:flex;align-items:center;gap:4px;min-width:0}
.seg{flex:1 1 0;height:4px;border-radius:4px;background:rgba(27,27,27,.12);position:relative;overflow:hidden;transition:flex-grow .5s var(--muelle),height .35s var(--muelle),background .3s}
.seg.hecho{background:linear-gradient(90deg,var(--magenta),var(--naranja))}
.seg.actual{flex-grow:3.6;height:22px;border-radius:11px;background:rgba(27,27,27,.07)}
.seg .lleno{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,rgba(237,33,124,.26),rgba(251,175,97,.42));transition:width .5s var(--muelle)}
.seg .et{position:absolute;inset:0;display:grid;place-items:center;font:700 9.5px/1 var(--mt);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .3s .1s}
.seg.actual .et{opacity:1}
.cuerpo{animation:paso .46s var(--muelle) both}
.cuerpo.atras{animation-name:paso-atras}
@keyframes paso{from{opacity:0;transform:translateX(14px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes paso-atras{from{opacity:0;transform:translateX(-14px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.q{font:700 17px/1.15 var(--mt);letter-spacing:-.015em;margin:10px 4px 9px;white-space:nowrap;overflow:hidden}
.filas{display:grid;gap:7px}
.dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ops{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:1px 12px}
.ops::-webkit-scrollbar{display:none}
.op{border:1px solid rgba(27,27,27,.08);background:rgba(255,255,255,.62);border-radius:999px;padding:0 12px;min-height:32px;font:600 12.5px var(--sf);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;flex:none;transition:background .2s,color .2s,transform .18s var(--muelle)}
.op:active{transform:scale(.95)}
.op[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.op .sw{width:12px;height:12px;border-radius:50%;flex:none}
.op.prin{background:var(--magenta);border-color:var(--magenta);color:#fff}
.op img{width:20px;height:20px;border-radius:50%;object-fit:cover;margin-left:-6px}
.campo{width:100%;min-width:0;border:1px solid rgba(27,27,27,.08);background:rgba(255,255,255,.7);color:var(--tinta);border-radius:13px;padding:0 12px;min-height:38px;font:500 15px var(--sf);-webkit-appearance:none;appearance:none}
.campo::placeholder{color:#8a857a}
.oculto{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.miniaturas{display:flex;gap:6px}
.mini{width:34px;height:34px;border-radius:9px;background:#fff center/cover no-repeat;position:relative;flex:none;overflow:hidden;border:1px solid rgba(27,27,27,.08)}
.mini.trabaja::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%231B1B1B' stroke-width='2.4' stroke-dasharray='30 60' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center/18px no-repeat}
/* Hojas (análisis y cómo funciona) */
.capa{position:absolute;inset:0;background:rgba(0,0,0,.32);opacity:0;transition:opacity .35s;z-index:5}
.capa.on{opacity:1}
.hoja{position:absolute;left:0;right:0;bottom:0;max-height:93%;overflow-y:auto;background:rgba(244,242,235,.9);-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);border-radius:32px 32px 0 0;padding:10px 18px 28px;transform:translateY(100%);transition:transform .55s var(--muelle);z-index:6}
.hoja.on{transform:none}
.asa{width:38px;height:5px;border-radius:5px;background:rgba(27,27,27,.18);margin:0 auto 14px}
.hoja h2{font:800 26px/1.08 var(--mt);letter-spacing:-.02em;margin:0 2px 4px}
.hoja .eye{margin:0 2px 8px}
.sec{font:600 11px/1 var(--sf);letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin:18px 6px 8px}
.grupo{background:var(--blanco);border-radius:18px;overflow:hidden}
.grupo .fila{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid #eeebe3;font-size:14.5px;white-space:nowrap}
.grupo .fila:first-child{border-top:0}
.grupo .fila span:last-child{overflow:hidden;text-overflow:ellipsis}
.num{width:24px;height:24px;border-radius:50%;background:var(--papel);display:grid;place-items:center;font:700 12px var(--sf);flex:none}
.segmentado{display:flex;background:rgba(118,118,128,.12);border-radius:12px;padding:3px}
.segmentado span{flex:1;text-align:center;font:600 13px/1 var(--sf);padding:9px 4px;border-radius:9px;color:var(--gris)}
.segmentado span.on{background:var(--blanco);color:var(--tinta);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.por{font-size:13px;color:var(--gris);margin:8px 6px 0}
.prio-h{background:linear-gradient(135deg,var(--magenta),var(--naranja));color:#fff;border-radius:18px;padding:14px}
.prio-h b{display:block;font:800 18px/1.2 var(--mt)}
.prio-h span{font-size:13px;opacity:.92}
.tira{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 14px;background:var(--blanco);border-top:1px solid #eeebe3}
.tira img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none;background:#fff}
.btn{width:100%;border:0;border-radius:999px;min-height:48px;font:700 15px var(--sf);margin-top:18px;background:var(--tinta);color:var(--papel)}
/* Cómo funciona: animación de 3 pasos */
.demo{position:relative;height:300px;border-radius:26px;background:var(--papel);overflow:hidden;margin-top:12px;border:1px solid rgba(27,27,27,.06)}
.demo .b1,.demo .b2{position:absolute;width:200px;height:200px;border-radius:50%;filter:blur(40px);opacity:.45}
.demo .b1{left:-40px;bottom:-60px;background:#F7A6C8}.demo .b2{right:-60px;bottom:-20px;background:#FCD3A4}
.demo .rej{position:absolute;left:14px;right:14px;top:14px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:44px;gap:6px}
.demo .rej i{border-radius:13px;border:1.2px dashed rgba(27,27,27,.16);background:rgba(255,255,255,.3);transition:all .5s var(--muelle)}
.demo .rej i.x{grid-column:span 4}.demo .rej i.l{grid-column:span 2;grid-row:span 2}.demo .rej i.m{grid-column:span 2}
.demo .rej i.on{border:1.2px solid transparent;background:#fff;box-shadow:0 6px 14px -10px rgba(0,0,0,.3)}
.demo .rej i.on.x{background:linear-gradient(135deg,#3E4B33,#8A9A6B)}
.demo .rej i.on.l:nth-child(3){background:linear-gradient(135deg,var(--magenta),var(--naranja))}
.demo .mdock{position:absolute;left:10px;right:10px;bottom:10px;height:70px;border-radius:20px;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.8);padding:10px 12px;display:grid;gap:7px;transition:transform .5s var(--muelle)}
.demo .mdock b{height:9px;width:60%;border-radius:5px;background:rgba(27,27,27,.75)}
.demo .mdock div{display:flex;gap:5px}
.demo .mdock span{height:20px;flex:1;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid rgba(27,27,27,.08);transition:background .3s}
.demo .mdock span.on{background:var(--tinta)}
.demo .mhoja{position:absolute;left:0;right:0;bottom:0;height:62%;border-radius:22px 22px 0 0;background:rgba(255,255,255,.95);transform:translateY(105%);transition:transform .6s var(--muelle);padding:14px;display:grid;gap:8px;align-content:start}
.demo .mhoja b{height:12px;width:45%;border-radius:6px;background:var(--tinta)}
.demo .mhoja i{height:30px;border-radius:10px;background:var(--papel)}
.demo .mhoja i:nth-child(2){background:linear-gradient(135deg,var(--magenta),var(--naranja))}
.demo.p3 .mhoja{transform:none}
.demo.p3 .mdock{transform:translateY(120%)}
.pasos-c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:14px 0 0}
.pasos-c div{min-width:0;border-radius:14px;padding:10px 9px;background:rgba(255,255,255,.55);transition:background .3s}
.pasos-c div.on{background:var(--blanco);box-shadow:0 6px 16px -10px rgba(0,0,0,.3)}
.pasos-c b{display:block;font:800 18px/1 var(--mt);color:var(--magenta)}
.pasos-c span{font:600 12px/1.2 var(--sf);display:block;margin-top:6px;white-space:nowrap;letter-spacing:-.01em}
/* Así funciona: barra de historias, mini pantalla y texto de cada paso */
.historias{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:12px 2px 10px}
.historias i{height:4px;border-radius:4px;background:rgba(27,27,27,.12);overflow:hidden}
.historias b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--magenta),var(--naranja));border-radius:4px}
.demo2{position:relative;height:250px;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#F9E2EA,#F4F2EB 45%,#FBE6D2);border:1px solid rgba(27,27,27,.06);cursor:pointer}
.d-panel{position:absolute;left:12px;right:12px;top:12px;display:grid;gap:7px}
.d-neg{display:flex;align-items:center;gap:8px;height:42px;border-radius:14px;padding:0 10px;background:#3E4B33;color:#fff;transition:background .6s}
.d-av{width:26px;height:26px;border-radius:50%;background:#F4F2EB;color:#1B1B1B;display:grid;place-items:center;font:800 10px var(--mt)}
.d-l{font:800 13px var(--mt)}
.d-rej{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.d-w{height:46px;border-radius:13px;border:1.2px dashed rgba(27,27,27,.18);background:rgba(255,255,255,.35);position:relative;transition:all .5s var(--muelle);transform:scale(.96);opacity:.7}
.d-w::after{content:attr(data-n);position:absolute;left:8px;top:7px;font:600 8.5px/1 var(--sf);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.d-dock{position:absolute;left:10px;right:10px;bottom:10px;border-radius:18px;padding:10px 12px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.85);display:grid;gap:7px;transition:transform .6s var(--muelle)}
.d-q{font:700 12px var(--mt)}
.d-ops{display:flex;gap:6px}
.d-ops span{font:600 10.5px/1 var(--sf);padding:7px 10px;border-radius:999px;background:#fff;border:1px solid rgba(27,27,27,.1);transition:all .3s}
.d-dedo{position:absolute;width:22px;height:22px;border-radius:50%;background:rgba(237,33,124,.35);border:2px solid rgba(237,33,124,.8);left:44px;bottom:6px;opacity:0;transform:scale(1.4);transition:all .35s var(--muelle)}
.d-hoja{position:absolute;left:0;right:0;bottom:0;height:62%;border-radius:20px 20px 0 0;background:#fff;padding:14px;display:grid;gap:9px;align-content:start;transform:translateY(105%);transition:transform .6s var(--muelle);box-shadow:0 -10px 30px -18px rgba(0,0,0,.4)}
.d-seg{display:flex;background:rgba(118,118,128,.12);border-radius:10px;padding:2px}
.d-seg span{flex:1;text-align:center;font:600 9.5px/1 var(--sf);padding:7px 2px;border-radius:8px;color:var(--gris)}
.d-seg span.on{background:#fff;color:var(--tinta);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.d-btn{justify-self:stretch;text-align:center;font:700 11px/1 var(--sf);padding:10px;border-radius:999px;background:var(--tinta);color:var(--papel)}
.demo2.f0.toque .d-dedo{opacity:1;transform:none}
.demo2.f0.toque .d-ops span:first-child{background:var(--tinta);color:var(--papel)}
.demo2.f1 .d-w,.demo2.f2 .d-w{border:1.2px solid transparent;background:#fff;opacity:1;transform:none;box-shadow:0 6px 14px -10px rgba(0,0,0,.3)}
.demo2.f1 .d-w:nth-child(2),.demo2.f2 .d-w:nth-child(2){background:linear-gradient(135deg,var(--magenta),var(--naranja))}
.demo2.f1 .d-w:nth-child(2)::after,.demo2.f2 .d-w:nth-child(2)::after{color:#fff}
.demo2.f1 .d-w:nth-child(3){transition-delay:.15s}.demo2.f1 .d-w:nth-child(4){transition-delay:.3s}
.demo2.f1 .d-neg,.demo2.f2 .d-neg{background:linear-gradient(140deg,#6E4A31,#C9A66B)}
.demo2.f1 .d-ops span:first-child,.demo2.f2 .d-ops span:first-child{background:var(--tinta);color:var(--papel)}
.demo2.f2 .d-hoja{transform:none}
.demo2.f2 .d-dock{transform:translateY(130%)}
.como-txt{min-height:66px;margin:14px 2px 0}
.como-txt b{display:flex;align-items:center;gap:9px;font:800 17px/1.2 var(--mt);white-space:nowrap}
.como-txt b span{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--magenta),var(--naranja));color:#fff;display:grid;place-items:center;font:800 12px var(--mt);flex:none}
.como-txt p{margin:6px 0 0 33px;font-size:13.5px;color:var(--gris);line-height:1.35;white-space:nowrap}
/* Reporte de diagnóstico: papel seguridad, índices, modelo de negocio y ruta */
.hoja.con-reporte{padding:10px 12px 22px;max-height:96%}
.rep-papel{background-color:#fff;background-repeat:repeat;border-radius:22px;padding:18px 16px 16px;border:1px solid var(--linea);box-shadow:0 10px 30px -20px rgba(0,0,0,.4)}
.rep-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.rep-cab img{height:22px;width:auto}
.rep-folio{font:600 10px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--gris);text-align:right}
.rep .eye{margin:0 0 6px}
.rep-t{font:800 24px/1.1 var(--mt);letter-spacing:-.02em;margin:0;overflow-wrap:anywhere}
.rep-sub{margin:4px 0 0;color:var(--gris);font-size:13px}
.rep section{margin-top:18px}
.rep h3{font:700 11px/1 var(--sf);letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin:0 0 8px}
.rep-p{margin:0;font-size:14px;line-height:1.55;color:#2c2a26}
.rep-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
.kpi.etapa b{font-size:17px;overflow-wrap:anywhere}
.kpi{background:rgba(244,242,235,.8);border-radius:16px;padding:10px;display:grid;gap:3px;align-content:center}
.kpi b{font:800 18px/1.1 var(--mt)}
.kpi span{font:600 10.5px/1.25 var(--sf);color:var(--gris)}
.kpi.grande{justify-items:center;text-align:center}
.kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.medidor{width:100%;max-width:150px}
.medidor .pista{fill:none;stroke:rgba(27,27,27,.1);stroke-width:9;stroke-linecap:round}
.medidor .valor-m{fill:none;stroke:url(#g-med);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1s var(--muelle)}
.medidor text{font:800 20px var(--mt);fill:var(--tinta)}
.medidor text.de{font:600 6.5px var(--sf);fill:var(--gris)}
.barra-a{margin-bottom:11px}
.ba-cab{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.ba-cab b{font:700 13px var(--mt)}
.ba-pista{height:8px;border-radius:8px;background:rgba(27,27,27,.08);overflow:hidden}
.ba-pista i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--magenta),var(--naranja))}
.barra-a p{margin:5px 0 0;font-size:12.5px;color:var(--gris);line-height:1.4}
.lienzo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lienzo-b{background:rgba(244,242,235,.8);border-radius:14px;padding:10px}
.lienzo-b b{display:block;font:700 12px var(--mt);margin-bottom:5px}
.lienzo-b ul,.ruta-c ul{margin:0;padding-left:15px;font-size:12px;line-height:1.45;color:#3d3a34}
.ruta{display:grid;gap:8px}
.ruta-c{border-left:3px solid var(--magenta);padding:4px 0 4px 12px}
.ruta-c span{font:600 10.5px/1 var(--sf);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.ruta-c b{display:block;font:800 15px/1.2 var(--mt);margin:3px 0 4px}
.rep-pie{margin-top:18px;padding-top:12px;border-top:1px dashed var(--linea);font-size:11.5px;color:var(--gris);line-height:1.45}
.rep-pie p{margin:0 0 6px}
.rep-pie b{font:700 11px var(--mt);color:var(--tinta)}
.rep-acc{display:grid;gap:8px;margin-top:12px}
.rep-acc .btn{margin:0}
.rep-acc2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn.sec{background:rgba(255,255,255,.75);color:var(--tinta);border:1px solid var(--linea)}
@container tel (min-width:700px){.lienzo{grid-template-columns:repeat(3,1fr)}.ruta{grid-template-columns:repeat(3,1fr)}}
.nv{font:600 11px/1 var(--sf);padding:3px 7px;border-radius:999px}
.nv.bajo{background:#FDE7EF;color:#B3165C}.nv.medio{background:#FEF0DD;color:#9A5A12}.nv.alto{background:#E4F3E8;color:#2D6B3E}
.ba-pista i.bajo{background:linear-gradient(90deg,#ED217C,#F2709F)}.ba-pista i.medio{background:linear-gradient(90deg,#F28C38,#FBAF61)}.ba-pista i.alto{background:linear-gradient(90deg,#3F7D4E,#7DB88D)}
.leyenda{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0}
.fo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fo > div{background:rgba(244,242,235,.8);border-radius:14px;padding:10px;display:grid;gap:6px;align-content:start}
.fo b{font:700 12px var(--mt)}
.fo span{font:600 12px/1.2 var(--sf);padding:6px 8px;border-radius:10px}
.fo .f{background:#E4F3E8;color:#2D6B3E}.fo .o{background:#FEF0DD;color:#9A5A12}
.btn.wa{display:flex;align-items:center;justify-content:center;gap:8px;background:#1B1B1B}
.btn.wa svg.marca{width:18px;height:18px;color:#25D366}
.rep-nota{margin:0;font-size:12.5px;color:var(--gris);text-align:center}
.chat-wa{border-radius:20px;overflow:hidden;background:#EFE7DE;border:1px solid var(--linea)}
.cw-cab{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--linea)}
.cw-cab b{font:700 13px var(--sf)}.cw-cab span{font-size:11.5px;color:var(--gris)}
.cw-cab em{margin-left:auto;font:600 9.5px/1 var(--sf);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:var(--gris);border:1px solid var(--linea);border-radius:999px;padding:4px 6px}
.cw-msg{position:relative;max-width:82%;margin:10px 12px;padding:8px 10px 18px;border-radius:12px;font-size:13px;line-height:1.35;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.cw-msg i{position:absolute;right:8px;bottom:4px;font-style:normal;font-size:10px;color:var(--gris)}
.cw-msg.yo{margin-left:auto;background:#D9FDD3}
.cw-msg.yo b{font-weight:600}
.cw-mas{color:var(--gris);font-size:12px}
.cw-msg.gm{background:#fff}
.cw-doc{display:flex;align-items:center;gap:8px;background:#F5F6F6;border-radius:9px;padding:8px;margin-bottom:6px}
.cw-pdf{width:30px;height:36px;border-radius:5px;background:#E2463C;color:#fff;font:700 9px/36px var(--sf);text-align:center;flex:none}
.cw-doc b{display:block;font:600 12px/1.25 var(--sf);overflow-wrap:anywhere}.cw-doc small{font-size:11px;color:var(--gris)}
.dfs{display:grid;gap:8px}
.dfs > div{border-radius:14px;padding:10px 12px}
.dfs b{display:block;font:700 12px var(--mt);margin-bottom:5px}
.dfs ul{margin:0;padding-left:16px;font-size:12.5px;line-height:1.45}
.dfs .d{background:#E4F3E8;color:#23502F}
.dfs .f{background:#F1EFE8;color:#4b4740}
.dfs .s{background:#FEF0DD;color:#7A4710}
@container tel (min-width:700px){.dfs{grid-template-columns:repeat(3,1fr)}}
#impresion{display:none}
@media print{
  @page{margin:12mm}
  body{background:#fff}
  body > *:not(#impresion){display:none!important}
  #impresion{display:block}
  #impresion .rep-papel{border:0;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #impresion .lienzo{grid-template-columns:repeat(3,1fr)}
  #impresion .ruta{grid-template-columns:repeat(3,1fr)}
}
/* Novena vuelta: portada del negocio, acción siguiente, más herramientas, estados, precios, vista del cliente y pestañas */
.portada-neg{position:relative;height:132px;border-radius:26px;overflow:hidden;margin:0 0 10px;color:#fff;background:var(--tinta);box-shadow:0 14px 30px -18px rgba(0,0,0,.45)}
#port-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.port-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.04) 32%,rgba(0,0,0,.66) 100%)}
.port-arriba{position:absolute;top:10px;left:12px;right:10px;display:flex;align-items:center;gap:8px;z-index:1}
.port-arriba .sp{flex:1}
.port-arriba .ej{background:rgba(20,20,20,.38);color:#fff;border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.port-abajo{position:absolute;left:12px;right:12px;bottom:46px;display:flex;align-items:center;gap:10px;z-index:1;min-width:0}
.portada-neg .anillo{width:46px;height:46px}
.portada-neg .anillo .av{inset:5px;font-size:12px}
.portada-neg .anillo .pista{stroke:rgba(255,255,255,.35)}
.portada-neg .pt-titulo{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.portada-neg .pt-sub{text-transform:none;letter-spacing:0;font:600 12.5px/1.2 var(--sf);color:rgba(255,255,255,.9)}
.port-liga{position:absolute;left:10px;right:10px;bottom:10px;z-index:1;height:32px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(20,20,20,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font:600 11.5px/1 var(--sf)}
#liga-txt{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden}
.liga-vp{flex:none;font:700 8.5px/1 var(--sf);letter-spacing:.06em;text-transform:uppercase;font-style:normal;padding:4px 6px;border-radius:999px;background:rgba(255,255,255,.22);color:#fff}
.cl-barra .liga-vp{background:rgba(27,27,27,.08);color:var(--gris)}
.port-liga b{flex:none;background:#fff;color:var(--tinta);border-radius:999px;padding:7px 10px;font:700 11px/1 var(--sf)}
.brillo{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(110deg,transparent 32%,rgba(201,166,107,.5) 47%,rgba(255,255,255,.7) 50%,rgba(201,166,107,.45) 53%,transparent 68%);transform:translateX(-130%)}
.portada-neg.llega .brillo{animation:brillo 1.6s var(--muelle) .3s 1 both}
@keyframes brillo{to{transform:translateX(130%)}}
.siguiente{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 8px 10px 10px;border-radius:20px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.85);box-shadow:0 8px 20px -14px rgba(0,0,0,.3)}
.sig-ico{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--magenta),var(--naranja))}
.sig-ico svg.i{width:18px;height:18px;stroke-width:2.2}
.sig-txt{flex:1;min-width:0;display:grid;gap:2px}
.sig-txt span{font:600 9.5px/1 var(--sf);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.sig-txt b{font:800 14.5px/1.15 var(--mt);white-space:nowrap;overflow:hidden}
.sig-txt small{font-size:11.5px;color:var(--gris);white-space:nowrap;overflow:hidden}
.sig-btn{flex:none;border:0;border-radius:999px;background:var(--tinta);color:var(--papel);min-height:34px;padding:0 13px;font:700 12px/1 var(--sf);white-space:nowrap}
.w.s .punto{display:none}
.leyenda-estado{display:flex;align-items:center;gap:6px;margin:-4px 4px 10px;font:600 11px/1 var(--sf);color:var(--gris)}
.leyenda-estado .punto{width:8px;height:8px;opacity:.7}
.cuenta.ej-cat{right:auto;left:14px;top:44px;bottom:auto;background:rgba(255,255,255,.92);color:var(--gris);font:600 8.5px/1 var(--sf);letter-spacing:.06em;text-transform:uppercase}
.punto{width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor;opacity:.55;flex:none;margin-left:1px}
.w.por-conectar .punto{border-style:solid}
.w.ejemplo .punto{border-style:dotted}
.tesela .precio{position:absolute;right:4px;bottom:4px;background:rgba(255,255,255,.92);color:var(--tinta);font:800 9.5px/1 var(--mt);padding:4px 6px;border-radius:999px}
.tesela .precio.vacio{color:var(--gris);font-weight:700}
.destinos{position:absolute;left:8px;bottom:8px;display:flex;gap:3px}
.destinos span{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.destinos svg.marca{width:11px;height:11px}
.mas-btn{width:100%;margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;border-radius:18px;border:1px dashed rgba(27,27,27,.2);background:rgba(255,255,255,.45);font:600 12.5px/1 var(--sf);color:var(--gris);white-space:nowrap}
.mas-btn span{font:800 17px/1 var(--mt);color:var(--tinta)}
#mas-herr .rejilla{margin-top:10px}
.sub svg.marca{width:12px;height:12px;vertical-align:-2px;margin-right:4px}
.cliente{position:absolute;inset:0;z-index:4;background:var(--papel);overflow-y:auto;padding:12px 14px 24px;animation:entra-cl .55s var(--muelle) both}
@keyframes entra-cl{from{transform:perspective(900px) rotateY(-75deg);opacity:0}to{transform:none;opacity:1}}
.zona.volteado .panel{animation:sale-panel .45s var(--muelle) both}
@keyframes sale-panel{to{transform:perspective(900px) rotateY(75deg);opacity:0}}
.cl-barra{height:34px;border-radius:12px;background:rgba(118,118,128,.12);display:flex;align-items:center;justify-content:center;gap:6px;font:600 12.5px/1 var(--sf);color:var(--gris);margin-bottom:10px}
.cl-barra svg.i{width:13px;height:13px;stroke-width:2}
.cl-port{position:relative;height:160px;border-radius:22px;overflow:hidden;color:#fff}
.cl-port img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cl-velo{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.65))}
.cl-port div{position:absolute;left:14px;right:14px;bottom:12px;display:grid;gap:3px}
.cl-port b{font:800 21px/1.1 var(--mt)}
.cl-port span{font-size:12.5px;opacity:.9}
.cl-acc{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;margin:10px 0}
.cl-acc span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;border-radius:999px;background:#fff;border:1px solid var(--linea);font:700 13px/1 var(--sf);white-space:nowrap}
.cl-acc .cl-wa{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.cl-acc .cl-wa svg.marca{width:16px;height:16px}
.cl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cl-grid div{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:#fff}
.cl-grid img{width:100%;height:100%;object-fit:cover;display:block}
.cl-grid b{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.95);border-radius:999px;padding:5px 8px;font:800 12px/1 var(--mt)}
.cl-nota{text-align:center;font-size:12px;color:var(--gris);margin:12px 0 8px}
.cl-volver{width:100%;border:0;border-radius:999px;min-height:46px;background:var(--tinta);color:var(--papel);font:700 14px var(--sf)}
.pestanas{position:absolute;left:14px;right:14px;bottom:10px;z-index:3;height:60px;border-radius:30px;display:flex;align-items:center;gap:2px;padding:0 6px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.85);box-shadow:0 14px 30px -16px rgba(0,0,0,.4)}
.pestanas button{flex:1;display:grid;justify-items:center;gap:3px;border:0;background:none;color:var(--gris);font:600 10px/1 var(--sf);padding:7px 0;border-radius:22px}
.pestanas button svg.i{width:21px;height:21px}
.pestanas button.on{color:var(--tinta);background:rgba(27,27,27,.07)}
.zona.con-pestanas .dock{bottom:80px}
.zona.con-pestanas .panel{padding-bottom:calc(var(--dockh,180px) + 96px)}
/* Acomodo horizontal solo con pantalla ancha: en el teléfono parado, el teclado achica el alto y no debe mandar el dock a un lado (iPhone, 2026-10-23) */
@container zona (min-aspect-ratio:1/1) and (min-width:560px){.pestanas{right:calc(min(370px,44%) + 26px)}.zona.con-pestanas .dock{bottom:12px}.zona.con-pestanas .panel{padding-bottom:84px}}
.como-pausa{margin-top:10px}
@media(prefers-reduced-motion:reduce){.portada-neg.llega .brillo,.cliente,.zona.volteado .panel{animation:none}.zona.volteado .panel{opacity:0}}
/* Columna de revisión */
.lado h1{font:800 34px/1.02 var(--mt);letter-spacing:-.03em;margin:6px 0 6px}
.lado .bajada{color:var(--gris);margin:0 0 18px;max-width:62ch}
.lado h2{font:700 17px/1.2 var(--mt);margin:24px 0 10px}
.tabla{width:100%;border-collapse:collapse;background:var(--blanco);border-radius:16px;overflow:hidden;font-size:13.5px}
.tabla td{padding:9px 12px;border-top:1px solid var(--linea);vertical-align:middle}
.tabla tr:first-child td{border-top:0}
.tabla tr[data-i]{cursor:pointer}
.tabla tr[data-i]:hover td{background:#faf9f5}
.tabla tr.actual td{background:#fdf0f6}
.tabla .n{color:var(--grisos);width:28px;font-weight:600}
.tabla .et{color:var(--gris);white-space:nowrap}
.tabla small{color:var(--gris)}
.tag{display:inline-block;font:700 10px/1 var(--sf);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 7px;white-space:nowrap}
.tag.dos{background:var(--naranja);color:var(--tinta)}
.tag.nueva{background:var(--magenta);color:#fff}
.tag.igual{background:var(--hueso);color:var(--gris)}
.tag.quita{background:var(--tinta);color:var(--papel)}
.tabla tr.quitada td{color:var(--grisos)}
pre.brief{background:var(--tinta);color:var(--papel);border-radius:16px;padding:16px;font:500 13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;margin:0}
.notas{margin:0;padding-left:18px;color:var(--gris);font-size:14px;display:grid;gap:6px;max-width:65ch}
/* Quinta vuelta: nombre del widget en pastilla de cristal esmerilado con sombra suave */
.cabeza{display:flex;align-items:center;gap:6px;margin-bottom:7px;min-width:0}
.cap{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 9px;margin:0;border-radius:999px;max-width:100%;min-width:0;
  background:rgba(244,242,235,.72);-webkit-backdrop-filter:blur(12px) saturate(170%);backdrop-filter:blur(12px) saturate(170%);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 3px 10px -4px rgba(27,27,27,.28),inset 0 1px 0 rgba(255,255,255,.9);
  font:600 9.5px/1 var(--sf);letter-spacing:.09em;text-transform:uppercase;color:#4b4740;white-space:nowrap}
.cap svg.i{width:12px;height:12px;stroke-width:2;color:var(--c)}
.cap svg.marca{width:11px;height:11px}
.w.oscuro .cap,.w.tarjeta .cap,.w.prio .cap{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.92);box-shadow:0 3px 10px -4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18)}
.w.oscuro .cap svg.i,.w.tarjeta .cap svg.i,.w.prio .cap svg.i{color:#fff}
.w.s .cap{padding:0 7px;letter-spacing:.05em}
.w.tarjeta .cap{letter-spacing:.06em;padding:0 8px}
.w.s .cap svg{display:none}
.cabeza .ej-mini{margin-left:auto}
.compartir{margin-left:auto;width:24px;height:24px;border-radius:50%;flex:none;padding:0;display:grid;place-items:center;color:var(--tinta);
  background:rgba(244,242,235,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.8);box-shadow:0 3px 10px -4px rgba(27,27,27,.28)}
.compartir svg.i{width:13px;height:13px;stroke-width:2}
.ej-mini + .compartir{margin-left:0}
.w.oscuro .compartir,.w.tarjeta .compartir{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.22);color:#fff}
.w.s .compartir,.compartir.abajo{position:absolute;right:8px;bottom:8px}
.cap-flota .cabeza{margin:0}
.mosaico{height:calc(100% - 28px);margin-top:0}
.w.m .mosaico,.w.s .mosaico{height:calc(100% - 28px);margin:0}
.w.x[data-k="negocio"] .cabeza{position:absolute;top:10px;right:10px;margin:0}
.w.x[data-k="negocio"] .neg{height:100%}
.w.m[data-k="negocio"] .cabeza{margin-bottom:5px}
.w.m[data-k="negocio"] .neg{gap:8px}
.w.m[data-k="negocio"] .av{width:30px;height:30px;font-size:11px}
.cap-flota .cap{background:rgba(255,255,255,.72)}
svg.marca{width:14px;height:14px;fill:currentColor;flex:none}
.sub svg.marca{width:12px;height:12px;vertical-align:-2px;margin-right:4px}
.logo-marca{position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 8px -2px rgba(0,0,0,.2)}
.logo-marca svg.marca{width:17px;height:17px}
.w.m .dato{padding-right:0}
.logos{display:flex;gap:6px}
.logos span{width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 8px -3px rgba(0,0,0,.25)}
.logos svg.marca{width:15px;height:15px}
.w.s .logos{position:absolute;left:10px;bottom:10px;gap:3px}
.w.s .logos span{width:18px;height:18px}
.w.s .logos svg.marca{width:10px;height:10px}
.estrellas{display:flex;gap:2px;color:var(--oro)}
.w[data-k="google"]:not(.s) .dato{padding-right:30px}
.w.s[data-k="google"] .estrellas svg.i{width:9px;height:9px}
.w.s[data-k="google"] .estrellas{gap:1px}
.estrellas svg.i{width:15px;height:15px;stroke-width:1.8}
.w.prio.m .valor{font-size:13px}
.w.tarjeta .qr{bottom:9px}
.w.s.tarjeta .qr{left:10px;bottom:10px;width:36px;height:36px}
/* Muestras de color */
.swc{width:32px;height:32px;border-radius:50%;flex:none;padding:0;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(27,27,27,.12);position:relative;transition:transform .2s var(--muelle),box-shadow .2s}
.swc.on{box-shadow:0 0 0 2px var(--tinta);transform:scale(1.06)}
.swc.on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font:800 13px/1 var(--sf);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.swc.otro{background:conic-gradient(#ED217C,#F28C38,#C9A66B,#3F7D4E,#1E9C9A,#1F5F9E,#6B4FA0,#ED217C);cursor:pointer;overflow:hidden}
.swc.otro input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
/* Dispositivos: el mismo Centro en iPhone y iPad, vertical y horizontal */
.marco{margin:0 auto;position:relative;width:100%;max-width:410px}
.escena.ancha .marco{max-width:none}
.escena.ancha{grid-template-columns:minmax(0,1fr)}
.tel{container:tel/size}
.tel.d-iphone-h,.tel.d-ipad,.tel.d-ipad-h{max-width:none;transform-origin:top left;position:absolute;left:0;top:0}
.tel.d-iphone-h{width:864px;height:410px;border-radius:44px}
.tel.d-iphone-se{max-width:none;width:395px;height:687px;border-radius:36px}
.tel.d-ipad{width:840px;height:1200px;border-radius:38px;border-width:14px}
.tel.d-ipad-h{width:1200px;height:840px;border-radius:38px;border-width:14px}
.zona{container:zona/size}
.panel-in{container:panelin/inline-size}
@container panelin (min-width:540px){.rejilla{grid-template-columns:repeat(6,minmax(0,1fr));--cel:84px}}
@container panelin (min-width:760px){.rejilla{grid-template-columns:repeat(8,minmax(0,1fr));--cel:96px}}
@container zona (min-aspect-ratio:1/1) and (min-width:560px){
  .dock{left:auto;right:12px;bottom:12px;width:min(370px,44%);max-height:calc(100% - 24px);overflow-y:auto}
  .panel{padding-right:calc(min(370px,44%) + 26px);padding-bottom:20px}
  .agarre{display:none}
}
.rejilla{grid-auto-rows:var(--cel)}
@container tel (min-width:700px){
  .hoja{left:50%;right:auto;bottom:auto;top:50%;width:min(640px,92%);max-height:88%;border-radius:28px;transform:translate(-50%,-42%);opacity:0;transition:transform .55s var(--muelle),opacity .35s}
  .hoja.on{transform:translate(-50%,-50%);opacity:1}
}
/* Con la hoja abierta: el panel se encoge para caber (compacto) o se desvanece bajo el cristal */
.panel-in{transform-origin:top center;transition:transform .55s var(--muelle)}
.zona.desvanece .panel{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--dockh) - 80px),transparent calc(100% - var(--dockh) + 4px));mask-image:linear-gradient(to bottom,#000 calc(100% - var(--dockh) - 80px),transparent calc(100% - var(--dockh) + 4px))}
.zona.compacta .panel{overflow:hidden}
/* Controles de la columna de revisión */
.controles{display:grid;gap:10px;margin:4px 0 18px}
.grupo-c{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grupo-c > span{font:600 11px/1 var(--sf);letter-spacing:.08em;text-transform:uppercase;color:var(--gris);min-width:130px}
.seg-c{display:flex;flex-wrap:wrap;background:rgba(118,118,128,.12);border-radius:12px;padding:3px;gap:2px}
.seg-c button{border:0;background:none;border-radius:9px;padding:7px 11px;font:600 12.5px/1 var(--sf);color:var(--gris)}
.seg-c button.on{background:#fff;color:var(--tinta);box-shadow:0 2px 6px rgba(0,0,0,.12)}
@media(prefers-reduced-motion:reduce){.cuna,.circ.ir.late,.dock.recogido,.w.encaja,.cuerpo,.contenido,.tira-g,.rejilla.editando .w{animation:none}.hoja,.capa,.seg,.dock{transition:none}}
/* Sitio: sin columna de revisión, botón «Entrar» legible y avisos de demostración */
.escena{grid-template-columns:minmax(0,1fr)!important;max-width:520px}
.cab .entrar{font:700 13px/1 var(--sf);color:#fff;text-decoration:none;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:9px 16px;min-height:36px;display:inline-flex;align-items:center}
.cab .entrar:hover{background:rgba(255,255,255,.26)}
.cab .entrar:focus-visible{outline:3px solid #FBAF61;outline-offset:2px}
.aviso-recorte{font-size:12px;color:#8a5a00;margin:6px 0 0}
.nota-prop{font-size:12px;opacity:.8}
.pie-sitio{max-width:520px;margin:0 auto;padding:8px 16px 32px;font-size:12.5px;color:#55534d;text-align:center}
.pie-sitio a{color:inherit}
.pie-sitio .demo{display:inline-block;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:11px;border:1px solid currentColor;border-radius:999px;padding:3px 8px;margin-bottom:6px}
/* Sitio: sin columna lateral; el iPhone va al centro y se escala para caber completo en la ventana (encajarTel) */
@media(min-width:431px){.escena{grid-template-columns:minmax(0,1fr);padding:16px 16px 24px}}
/* Hoja «Entra para usarlo» dentro de la v3 */
.cab .entrar{cursor:pointer;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hoja .acepto{display:flex;gap:10px;align-items:flex-start;font:500 14px/1.4 var(--sf);margin:14px 2px 6px}
.hoja .acepto input{width:22px;height:22px;flex:none;accent-color:var(--magenta);margin:0}
.hoja .acepto a{color:inherit}
.g-caja{min-height:44px;display:flex;justify-content:center;margin:12px 0 0}
.hoja .btn.wa[aria-disabled="true"]{opacity:.4;pointer-events:none}
.hoja a.btn{text-decoration:none;color:var(--papel)}
.hoja a.btn.sec{color:var(--tinta);display:flex;align-items:center;justify-content:center}
.wallet-zona{margin:14px 0 4px}.wallet-t{display:block;font:700 15px var(--sf);margin:0 2px 2px}.wallet-btns{display:grid;gap:8px}.wallet-btns .btn{margin:0}
/* iPhone: con letra menor a 16 px acerca la página al escribir; los campos van a 16 px */
.campo{font-size:16px}
/* Teléfono acostado (o ventana muy chica): pantalla completa, con el acomodo horizontal de la v3 */
.telefono .tel{border-width:0;border-radius:0;height:100svh;max-width:none;box-shadow:none}
.telefono .escena{padding:0;max-width:none}
.telefono .marco{max-width:none}
/* Computadora: iPad acostado y presentación a un lado (encajarTel) */
.lado-web{display:none}
.escritorio .escena{max-width:none;grid-template-columns:auto minmax(280px,380px)!important;gap:48px;align-items:center;justify-content:center;padding:24px 40px;min-height:100svh}
.escritorio .lado-web{display:block;font:400 17px/1.5 var(--sf);color:var(--tinta)}
.lado-web .eye{font:600 12px/1 var(--mt);letter-spacing:.3em;text-transform:uppercase;color:var(--gris)}
.lado-web h2{font:800 46px/1.03 var(--mt);letter-spacing:-.03em;margin:14px 0 14px;text-wrap:balance}
.lado-web h2 em{font-style:normal;background:linear-gradient(90deg,#ED217C,#FBAF61);-webkit-background-clip:text;background-clip:text;color:transparent}
.lado-web p{margin:0}
.lado-web ol{list-style:none;padding:0;margin:22px 0;display:grid;gap:12px}
.lado-web li{display:flex;gap:12px;align-items:flex-start}
.lado-web li b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tinta);color:#fff;font:700 13px var(--sf);flex:none}
.qrw{display:flex;gap:16px;align-items:center;margin-top:24px;padding:14px 16px;border-radius:20px;background:#fff;border:1px solid var(--linea)}
.qrw svg{width:96px;height:96px;flex:none}
.qrw small{display:block;color:var(--gris);font-size:14px;margin-top:2px}
/* Módulos conectados (Mercado Pago, Google reseñas): punto verde */
.w.conectado .punto{border-color:#3F7D4E;background:#3F7D4E;opacity:1}
.hoja .con-pasos{margin:10px 0 12px;padding-left:20px;display:grid;gap:6px;font:500 14.5px/1.4 var(--sf)}
.con-liga{display:flex;gap:14px;align-items:center;margin:12px 0;padding:12px;border-radius:18px;background:#fff;border:1px solid var(--linea)}
.con-liga .qr-con{width:96px;height:96px;flex:none}
.con-liga a{font:600 13.5px/1.35 var(--sf);color:var(--tinta);word-break:break-all}
.mp-forma{display:grid;gap:8px;margin-top:14px}.mp-forma .btn{margin:0}
.hoja .h-link{background:none;border:0;color:var(--gris);font:600 13px var(--sf);text-decoration:underline;padding:6px;cursor:pointer}
.con-o{text-align:center;color:var(--gris);font:600 12px var(--sf);letter-spacing:.08em;text-transform:uppercase;margin:12px 0 0}
.asis-op{margin-top:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.7);border:1px solid var(--linea);display:grid;gap:8px}.asis-op .btn{margin:0}.asis-op>b{font:700 15px var(--sf)}
.kit{margin-top:10px;padding:12px;border-radius:16px;background:#fff;border:1px solid var(--linea)}.kit p{margin:6px 0 0;font:500 14px/1.45 var(--sf);white-space:pre-wrap}
.kit-c{display:flex;justify-content:space-between;align-items:center;gap:8px}.kit-c b{font:700 13px var(--sf)}
.kit-copia{border:1px solid var(--linea);background:var(--papel);border-radius:999px;padding:6px 12px;font:600 12.5px var(--sf);cursor:pointer;color:var(--tinta)}
.ml-fotos{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.ml-foto{flex:none;width:64px;height:64px;border-radius:14px;border:2px solid transparent;background:#fff;padding:0;overflow:hidden;cursor:pointer}
.ml-foto.on{border-color:var(--magenta)}.ml-foto img{width:100%;height:100%;object-fit:contain}
/* Computadora (2026-10-20): tableta a lo ancho y la presentación abajo, en una franja de tres columnas */
.escritorio .escena{grid-template-columns:minmax(0,1fr)!important;justify-items:center;padding:20px 24px 48px;min-height:0;gap:36px}
.escritorio .lado-web{width:min(100%,1200px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;column-gap:40px;align-items:center}
.escritorio .lado-web>.eye,.escritorio .lado-web>h2,.escritorio .lado-web>p{grid-column:1}
.escritorio .lado-web>h2{font-size:40px;margin:10px 0 10px}
.escritorio .lado-web>ol{grid-column:2;grid-row:1/4;margin:0}
.escritorio .lado-web>.qrw{grid-column:3;grid-row:1/4;margin:0}
/* Secciones operativas (Vender, Atender, Crecer, Perfil) */
.zona.en-seccion .panel{visibility:hidden}
.zona.en-seccion .dock{display:none}
.seccion{position:absolute;inset:0;z-index:2;overflow-y:auto;padding:18px 16px 96px;scrollbar-width:none}
.sec-cab{margin:4px 2px 14px}.sec-cab h2{font:800 24px/1.1 var(--mt);letter-spacing:-.02em;margin:6px 0 6px;text-wrap:balance}
.sec-meta{display:inline-block;font:600 11.5px/1 var(--sf);color:var(--gris);background:rgba(255,255,255,.7);border:1px solid var(--linea);border-radius:999px;padding:6px 10px}
.sec-lista{display:grid;gap:10px}
@container zona (min-width:620px){.sec-lista{grid-template-columns:repeat(2,minmax(0,1fr))}.sec-cab h2{font-size:30px}}
.sec-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;text-align:left;width:100%;padding:14px;border-radius:20px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);color:var(--tinta);cursor:pointer;box-shadow:0 10px 24px -20px rgba(0,0,0,.35)}
.sec-item:active{transform:scale(.98)}
.sec-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--papel)}.sec-ico svg.i{width:20px;height:20px}
.sec-txt{min-width:0;display:grid;gap:2px}.sec-txt b{font:700 15px/1.2 var(--sf)}.sec-txt small{font:500 12.5px/1.3 var(--sf);color:var(--gris)}
.sec-est{font:700 11px/1 var(--sf);font-style:normal;padding:6px 9px;border-radius:999px;background:var(--hueso);color:var(--gris);white-space:nowrap}
.sec-est.on{background:#E4F3E8;color:#2D6B3E}.sec-est.pronto{background:#FEF0DD;color:#9A5A12}
.sec-fl{color:var(--gris);font:600 18px var(--sf)}
/* Entrar: formas de acceso en íconos */
.entrar-iconos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0 10px}
.ent{display:grid;justify-items:center;gap:6px;background:none;border:0;padding:0;color:var(--tinta);text-decoration:none;cursor:pointer;font:600 12px/1.2 var(--sf)}
.ent small{font:600 12px/1.2 var(--sf);text-align:center}
.ent-c,.g-icono{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--linea);box-shadow:0 6px 16px -10px rgba(0,0,0,.3)}
.ent-c .marca,.ent-c svg{width:26px;height:26px}.ent-c.wa{background:#25D366;border-color:#25D366}.ent-c.wa .marca{color:#fff!important}
.ent-c.ml{background:#FFE600;border-color:#FFE600}
.g-icono{overflow:hidden}.g-icono>div{transform:scale(1.25)}
/* Encabezado: «Entrar con» en una pastilla de cristal, con los accesos en íconos blancos (2026-10-20) */
.cab .acceso{display:inline-flex;align-items:center;gap:5px;padding:3px 3px 3px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3)}
.cab .acceso[hidden]{display:none}
.acc-et{font:600 12.5px/1 var(--sf);color:rgba(255,255,255,.86);margin-right:3px;white-space:nowrap}
.acc-b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:0;padding:0;color:var(--tinta);cursor:pointer;text-decoration:none;transition:transform .2s var(--muelle),box-shadow .2s}
.acc-b:hover{transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(0,0,0,.5)}.acc-b:focus-visible{outline:2px solid #FBAF61;outline-offset:2px}
.acc-b svg.marca,.acc-b svg.i{width:16px;height:16px;fill:currentColor}
#wa-entrar svg{color:#25D366}.acc-b[data-entrar-cuenta=mercadopago] svg{color:#00B1EA}.acc-b[data-entrar-cuenta=mercadolibre] svg{color:#2D3277}
.acc-g{overflow:hidden}.acc-g>div{transform:scale(.94)}
@media(max-width:430px){.acc-et{display:none}.cab .acceso{padding:3px}.cab .acceso{gap:4px}.acc-b{width:28px;height:28px}}
.ent-lista{margin-top:12px}.g-fila{overflow:hidden}
.btn.sig-paso{background:linear-gradient(90deg,#ED217C,#F2709F);color:#fff;margin-top:12px}


/* Portada nueva (W28): guía de 3 pasos en láminas a pantalla completa que se deslizan en bucle; el panel queda aparte (body.en-app) */
body:not(.en-app) .escena,body:not(.en-app) .pie-sitio{display:none}
body:not(.en-app){overflow:hidden;height:100svh}
body.en-app .landing{display:none}
.landing{--l-grad:linear-gradient(120deg,#ED217C,#F28C38);--i:0;position:fixed;inset:0;overflow:hidden;background:#121212;color:#fff;font-family:var(--sf)}
.landing::before{content:"";position:absolute;width:150vmax;height:150vmax;left:-40vmax;top:-60vmax;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(237,33,124,.55),rgba(242,140,56,.32) 38%,rgba(18,18,18,0) 68%);filter:blur(10px);transform:translateX(calc(var(--i) * 32vw)) rotate(calc(var(--i) * 40deg));transition:transform 1.1s cubic-bezier(.32,.72,0,1);pointer-events:none}
.landing::after{content:"";position:absolute;inset:auto -20vmax -70vmax auto;width:110vmax;height:110vmax;border-radius:50%;background:radial-gradient(circle,rgba(201,166,107,.28),rgba(18,18,18,0) 62%);transform:translateX(calc(var(--i) * -18vw));transition:transform 1.1s cubic-bezier(.32,.72,0,1);pointer-events:none}
.l-cab{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:12px;padding:max(14px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left))}
.l-cab img{height:24px;width:auto}
.l-cab .sp{flex:1}
.l-entrar{color:#fff;text-decoration:none;font:600 14px var(--sf);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 16px;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.l-pista{position:relative;z-index:1;display:flex;height:100%;width:100%;touch-action:pan-y;transition:transform .75s cubic-bezier(.32,.72,0,1);will-change:transform}
.l-pista.arrastra,.l-pista.salto{transition:none}
.l-lam{flex:0 0 100%;height:100%;display:grid;place-items:center;overflow:hidden}
.l-in{width:min(1080px,100%);height:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:48px;padding:96px max(24px,env(safe-area-inset-right)) 120px max(24px,env(safe-area-inset-left))}
.l-txt{display:grid;gap:16px;align-content:center;min-width:0}
.l-paso{justify-self:start;display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--mt);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 12px 7px 7px}
.l-paso b{width:22px;height:22px;border-radius:50%;background:var(--l-grad);display:grid;place-items:center;font:800 12px var(--mt);letter-spacing:0}
.l-txt h1,.l-txt h2{margin:0;font:800 clamp(34px,6.2vw,62px)/1.02 var(--mt);letter-spacing:-.035em;text-wrap:balance}
.l-txt em{font-style:normal;background:var(--l-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.l-txt>p{margin:0;font:500 clamp(16px,2vw,19px)/1.45 var(--sf);color:rgba(255,255,255,.78);max-width:40ch;overflow-wrap:break-word}
.l-forma{display:flex;gap:6px;background:#fff;border-radius:999px;padding:6px;max-width:460px;box-shadow:0 20px 50px -24px rgba(237,33,124,.55)}
.l-forma input{flex:1 1 0;width:0;min-width:0;border:0;background:none;font:500 16px var(--sf);padding:0 14px;color:var(--tinta);outline:none}
.l-forma{min-width:0}
.l-forma button,.l-cta{border:0;border-radius:999px;background:var(--l-grad);color:#fff;font:700 15px var(--sf);padding:14px 22px;white-space:nowrap;cursor:pointer;text-decoration:none;justify-self:start;display:inline-flex;align-items:center;justify-content:center}
.l-nota{font-size:13px!important;color:rgba(255,255,255,.55)!important}
.l-nota a{color:inherit}
.l-dos{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.l-sec-cta{color:#fff;font:600 14px var(--sf);text-decoration:underline;text-underline-offset:3px}
.l-vis{position:relative;display:grid;place-items:center;min-height:0;height:100%;max-height:520px}
/* Lámina 1: tu ficha */
.l-ficha{width:min(320px,100%);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:28px;padding:26px;display:grid;justify-items:center;gap:12px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 30px 70px -40px rgba(0,0,0,.8)}
.l-ini{width:84px;height:84px;border-radius:50%;background:var(--l-grad);display:grid;place-items:center;font:800 30px var(--mt);color:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.06)}
.l-ini.chico{width:38px;height:38px;font-size:13px;box-shadow:none}
.l-vivo{font:800 22px/1.15 var(--mt);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l-res{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px;width:100%}
.l-res li{display:flex;align-items:center;gap:10px;font:600 14px var(--sf);background:rgba(255,255,255,.06);border-radius:14px;padding:10px 12px}
.l-res i{width:20px;height:20px;border-radius:50%;background:var(--l-grad);position:relative;flex:none}
.l-res i::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .35s cubic-bezier(.32,1.6,.5,1)}
.l-lam.activa .l-res li:nth-child(1) i::after{transform:rotate(45deg) scale(1);transition-delay:.9s}
.l-lam.activa .l-res li:nth-child(2) i::after{transform:rotate(45deg) scale(1);transition-delay:1.25s}
.l-lam.activa .l-res li:nth-child(3) i::after{transform:rotate(45deg) scale(1);transition-delay:1.6s}
/* Lámina 2: así te ven */
.l-mini{width:min(250px,78%);background:#fff;color:var(--tinta);border-radius:26px;padding:14px;display:grid;gap:10px;box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.l-mcab{display:flex;align-items:center;gap:10px}
.l-mcab b{display:block;font:800 15px/1.1 var(--mt)}.l-mcab small{font-size:11px;color:var(--gris)}
.l-mprod{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.l-mprod i{aspect-ratio:1;border-radius:14px;background:var(--hueso) center/cover}
.l-mwa{display:flex;align-items:center;justify-content:center;gap:7px;background:#25D366;color:#fff;border-radius:999px;font:700 13px var(--sf);padding:10px}
.l-mwa svg{width:16px;height:16px;fill:#fff}
.l-chip{position:absolute;display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--tinta);border-radius:999px;padding:8px 12px;font:700 13px var(--sf);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.l-chip svg{width:16px;height:16px;fill:currentColor}
.l-chip.c1{top:12%;left:4%}.l-chip.c2{top:44%;right:2%}.l-chip.c3{bottom:12%;left:8%}
/* Lámina 3: cada venta */
.l-linea{list-style:none;margin:0;padding:0;display:grid;gap:14px;width:min(360px,100%);position:relative}
.l-linea::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:rgba(255,255,255,.18)}
.l-linea li{position:relative;display:grid;gap:2px;padding:14px 16px 14px 52px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:18px}
.l-linea li::before{content:"";position:absolute;left:8px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--l-grad);box-shadow:0 0 0 5px #121212}
.l-linea b{font:700 15px var(--sf)}.l-linea span{font-size:13.5px;color:rgba(255,255,255,.72)}
.l-pronto{margin-top:14px;font:700 11px var(--sf);letter-spacing:.06em;text-transform:uppercase;color:#F7B3D0;border:1px dashed rgba(247,179,208,.5);border-radius:999px;padding:7px 12px}
/* Entrada por partes al llegar a cada lámina */
.l-txt>*,.l-vis>*{opacity:0;transform:translateY(18px)}
.l-lam.activa .l-txt>*,.l-lam.activa .l-vis>*{animation:l-entra .7s cubic-bezier(.32,.72,0,1) forwards}
.l-lam.activa .l-txt>*:nth-child(2){animation-delay:.08s}.l-lam.activa .l-txt>*:nth-child(3){animation-delay:.16s}.l-lam.activa .l-txt>*:nth-child(4){animation-delay:.26s}.l-lam.activa .l-txt>*:nth-child(5){animation-delay:.34s}
.l-lam.activa .l-vis>*:nth-child(1){animation-delay:.3s}.l-lam.activa .l-vis>*:nth-child(2){animation-delay:.6s}.l-lam.activa .l-vis>*:nth-child(3){animation-delay:.8s}.l-lam.activa .l-vis>*:nth-child(4){animation-delay:1s}
.l-lam.activa .l-linea li{animation:l-entra .6s cubic-bezier(.32,.72,0,1) both}
.l-lam.activa .l-linea li:nth-child(2){animation-delay:.6s}.l-lam.activa .l-linea li:nth-child(3){animation-delay:1s}
.l-lam.activa .l-chip{animation:l-entra .6s cubic-bezier(.32,.72,0,1) forwards,l-flota 4s ease-in-out 1.2s infinite}
@keyframes l-entra{to{opacity:1;transform:none}}
@keyframes l-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* Navegación: flechas, puntos con su nombre y el avance de cada lámina */
.l-nav{position:absolute;z-index:6;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.l-flecha{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font:600 20px/1 var(--sf);cursor:pointer}
.l-puntos{display:flex;gap:6px}
.l-puntos button{position:relative;overflow:hidden;height:36px;min-width:36px;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);font:600 12.5px var(--sf);padding:0 12px;cursor:pointer;transition:background .3s}
.l-puntos button span{position:relative;z-index:1}
.l-puntos button.on{background:rgba(255,255,255,.18);color:#fff}
.l-puntos button.on::before{content:"";position:absolute;inset:0;background:var(--l-grad);transform-origin:left;animation:l-avance 7s linear forwards}
.landing.sin-auto .l-puntos button.on::before{animation:none;transform:none}
@keyframes l-avance{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.l-pista-hint{position:absolute;z-index:5;left:50%;bottom:calc(max(22px,env(safe-area-inset-bottom)) + 58px);transform:translateX(-50%);font:700 11px var(--sf);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);pointer-events:none;animation:l-hint 1.6s ease-in-out 3,l-fuera .5s 5s forwards}
.l-pista-hint::after{content:" ›"}
.landing.sin-auto .l-pista-hint{display:none}
@keyframes l-hint{50%{transform:translateX(calc(-50% - 8px))}}
@keyframes l-fuera{to{opacity:0}}
@media(max-width:760px){
  .l-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:16px;padding:76px 22px 134px;align-content:start}
  .l-txt{gap:12px}
  .l-vis{max-height:none}
  .l-ficha{padding:16px;gap:8px}.l-ini{width:56px;height:56px;font-size:21px;box-shadow:none}.l-vivo{font-size:19px}
  .l-res{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.l-res li{padding:7px 10px;font-size:12.5px;gap:7px}.l-res i{width:16px;height:16px}.l-res i::after{left:5px;top:2px;width:4px;height:8px}
  .l-mini{width:min(210px,64%)}
  .l-puntos button span{display:none}
  .l-puntos button{width:36px;padding:0}
  .l-linea{gap:10px}.l-linea li{padding:11px 14px 11px 50px}
}
@media(max-height:720px) and (max-width:760px){
  .l-txt h1,.l-txt h2{font-size:30px}
  .l-txt>p{font-size:15px}
  .l-ficha{padding:12px;gap:6px}.l-ini{width:40px;height:40px;font-size:15px}.l-vivo{font-size:17px}.l-res li{padding:5px 9px}
  .l-mini{width:min(190px,58%);padding:10px;gap:8px}.l-mini .l-ini.chico{width:30px;height:30px;font-size:11px}.l-mcab b{font-size:13.5px}
  .l-mwa{padding:8px;font-size:12px}
  .l-chip{padding:6px 10px;font-size:12px}.l-chip.c2{display:none}.l-chip.c1{top:2%}.l-chip.c3{bottom:2%}
  .l-linea li span{display:none}
  .l-pronto{display:none}
}
@media(prefers-reduced-motion:reduce){
  .l-pista,.landing::before,.landing::after{transition:none}
  .l-txt>*,.l-vis>*{opacity:1;transform:none}
  .l-lam.activa .l-txt>*,.l-lam.activa .l-vis>*,.l-lam.activa .l-linea li,.l-lam.activa .l-chip{animation:none}
  .l-puntos button.on::before{animation:none;transform:none}
  .l-pista-hint{display:none}
}

/* Correcciones de interfaz y navegación (revisión de expertos, 2026-10-20) */
/* Volver a la portada desde el panel: el logo es un botón con su flecha */
.a-portada{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 6px 6px 0;margin:-6px 0;color:var(--papel);cursor:pointer;font:600 18px/1 var(--sf)}
.a-portada span{opacity:.7;transition:transform .25s var(--muelle)}
.a-portada:hover span{transform:translateX(-3px);opacity:1}
/* Cada hoja con su botón para cerrar, siempre a la vista */
.hoja .h-x{position:sticky;top:2px;float:right;z-index:4;width:36px;height:36px;margin:-2px -6px 0 8px;border-radius:50%;border:1px solid rgba(27,27,27,.08);background:rgba(255,255,255,.85);color:var(--tinta);font:400 24px/1 var(--sf);display:grid;place-items:center;padding:0 0 2px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hoja .h-x::before{content:"";position:absolute;inset:-5px}
/* Simulador: «Siguiente» más grande; si falta algo, lo dice */
.circ{width:40px;height:40px;font-size:20px}
.circ.ir[aria-disabled="true"]{background:rgba(255,255,255,.75);color:var(--tinta);border-color:rgba(27,27,27,.14);opacity:.6}
.dock .falta{margin:8px 2px 0;font:600 13px/1.3 var(--sf);color:#B3165C}
.dock .falta.sacude{animation:sacude .4s}
@keyframes sacude{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.pl.vuelta{font:700 18px/1 var(--sf);display:grid;place-items:center}
.pl.vuelta i{display:none}
/* Legibilidad en los paneles: nada menor a 10.5 px */
.w .cap,.cap{font-size:11px;letter-spacing:.06em;height:15px}
.ej{font-size:10.5px}
.tesela .ej{font-size:10px}
.ej-mini{font-size:10px}
.tesela .precio{font-size:11px}
.cuenta.ej-cat{font-size:10px}
.sig-txt span{font-size:11px}
.liga-vp{font-size:10px}
.wallet{font-size:11px}
/* Botones fáciles de tocar: área de 44 px aunque se vean chicos */
.compartir{position:relative}
.w.s .compartir,.compartir.abajo{position:absolute}
.compartir::before{content:"";position:absolute;inset:-10px}
.ayuda{width:40px;height:40px}
.acceso .acc-b{position:relative}
.acceso .acc-b::before{content:"";position:absolute;inset:-6px}
/* Portada con el teléfono acostado: todo cabe en una pantalla baja */
/* Acostado de verdad: ancho de 560 px o más. Con el teléfono parado y el teclado abierto la pantalla también queda más ancha que alta (iPhone, 2026-10-23) */
@media (orientation:landscape) and (max-height:520px) and (min-width:560px){
  .l-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:none;gap:20px;padding:58px max(28px,env(safe-area-inset-right)) 62px max(28px,env(safe-area-inset-left));align-content:center}
  .l-txt{gap:8px}
  .l-txt h1,.l-txt h2{font-size:26px}
  .l-txt>p{font-size:14px}
  .l-paso{font-size:10.5px;padding:5px 10px 5px 5px}.l-paso b{width:18px;height:18px;font-size:10px}
  .l-nota{display:none}
  .l-forma button,.l-cta{padding:11px 18px;font-size:14px}
  .l-vis{max-height:none}
  .l-ficha{padding:12px;gap:6px}.l-ini{width:40px;height:40px;font-size:15px;box-shadow:none}.l-vivo{font-size:16px}
  .l-res{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.l-res li{padding:5px 9px;font-size:12px}
  .l-mini{width:170px;padding:10px;gap:7px}.l-mprod i:nth-child(2){display:none}.l-mprod{grid-template-columns:1fr}.l-mprod i{aspect-ratio:16/9}
  .l-chip{padding:5px 9px;font-size:11.5px}.l-chip.c2{display:none}
  .l-linea{gap:6px}.l-linea li{padding:8px 12px 8px 46px}.l-linea li span{display:none}.l-pronto{display:none}
  .l-nav{bottom:max(8px,env(safe-area-inset-bottom));padding:4px}.l-flecha,.l-puntos button{height:32px;min-width:32px;width:32px}
  .l-puntos button span{display:none}
  .l-pista-hint{display:none}
}

/* Portada · dos propuestas (W30): A «A tu ritmo» (magenta-naranja, noche por la hora) y B «Guiada con pausa» (Tierra Viva y oro, noche según el teléfono) */
.landing{--l-bg:#121212;--l-tx:#fff;--l-sub:rgba(255,255,255,.78);--l-vidrio:rgba(255,255,255,.07);--l-borde:rgba(255,255,255,.16);--l-grad:linear-gradient(120deg,#FF4D9D,#FFA552);--l-acento:#FF7AB6;--l-orbe1:rgba(237,33,124,.55);--l-orbe2:rgba(242,140,56,.32);--l-orbe3:rgba(201,166,107,.28);background:var(--l-bg);color:var(--l-tx);transition:background .4s}
.landing[data-tema="dia"]{--l-bg:#F4F2EB;--l-tx:#1B1B1B;--l-sub:#4a463f;--l-vidrio:rgba(255,255,255,.72);--l-borde:rgba(27,27,27,.1);--l-grad:linear-gradient(120deg,#E0136F,#E8771F);--l-acento:#C8146A;--l-orbe1:rgba(237,33,124,.22);--l-orbe2:rgba(242,140,56,.18);--l-orbe3:rgba(201,166,107,.22)}
.landing[data-p="b"]{--l-grad:linear-gradient(110deg,#FF4A9A,#E0794F 55%,#EFBF9A);--l-acento:#EFBF9A}
.landing[data-p="b"][data-tema="dia"]{--l-grad:linear-gradient(110deg,#E2187A,#B6452C 60%,#A8824A);--l-acento:#B6452C}
.landing::before{background:radial-gradient(circle at 30% 30%,var(--l-orbe1),var(--l-orbe2) 38%,transparent 68%)}
.landing::after{background:radial-gradient(circle,var(--l-orbe3),transparent 62%)}
.l-logo-dia{display:none}
.landing[data-tema="dia"] .l-logo-dia{display:block}.landing[data-tema="dia"] .l-logo-noche{display:none}
.landing .l-entrar{color:var(--l-tx);border-color:var(--l-borde);background:var(--l-vidrio)}
.landing .l-paso{color:var(--l-tx);background:var(--l-vidrio);border-color:var(--l-borde)}
.landing .l-txt>p{color:var(--l-sub)}
.landing .l-nota{color:var(--l-sub)!important;opacity:.8}
.landing .l-sec-cta{color:var(--l-tx)}
.landing[data-tema="dia"] .l-forma{border:1px solid var(--l-borde);box-shadow:0 18px 40px -26px rgba(0,0,0,.35)}
.landing .l-ficha,.landing .l-res li,.landing .l-linea li{background:var(--l-vidrio);border-color:var(--l-borde)}
.landing .l-ficha{color:var(--l-tx)}
.landing .l-linea::before{background:var(--l-borde)}
.landing .l-linea li span{color:var(--l-sub)}
.landing .l-linea li::before{box-shadow:0 0 0 5px var(--l-bg)}
.landing .l-pronto{color:var(--l-acento);border-color:var(--l-borde)}
.landing .l-paso b,.landing .l-res i,.landing .l-forma button,.landing .l-cta,.landing .l-linea li::before,.landing .l-ini{background:var(--l-grad)}
/* Letras en color: A degradado que no se oscurece en iPhone (sin transform al aparecer); B color sólido con subrayado en degradado */
.landing[data-p="a"] .l-txt em{background:var(--l-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-right:.04em}
.landing[data-p="b"] .l-txt em{background:var(--l-grad) no-repeat 0 94%/100% .12em;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--l-acento)}
.landing .l-txt>h1,.landing .l-txt>h2{transform:none}
.l-lam.activa .l-txt>h1,.l-lam.activa .l-txt>h2{animation-name:l-aparece}
@keyframes l-aparece{from{opacity:0}to{opacity:1}}
/* Continuidad: A, un brillo que viaja; B, una franja de color continua que cruza las láminas */
.landing[data-p="b"]::before{width:320vw;height:46vh;left:0;top:28vh;border-radius:50%;background:linear-gradient(100deg,transparent 0,var(--l-orbe1) 12%,rgba(182,69,44,.45) 34%,rgba(239,191,154,.38) 56%,rgba(201,166,107,.35) 76%,var(--l-orbe1) 92%,transparent 100%);filter:blur(42px);transform:translateX(calc(var(--i) * -70vw)) rotate(-8deg)}
.landing[data-p="b"]::after{display:none}
.landing[data-p="b"][data-tema="dia"]::before{opacity:.55}
/* Navegación: fuera los círculos que parecían botones */
.l-nav,.l-pista-hint{display:none!important}
.l-prog,.l-pie-a,.l-pie-b,.l-asomo{display:none}
/* A · «A tu ritmo»: barra fina segmentada arriba y «Siguiente ›» abajo */
.landing[data-p="a"] .l-prog{display:flex;gap:6px;position:absolute;z-index:6;left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));top:calc(max(14px,env(safe-area-inset-top)) + 46px);max-width:1080px;margin:0 auto}
.l-prog i{flex:1;height:3px;border-radius:3px;background:var(--l-borde);overflow:hidden;position:relative}
.l-prog i.hecho{background:var(--l-tx);opacity:.55}
.l-prog i.actual{background:var(--l-grad)}
.landing[data-p="a"] .l-pie-a{display:flex;align-items:center;gap:12px;position:absolute;z-index:6;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));max-width:1080px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left))}
.l-atras{width:44px;height:44px;border-radius:50%;border:1px solid var(--l-borde);background:transparent;color:var(--l-tx);font:500 22px/1 var(--sf);cursor:pointer;opacity:.75}
.l-cuenta{flex:1;font:600 13px var(--sf);color:var(--l-sub);letter-spacing:.04em}
.l-siguiente{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--l-borde);background:var(--l-vidrio);color:var(--l-tx);font:700 15px var(--sf);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.l-siguiente span{transition:transform .3s var(--muelle)}
.l-lam.activa ~ .x{display:none}
.landing[data-p="a"]:not(.sin-mov) .l-siguiente span{animation:l-empuja 1.8s ease-in-out 1.2s 2}
@keyframes l-empuja{50%{transform:translateX(5px)}}
/* B · «Guiada con pausa»: línea fina de avance abajo, «Paso 1 de 3» y flechas en las orillas */
.landing[data-p="b"] .l-pie-b{display:grid;justify-items:center;gap:8px;position:absolute;z-index:6;left:50%;transform:translateX(-50%);bottom:max(22px,env(safe-area-inset-bottom))}
.l-etq{font:600 13px var(--sf);color:var(--l-sub);letter-spacing:.03em;white-space:nowrap}
.l-barra{width:140px;height:2px;border-radius:2px;background:var(--l-borde);overflow:hidden}
.l-barra i{display:block;height:100%;width:33.3%;background:var(--l-grad);transition:width .5s ease}
.l-barra i.corre{transition:width 12s linear}
.landing[data-p="b"] .l-asomo{display:grid;place-items:center;position:absolute;z-index:6;top:50%;margin-top:-32px;width:34px;height:64px;border:1px solid var(--l-borde);background:var(--l-vidrio);color:var(--l-tx);font:500 22px/1 var(--sf);cursor:pointer;opacity:.6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .2s}
.landing[data-p="b"] .l-asomo:hover{opacity:1}
.l-asomo.der{right:0;border-radius:14px 0 0 14px;border-right:0;animation:l-asoma 1.6s ease-in-out 1s 2}
.l-asomo.izq{left:0;border-radius:0 14px 14px 0;border-left:0}
@keyframes l-asoma{50%{transform:translateX(-6px)}}
@media(max-width:760px){.landing[data-p="b"] .l-asomo{width:26px;height:54px;margin-top:-27px;font-size:18px}}
@media (orientation:landscape) and (max-height:520px) and (min-width:560px){
  .landing[data-p="a"] .l-prog{top:calc(max(8px,env(safe-area-inset-top)) + 40px)}
  .landing[data-p="a"] .l-pie-a{bottom:8px}.l-atras{width:36px;height:36px}.l-siguiente{height:38px;padding:0 14px;font-size:14px}
  .landing[data-p="b"] .l-pie-b{bottom:8px}
}
@media(prefers-reduced-motion:reduce){.l-asomo.der,.landing[data-p="a"] .l-siguiente span{animation:none}.l-barra i.corre{transition:none}}
@media(max-width:760px){.landing[data-p="b"] .l-asomo.izq{display:none}}

/* Receta para el degradado en iPhone (investigación 2026-10-21): respaldo legible y transparencia solo si se soporta */
.landing[data-p="a"] .l-txt em{color:var(--l-acento);-webkit-text-fill-color:currentColor;background:none}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .landing[data-p="a"] .l-txt em{background:var(--l-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
/* Automatizador de Ecommerce: nombre del producto y giros montados en cada etapa (W31) */
.l-producto{font:700 11px/1.2 var(--mt);letter-spacing:.14em;text-transform:uppercase;color:var(--l-sub);padding-left:12px;margin-left:2px;border-left:1px solid var(--l-borde);max-width:150px}
.l-giros{display:none}
.landing[data-g="a"] .l-giros{display:flex;gap:6px;align-items:center;position:absolute;z-index:6;left:0;right:0;top:calc(max(14px,env(safe-area-inset-top)) + 58px);max-width:1080px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left));overflow-x:auto;scrollbar-width:none}
.landing[data-g="a"] .l-giros::-webkit-scrollbar{display:none}
.l-gtit{font:600 12px var(--sf);color:var(--l-sub);white-space:nowrap;margin-right:4px}
.l-giros button{flex:none;border:1px solid var(--l-borde);background:var(--l-vidrio);color:var(--l-tx);border-radius:999px;padding:7px 12px;font:600 13px var(--sf);cursor:pointer;white-space:nowrap}
.l-giros button[aria-checked="true"]{background:var(--l-grad);color:#fff;border-color:transparent}
.landing[data-g="a"] .l-in{padding-top:146px}
.l-gej{font:600 12px var(--sf);color:var(--l-sub)}
.l-mprecio{font:800 14px var(--mt);color:var(--tinta)}
.l-dif{display:flex;flex-wrap:wrap;gap:6px}
.l-dif span{font:600 13px var(--sf);color:var(--l-tx);background:var(--l-vidrio);border:1px solid var(--l-borde);border-radius:999px;padding:6px 11px}
.l-chip{font:700 12.5px var(--sf)}
/* B: tres giros a la vez, en abanico */
.l-abanico{position:relative;width:min(340px,100%);height:min(330px,46vh);display:grid;place-items:center}
.l-abanico>*{position:absolute;transition:transform .5s}
.l-abanico>*:nth-child(1){transform:translate(-26%,-8%) rotate(-7deg);z-index:1}
.l-abanico>*:nth-child(2){transform:translate(0,4%);z-index:3}
.l-abanico>*:nth-child(3){transform:translate(26%,-8%) rotate(7deg);z-index:2}
.l-ficha.l-fmini{width:170px;padding:16px;gap:6px}
.l-ficha.l-fmini .l-ini{width:48px;height:48px;font-size:17px;box-shadow:none}
.l-ficha.l-fmini .l-vivo{font-size:15px}
.l-listo{display:flex;align-items:center;gap:6px;font:600 12px var(--sf)}
.l-listo i{width:16px;height:16px;border-radius:50%;background:var(--l-grad)}
.l-abanico .l-mini{width:160px;padding:10px;gap:7px}
.l-abanico .l-mini .l-ini.chico{width:28px;height:28px;font-size:10px}
.l-abanico .l-mcab b{font-size:12.5px}.l-abanico .l-mcab small{font-size:10.5px}
.l-mprod.uno{grid-template-columns:1fr}
.l-chats{display:grid;gap:10px;width:min(360px,100%)}
.l-chat{background:var(--l-vidrio);border:1px solid var(--l-borde);border-radius:18px;padding:11px 14px;display:grid;gap:6px}
.l-chat small{font:700 11px var(--sf);letter-spacing:.04em;color:var(--l-sub)}
.l-burbuja{margin:0;justify-self:start;background:#fff;color:var(--tinta);border-radius:14px 14px 14px 4px;padding:8px 11px;font:500 13.5px/1.35 var(--sf)}
.l-hecho{display:flex;gap:7px;align-items:center;font:600 12.5px var(--sf);color:var(--l-tx)}
.l-hecho i{flex:none;width:16px;height:16px;border-radius:50%;background:var(--l-grad)}
.l-lam.activa .l-chats .l-chat{animation:l-entra .6s cubic-bezier(.32,.72,0,1) both}
.l-lam.activa .l-chats .l-chat:nth-child(2){animation-delay:.5s}.l-lam.activa .l-chats .l-chat:nth-child(3){animation-delay:.9s}
@media(max-width:760px){
  .l-producto{display:none}
  .landing[data-g="a"] .l-in{padding-top:118px}
  .landing[data-g="a"] .l-giros{top:calc(max(14px,env(safe-area-inset-top)) + 54px)}
  .l-gtit{display:none}
  .l-abanico{height:min(250px,36vh)}
  .l-ficha.l-fmini{width:140px;padding:12px}.l-abanico .l-mini{width:130px}
  .l-dif span{font-size:12px;padding:5px 9px}
  .l-chats{gap:7px}.l-chat{padding:8px 11px}.l-burbuja{font-size:12.5px}
}
@media(max-height:720px) and (max-width:760px){
  .l-dif{display:none}
  .l-chats .l-chat:nth-child(3){display:none}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:560px){
  .landing[data-g="a"] .l-giros{top:calc(max(8px,env(safe-area-inset-top)) + 48px)}
  .landing[data-g="a"] .l-in{padding-top:96px}
  .l-dif{display:none}.l-abanico{height:180px}.l-ficha.l-fmini .l-listo{display:none}.l-chats .l-chat:nth-child(3){display:none}
}
@media(max-width:760px){
  .l-txt h1,.l-txt h2{font-size:clamp(26px,7.6vw,32px)}
  .l-txt>p{font-size:15px}
  .landing .l-txt{gap:10px}
  .l-dif{display:none}
  .l-vis .l-ficha:not(.l-fmini){padding:12px 14px;gap:6px}.l-vis .l-ficha:not(.l-fmini) .l-ini{width:44px;height:44px;font-size:16px}.l-vis .l-ficha:not(.l-fmini) .l-vivo{font-size:17px}
  .l-vis>.l-mini .l-mprod i:nth-child(2){display:none}.l-vis>.l-mini .l-mprod{grid-template-columns:1fr}.l-vis>.l-mini .l-mprod i{aspect-ratio:16/10}
  .l-vis>.l-mini{width:min(220px,66%)}
}
@media(max-width:760px){.l-vis>.l-chip.c1{top:3%;left:auto;right:2%}.l-vis>.l-chip.c2{top:50%;left:0;right:auto}.l-vis>.l-chip.c3{bottom:4%;left:auto;right:2%}}
.landing{--l-solido:#262321}
.landing[data-tema="dia"]{--l-solido:#fff}
.l-abanico .l-ficha,.l-abanico .l-mini{background:var(--l-solido);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.l-abanico .l-mini{background:#fff}
.l-abanico>*:nth-child(1){transform:translate(-42%,-2%) rotate(-8deg)}
.l-abanico>*:nth-child(3){transform:translate(42%,-2%) rotate(8deg)}
@media(max-width:760px){.l-ficha.l-fmini{width:128px;padding:12px 10px}.l-ficha.l-fmini .l-vivo{font-size:13.5px;white-space:normal;text-align:center;line-height:1.15}.l-ficha.l-fmini .l-gej{font-size:11px}.l-ficha.l-fmini .l-listo{font-size:11px}.l-abanico .l-mini{width:124px}}

/* Imágenes de los giros (W31): foto protagonista o collage, fondo difuminado continuo y conversación de WhatsApp */
.l-fondo{position:absolute;inset:-60px;z-index:0;background:center/cover no-repeat;filter:blur(38px) saturate(1.25);opacity:.42;transform:scale(1.1);transition:background-image .6s,opacity .6s;pointer-events:none}
.landing[data-tema="dia"] .l-fondo{opacity:.3}
.landing::before,.landing::after{z-index:0}
.l-hero-img{position:relative;width:min(380px,100%);display:grid;justify-items:center}
.l-foto,.l-collage{width:100%;aspect-ratio:4/5;max-height:min(460px,52vh);border-radius:30px;overflow:hidden;box-shadow:0 34px 70px -34px rgba(0,0,0,.7);background:var(--hueso)}
.l-foto img{width:100%;height:100%;object-fit:cover;display:block}
.l-collage{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr 1fr;gap:6px;background:transparent;box-shadow:none}
.l-collage img{width:100%;height:100%;object-fit:cover;border-radius:18px;display:block;box-shadow:0 18px 40px -26px rgba(0,0,0,.6)}
.l-collage img:nth-child(1){grid-row:1/4}
.l-collage img:nth-child(4){display:none}
.l-sobre{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.92);color:var(--tinta);border-radius:18px;padding:10px 12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.l-sobre .l-ini{width:40px;height:40px;font-size:14px;box-shadow:none;flex:none}
.l-sobre b{display:block;font:800 16px/1.15 var(--mt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.l-sobre small{font:600 12px var(--sf);color:var(--gris)}
.l-insignia{position:absolute;display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--tinta);border-radius:999px;padding:8px 12px;font:700 12.5px var(--sf);box-shadow:0 14px 30px -14px rgba(0,0,0,.55);white-space:nowrap}
.l-insignia i{width:16px;height:16px;border-radius:50%;background:var(--l-grad);position:relative}
.l-insignia i::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.l-insignia.i1{top:7%;left:-6%}.l-insignia.i2{top:30%;right:-7%}.l-insignia.i3{top:53%;left:-4%}
.l-lam.activa .l-insignia{animation:l-entra .6s cubic-bezier(.32,.72,0,1) both}
.l-lam.activa .l-insignia.i1{animation-delay:.7s}.l-lam.activa .l-insignia.i2{animation-delay:1s}.l-lam.activa .l-insignia.i3{animation-delay:1.3s}
.l-insignia{opacity:0}
/* Lámina 3: conversación de WhatsApp del negocio */
.l-whats{width:min(340px,100%);border-radius:26px;overflow:hidden;background:#ECE5DD;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);display:grid}
.l-wcab{display:flex;align-items:center;gap:10px;background:#075E54;color:#fff;padding:10px 12px}
.l-wcab img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.l-wcab b{display:block;font:700 14.5px/1.1 var(--sf)}.l-wcab small{font:500 11.5px var(--sf);opacity:.8}
.l-wcuerpo{display:grid;gap:8px;padding:12px}
.l-msg{margin:0;max-width:82%;padding:8px 11px;border-radius:12px;font:500 13.5px/1.35 var(--sf);color:#111;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.l-msg.in{background:#fff;justify-self:start;border-top-left-radius:4px}
.l-msg.out{background:#DCF8C6;justify-self:end;border-top-right-radius:4px}
.l-pagochip{justify-self:end;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #cfe9c0;border-radius:12px;padding:7px 10px;font:700 12px var(--sf);color:#00708A}
.l-pagochip::before{content:"";width:14px;height:14px;border-radius:50%;background:#00B1EA}
.l-lam.activa .l-wcuerpo>*{animation:l-entra .5s cubic-bezier(.32,.72,0,1) both}
.l-lam.activa .l-wcuerpo>*:nth-child(2){animation-delay:.6s}.l-lam.activa .l-wcuerpo>*:nth-child(3){animation-delay:1.1s}.l-lam.activa .l-wcuerpo>*:nth-child(4){animation-delay:1.6s}
@media(max-width:760px){
  .l-hero-img{width:min(300px,86%)}
  .l-foto,.l-collage{aspect-ratio:auto;height:min(300px,34vh);max-height:none}
  .l-sobre{left:8px;right:8px;bottom:8px;padding:7px 9px}.l-sobre .l-ini{width:32px;height:32px;font-size:12px}.l-sobre b{font-size:14px}
  .l-insignia{padding:6px 10px;font-size:11.5px}.l-insignia.i1{left:-8%}.l-insignia.i2{right:-9%}.l-insignia.i3{display:none}
  .l-whats{width:min(300px,92%)}.l-msg{font-size:12.5px;padding:7px 9px}.l-wcuerpo{gap:6px;padding:10px}
}
@media(max-height:720px) and (max-width:760px){
  .l-foto,.l-collage{height:min(220px,30vh)}
  .l-wcuerpo>*:nth-child(4){display:none}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:560px){
  .l-foto,.l-collage{height:200px;aspect-ratio:auto}.l-hero-img{width:240px}.l-insignia.i3{display:none}
  .l-whats{width:260px}.l-wcuerpo>*:nth-child(4){display:none}.l-msg{font-size:12px}
}

/* ---------- Portada 2 (W32, W33): la foto del giro a pantalla completa avanza como panorama; 5 pasos en 3 láminas ---------- */
/* Sobre la foto los textos van siempre en blanco con un velo oscuro; de día el velo es más ligero */
.landing[data-v="2"]{--l-tx:#fff;--l-sub:rgba(255,255,255,.88);--l-vidrio:rgba(255,255,255,.16);--l-borde:rgba(255,255,255,.32);background:#111}
.landing[data-v="2"] .l-logo-noche{display:block}.landing[data-v="2"] .l-logo-dia{display:none}
.landing[data-v="2"]::before{display:none}
.landing[data-v="2"] .l-fondo{inset:0;filter:none;opacity:1;background-size:cover;background-position:calc(12% + var(--i) * 38%) 45%;transform:scale(1.06);transition:background-image .6s,background-position 1.2s cubic-bezier(.32,.72,0,1)}
.landing[data-v="2"]::after{content:"";position:absolute;inset:0;z-index:0;width:auto;height:auto;border-radius:0;transform:none;opacity:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,8,.66) 0%,rgba(10,8,8,.18) 20%,rgba(10,8,8,.12) 38%,rgba(10,8,8,.72) 62%,rgba(10,8,8,.93) 100%)}
.landing[data-v="2"][data-tema="dia"]::after{background:linear-gradient(180deg,rgba(30,20,16,.5) 0%,rgba(30,20,16,.08) 22%,rgba(30,20,16,.05) 38%,rgba(30,20,16,.62) 62%,rgba(30,20,16,.86) 100%)}
.landing[data-v="2"] .l-giros{display:none!important}
.landing[data-v="2"] .l-in{display:block;width:100%;max-width:none;height:100%;padding:0;position:relative}
.v2{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;max-width:1080px;margin:0 auto;
  padding:calc(max(14px,env(safe-area-inset-top)) + 76px) max(20px,env(safe-area-inset-right)) calc(max(18px,env(safe-area-inset-bottom)) + 74px) max(20px,env(safe-area-inset-left))}
.v2-como{display:grid;gap:8px;align-content:start;max-width:400px;min-height:0}
.v2-txt{display:grid;gap:10px;justify-items:start;max-width:560px;align-self:end}
.landing .v2-txt>h1,.landing .v2-txt>h2{margin:0;font:800 clamp(28px,7.6vw,52px)/1.06 var(--mt);letter-spacing:-.03em;color:var(--l-tx);text-wrap:balance}
.landing .v2-txt>p{margin:0;font-size:clamp(15px,4vw,18px);color:var(--l-sub)}
.v2-paso{font:700 11px/1.3 var(--mt);letter-spacing:.14em;text-transform:uppercase;color:#FFD3E6}
.landing[data-p="b"] .v2-paso{color:#F3D3A8}
.v2-nota{margin:0;font-size:12px;color:var(--l-sub)}.v2-nota a{color:inherit}
.landing[data-v="2"] .l-forma{width:100%;max-width:440px}
/* Tarjetas: aparecen una tras otra al llegar a la lámina */
.v2-t{margin:0;background:rgba(255,255,255,.95);color:#1B1B1B;border-radius:16px;padding:10px 12px;font:500 13.5px/1.35 var(--sf);box-shadow:0 14px 30px -18px rgba(0,0,0,.75);display:grid;gap:3px;opacity:0}
.v2-t b{font-weight:700}
.l-lam.activa .v2-t{animation:l-entra .6s cubic-bezier(.32,.72,0,1) forwards}
.l-lam.activa .v2-t:nth-child(2){animation-delay:.7s}.l-lam.activa .v2-t:nth-child(3){animation-delay:1.4s}.l-lam.activa .v2-t:nth-child(4){animation-delay:2.1s}
.v2-n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--l-grad);color:#fff;font:800 11px var(--mt);margin-right:6px;vertical-align:1px}
.v2-preg{justify-self:start;max-width:86%;border-bottom-left-radius:5px;display:block}
.v2-resp{justify-self:end;max-width:88%;background:#DCF8C6;border-bottom-right-radius:5px;display:block}
.v2-ej{justify-self:end;margin-bottom:-18px;font:700 9.5px var(--sf);letter-spacing:.08em;text-transform:uppercase;color:#7a756b}
.v2-liga{display:flex;gap:10px;align-items:center;margin-top:2px}
.v2-liga svg{width:54px;height:54px;flex:none;background:#fff;border-radius:6px}
.v2-liga span{display:grid;font-size:12.5px;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.v2-liga small{color:#6B675E;font-size:11px}
.v2-post{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center}
.v2-post i{width:52px;height:52px;border-radius:10px;background-size:cover;background-position:center}
.v2-redes{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.v2-redes span{font:700 10.5px var(--sf);padding:2px 7px;border-radius:999px;background:#EEE9DD}
.v2-linea,.v2-si,.v2-x{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:3px}
.v2-linea li,.v2-si li,.v2-x li{display:flex;gap:7px;align-items:baseline}
.v2-linea li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--l-grad);flex:none;transform:translateY(-1px)}
.v2-si li::before{content:"✓";color:#2D6B3E;font-weight:800}
.v2-x li::before{content:"✕";opacity:.8}
.v2-antes{background:rgba(20,16,14,.55);color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.v2-flecha{justify-self:center;background:none;box-shadow:none;padding:0;color:#fff;font:700 11px var(--mt);letter-spacing:.14em;text-transform:uppercase}
.v2-flecha::before{content:"↓ "}
/* Un solo botón para elegir el giro (sustituye la fila de pastillas que se cortaba) */
.v2-giro{display:none}
.landing[data-v="2"] .v2-giro{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--l-borde);background:var(--l-vidrio);color:#fff;border-radius:999px;padding:7px 14px;font:600 13px var(--sf);cursor:pointer;min-height:44px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.v2-giro-et{font-weight:500;opacity:.75}
.v2-giro i{font-style:normal;font-size:10px;opacity:.8}
.v2-menu{position:absolute;z-index:8;right:max(20px,env(safe-area-inset-right));top:calc(max(14px,env(safe-area-inset-top)) + 54px);width:min(300px,calc(100% - 40px));display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;border-radius:20px;background:rgba(20,16,14,.86);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 50px -20px rgba(0,0,0,.7)}
.v2-menu[hidden]{display:none}
.v2-mt{grid-column:1/-1;font:700 10.5px var(--mt);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);padding:2px 4px 4px}
.v2-menu button{display:flex;align-items:center;gap:8px;border:1px solid transparent;background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:6px;font:600 13px var(--sf);cursor:pointer;text-align:left;min-height:44px}
.v2-menu button[aria-checked="true"]{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.18)}
.v2-menu button i{width:32px;height:32px;border-radius:8px;background-size:cover;background-position:center;flex:none}
/* Computadora: texto a la izquierda, tarjetas a la derecha, velo de lado */
@media(min-width:900px){
  .v2{grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:center;gap:56px;padding-top:120px;padding-bottom:110px}
  .v2-txt{order:1;align-self:end}.v2-como{order:2;align-self:center}
  .landing[data-v="2"]::after{background:linear-gradient(90deg,rgba(10,8,8,.84) 0%,rgba(10,8,8,.55) 42%,rgba(10,8,8,.2) 100%),linear-gradient(180deg,rgba(10,8,8,.55),transparent 22%)}
  .landing[data-v="2"][data-tema="dia"]::after{background:linear-gradient(90deg,rgba(30,20,16,.74) 0%,rgba(30,20,16,.42) 42%,rgba(30,20,16,.1) 100%),linear-gradient(180deg,rgba(30,20,16,.45),transparent 22%)}
  .landing[data-v="2"] .l-fondo{background-position:calc(30% + var(--i) * 20%) 45%}
}
/* Pantallas bajas: menos tarjetas para que nada se corte */
@media(max-height:760px) and (max-width:899px){
  .v2{padding-top:calc(max(10px,env(safe-area-inset-top)) + 66px);gap:10px}
  .v2-herr,.v2-como .v2-t:nth-child(n+4){display:none}
  .v2-t{font-size:12.5px;padding:8px 10px}
  .v2-liga svg{width:44px;height:44px}
  .landing .v2-txt>h1,.landing .v2-txt>h2{font-size:clamp(25px,7vw,34px)}
}
@media(max-height:680px) and (max-width:899px) and (orientation:portrait){
  .landing[data-p="b"] .v2-antes,.landing[data-p="b"] .v2-flecha{display:none}
  .landing[data-p="a"] .v2-preg,.landing[data-p="a"] .v2-resp{display:none}
  .v2-nota{display:none}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:560px){
  .v2{grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:end;gap:20px;padding-top:58px;padding-bottom:60px}
  .v2-como{order:2}.v2-txt{order:1}
  /* Teléfono acostado: dos tarjetas por lámina (la pregunta y la respuesta; en B, solo «con Gente México») */
  .v2-como .v2-t:nth-child(n+3){display:none}
  .landing[data-p="b"] .v2-antes,.landing[data-p="b"] .v2-flecha{display:none}
  .landing[data-p="b"] .v2-como .v2-t:nth-child(3){display:grid}
  .landing .v2-txt>h1,.landing .v2-txt>h2{font-size:24px}
  .v2-nota{display:none}
}
/* Teléfono parado con el teclado abierto (queda poco alto): solo el texto y el campo, sin tarjetas ni botones de abajo, para que nada se encime */
@media (max-height:520px) and (max-width:559px){
  .v2{grid-template-rows:minmax(0,1fr) auto;gap:8px;padding-top:calc(max(8px,env(safe-area-inset-top)) + 58px);padding-bottom:12px}
  .v2-como,.v2-nota,.landing .l-pie-a,.landing .l-pie-b,.landing .l-asomo{display:none!important}
  .v2-txt{gap:6px}
  .landing .v2-txt>h1,.landing .v2-txt>h2{font-size:24px}
  .landing .v2-txt>p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.v2-t{opacity:1}.l-lam.activa .v2-t{animation:none}.landing[data-v="2"] .l-fondo{transition:background-image .6s}}

/* ---------- Hoja de entrar (W32): tres formas, confirmar datos y canal de seguimiento ---------- */
.ent-vista{display:inline-block;font:700 9.5px/1 var(--sf);letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;border-radius:999px;background:#FEF0DD;color:#9A5A12;vertical-align:1px;white-space:nowrap}
.ent-aviso{margin:6px 2px 0;font-size:13.5px;color:#B3165C;font-weight:600}
.ent-sub{margin:4px 2px 0;font-size:14px;color:var(--gris)}
.ent-atras,.ent-link{background:none;border:0;padding:6px 2px;min-height:36px;font:600 13.5px var(--sf);color:var(--tinta);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ent-atras{display:block;margin:0 0 4px;text-decoration:none;color:var(--gris)}
.ent-forma{display:grid;gap:12px;margin-top:14px}
.ent-campo{display:grid;gap:5px;font:600 12.5px var(--sf);color:var(--gris)}
.ent-campo input{width:100%;min-height:48px;border:1px solid var(--linea);border-radius:14px;padding:10px 14px;font:500 16px var(--sf);color:var(--tinta);background:#fff}
.ent-campo input:focus-visible{outline:2px solid var(--tinta);outline-offset:1px}
.ent-canal{border:0;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ent-canal legend{font:600 12.5px var(--sf);color:var(--gris);margin-bottom:6px;padding:0}
.ent-canal label{position:relative}
.ent-canal input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ent-canal span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--linea);border-radius:999px;font:600 13.5px var(--sf);background:#fff}
.ent-canal input:checked+span{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.ent-canal input:focus-visible+span{outline:2px solid var(--tinta);outline-offset:2px}
.ent-acepto{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--tinta)}
.ent-acepto input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:#2D6B3E}
.ent-forma .btn{margin-top:4px}
.ent-mas{margin:12px 2px 0;font-size:13px;color:var(--gris)}
.ent-mas button{background:none;border:0;padding:4px 2px;font:600 13px var(--sf);color:var(--tinta);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ent-apple{background:#000;color:#fff}
.ent-abrir{display:grid;place-items:center;text-decoration:none}
.ent-lista .sec-item .ent-vista{justify-self:end}
.landing[data-v="2"] .l-entrar{min-height:44px;display:inline-flex;align-items:center;padding-inline:16px}
.ent-lista a.sec-item{text-decoration:none;color:inherit}
.ent-codigo{margin:14px 0 6px;text-align:center;font:800 34px/1 var(--mt);letter-spacing:.06em;color:var(--tinta);background:#fff;border:1px dashed var(--linea);border-radius:16px;padding:16px 10px;user-select:all}
.ent-espera{margin:10px 2px 0;text-align:center;font-size:13.5px;color:var(--gris)}
/* Giros por familia (W36): en la misma fila deslizable, cada familia con su etiqueta */
.op-fam{flex:none;align-self:center;white-space:nowrap;font:700 10px/1.2 var(--mt);letter-spacing:.12em;text-transform:uppercase;color:var(--gris);padding:0 2px 0 10px}
.op-fam:first-child{padding-left:0}
.op-otro{text-transform:none;letter-spacing:0;font:500 12px var(--sf);padding-right:4px}

/* ---------- Plantilla de tienda (W37, 1A): se arma arriba de la pregunta; la misma en «Ver como cliente» ---------- */
.tienda-zona{position:absolute;inset:0;z-index:1;overflow-y:auto;padding:12px 14px calc(var(--dockh,180px) + 22px);scrollbar-width:none;container:tiendaz/inline-size}
.tienda-zona::-webkit-scrollbar{display:none}
/* Pantalla ancha: la pregunta va a la derecha y la tienda ocupa el resto */
@container zona (min-aspect-ratio:1/1) and (min-width:560px){.tienda-zona{padding-right:calc(min(370px,44%) + 26px);padding-bottom:20px}}
.zona.armando .panel{visibility:hidden}
.zona.en-panel .dock{display:none}
.zona.en-panel .panel{padding-right:14px;padding-bottom:104px}
.zona.en-panel .pestanas{right:14px}
.tienda{display:grid;gap:10px;max-width:560px;margin:0 auto;--tc:#1B1B1B;--tg:#1B1B1B}
.ts-cab{display:flex;justify-content:space-between;align-items:center;margin:2px 2px 0;font:700 11px/1 var(--sf);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.ts-cab em,.ts-tit em{font-style:normal;font:700 10px/1 var(--sf);letter-spacing:.06em;text-transform:uppercase;background:#FEF0DD;color:#9A5A12;border-radius:999px;padding:5px 8px}
.ts{position:relative;border-radius:22px}
.ts-vacio{min-height:68px;border:1.5px dashed rgba(27,27,27,.2);display:grid;place-items:center;padding:12px;text-align:center;color:var(--gris);font:600 13px/1.3 var(--sf);background:rgba(255,255,255,.4)}
.ts-banner{height:200px;overflow:hidden;color:#fff;background:#222;box-shadow:0 16px 34px -22px rgba(0,0,0,.6)}
@container tiendaz (min-width:520px){.ts-banner{height:250px}}
.ts-banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ts-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.74))}
.ts-ban-in{position:absolute;left:14px;right:14px;bottom:46px;display:flex;gap:12px;align-items:center;min-width:0}
.ts-ban-in>div{min-width:0}
.ts-logo{width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--tg);background-size:cover;background-position:center;color:#fff;font:800 18px var(--mt);border:2px solid rgba(255,255,255,.92)}
.ts-logo.con-img{background-color:#fff}
.ts-ban-in>div>b{display:block;font:800 23px/1.05 var(--mt);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-ban-in>div>span{display:block;margin-top:3px;font-size:13px;opacity:.92;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-ban-in>div>small{display:block;margin-top:2px;font-size:12px;opacity:.82}
.ts-liga{position:absolute;left:14px;bottom:12px;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 11.5px/1 var(--sf);background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:7px 11px}
.ts-cat,.ts-ven{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid rgba(255,255,255,.7);padding:12px;display:grid;gap:10px}
.ts-tit{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ts-tit b{font:800 16px var(--mt)}
.ts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@container tiendaz (min-width:520px){.ts-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ts-grid figure{margin:0;position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:#fff}
.ts-grid img{width:100%;height:100%;object-fit:cover;display:block}
.ts-grid figcaption{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.95);border-radius:999px;padding:5px 8px;font:800 12px/1 var(--mt)}
.ts-btns{display:flex;flex-wrap:wrap;gap:8px}
.ts-btns span{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--linea);font:700 13.5px/1 var(--sf);white-space:nowrap}
.ts-btns .ts-prin{background:var(--tg);color:#fff;border-color:transparent}
.ts-btns svg.marca{width:16px;height:16px}
.ts-info{margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:#4b4740}
.ts-info span{display:inline-flex;align-items:center}
.ts-abierto{width:8px;height:8px;border-radius:50%;background:#2D6B3E;margin-right:6px}
.ts-redes{margin:0;font-size:12.5px;color:var(--gris)}
.ts-fin{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;background:#fff;padding:12px 14px;box-shadow:0 12px 28px -22px rgba(0,0,0,.5)}
.ts-ind{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font:800 17px var(--mt);background:radial-gradient(circle,#fff 57%,transparent 58%),conic-gradient(var(--tc) calc(var(--v) * 1%),#ECE8DE 0)}
.ts-fin b{display:block;font:800 16px/1.2 var(--mt)}
.ts-fin small{display:block;margin-top:2px;font-size:12.5px;color:var(--gris)}
.ts.nueva{animation:ts-arma .9s var(--muelle) both}
.ts.nueva::after{content:"";position:absolute;inset:-3px;border-radius:25px;padding:2.5px;background:linear-gradient(90deg,#ED217C,#FBAF61);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ts-brilla 1.9s ease-out both;pointer-events:none}
@keyframes ts-arma{from{opacity:0;transform:translateY(14px) scale(.97);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes ts-brilla{0%,55%{opacity:1}100%{opacity:0}}
.tienda.tinta-nueva .ts-logo,.tienda.tinta-nueva .ts-prin,.tienda.tinta-nueva .ts-ind{animation:ts-tinta 1s var(--muelle)}
@keyframes ts-tinta{0%{transform:scale(.85);filter:saturate(0)}60%{transform:scale(1.06)}100%{transform:none;filter:none}}
.cliente .tienda{margin-bottom:4px}
@media(prefers-reduced-motion:reduce){.ts.nueva,.ts.nueva::after,.tienda.tinta-nueva .ts-logo,.tienda.tinta-nueva .ts-prin,.tienda.tinta-nueva .ts-ind{animation:none}}

/* Volver a la portada a la vista: el logo lleva debajo «‹ Portada» (pedido del dueño, 2026-10-23) */
.a-portada{display:inline-grid;justify-items:start;gap:3px}
.a-portada .a-portada-t{font:700 10px/1 var(--sf);letter-spacing:.12em;text-transform:uppercase;opacity:.8;transition:opacity .2s}
.a-portada:hover .a-portada-t,.a-portada:focus-visible .a-portada-t{opacity:1}

/* ---------- Barra de pestañas de las apps (W38, propuesta B): ícono con nombre; el punto rojo guía ---------- */
.zona.con-pestanas .pestanas{z-index:5}
.pestanas button{position:relative;cursor:pointer}
.pestanas button.centro svg.i{width:24px;height:24px;color:#ED217C}
.pestanas .pt{position:absolute;top:4px;left:calc(50% + 6px);width:10px;height:10px;border-radius:50%;background:#FF3B30;border:2px solid #fff;box-shadow:0 0 0 0 rgba(255,59,48,.5);animation:pt-late 2s ease-out infinite}
@keyframes pt-late{0%{box-shadow:0 0 0 0 rgba(255,59,48,.45)}70%{box-shadow:0 0 0 8px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
.bur-tab{position:absolute;bottom:calc(100% + 10px);left:calc(6px + (100% - 12px) / 5 * (var(--x) + .5));transform:translateX(-50%);white-space:nowrap;background:#1B1B1B;color:#fff;font:700 12.5px/1 var(--sf);padding:9px 12px;border-radius:12px;box-shadow:0 10px 22px -10px rgba(0,0,0,.6);pointer-events:none;animation:bur-entra .5s var(--muelle) both}
.bur-tab::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg)}
.bur-tab[style*="--x:4"]{transform:translateX(-84%)}.bur-tab[style*="--x:4"]::after{left:84%}
.bur-tab[style*="--x:0"]{transform:translateX(-16%)}.bur-tab[style*="--x:0"]::after{left:16%}
@keyframes bur-entra{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
.zona.con-pestanas .tienda-zona{padding-bottom:calc(var(--dockh,180px) + 92px)}
.zona.con-pestanas .cliente{padding-bottom:96px}
.zona.escribe .pestanas{display:none}
.zona.escribe.con-pestanas .dock{bottom:10px}
.zona.escribe.con-pestanas .tienda-zona{padding-bottom:calc(var(--dockh,180px) + 22px)}
@container zona (min-aspect-ratio:1/1) and (min-width:560px){.zona.con-pestanas .tienda-zona{padding-bottom:84px}}
/* En la portada: la misma barra, de cristal oscuro sobre la foto */
.barra-l{position:absolute;z-index:7;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));max-width:560px;margin:0 auto;height:60px;display:flex;background:rgba(25,22,20,.5);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
.barra-l button{color:rgba(255,255,255,.78)}
.barra-l button.on{color:#fff;background:rgba(255,255,255,.14)}
.barra-l button.centro svg.i{color:#FBAF61}
.barra-l .bur-tab{background:#fff;color:#1B1B1B}
.landing[data-p="a"] .l-pie-a{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 70px)}
.landing[data-v="2"] .v2{padding-bottom:calc(max(18px,env(safe-area-inset-bottom)) + 140px)}
.l-cab [data-l-entrar]{display:none!important}
@media (orientation:landscape) and (max-height:520px) and (min-width:560px){
  .barra-l{height:52px;bottom:6px}
  .landing[data-p="a"] .l-pie-a{bottom:64px}
  .landing[data-v="2"] .v2{padding-bottom:112px}
}
@media (max-height:520px) and (max-width:559px){.barra-l{display:none}}
/* La hoja de entrar, encima de la portada */
.sobre-portada{position:fixed;inset:0;z-index:40;container:tel/size}
.sobre-portada[hidden]{display:none}
@media (max-height:520px) and (max-width:559px){.landing[data-v="2"] .v2{padding-bottom:12px}}

/* Bloque 1 (W39): «Entrar con» del encabezado se quita, ahora vive en Perfil; la tienda trae su administración */
.cab .acceso{display:none!important}
.cl-admin{display:grid;gap:8px;margin:0 0 10px;padding:10px 12px;border-radius:16px;background:var(--tinta);color:#fff}
.cl-admin>span{font:700 11px/1 var(--sf);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.cl-admin>div{display:flex;gap:6px;flex-wrap:wrap}
.cl-admin button{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:8px 12px;font:600 13px var(--sf);cursor:pointer;min-height:36px}

/* Publicar su tienda (W39, bloque 2) */
.pub-t{font:700 11px/1 var(--sf);letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin:12px 2px 0;display:block}
.pub-lista{display:grid;gap:8px;margin-top:8px}
.pub-it{display:grid;grid-template-columns:44px minmax(0,1fr) 84px 32px;gap:8px;align-items:center}
.pub-f{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#F1EEE6,#E6E1D6) center/cover}
.pub-it .campo{min-height:42px}
.pub-x{width:32px;height:32px;border-radius:50%;border:1px solid var(--linea);background:#fff;font:600 16px/1 var(--sf);cursor:pointer;color:var(--gris)}
.pub-qr{width:180px;height:180px;margin:12px auto 4px;background:#fff;border-radius:16px;padding:10px}
.pub-qr svg{width:100%;height:100%;display:block}
.pub-dos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pub-dos .btn{margin:0}
.pub-dos a.btn{text-transform:none;letter-spacing:0;font:700 15px var(--sf)}

/* Pedidos y citas (bloque 3) */
.ped-lista{display:grid;gap:10px;margin-top:10px}
.ped{background:#fff;border-radius:18px;padding:12px 14px;display:grid;gap:4px;border:1px solid var(--linea)}
.ped-c{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ped b{font:700 15px var(--sf)}.ped span{font-size:14px}.ped small{font-size:12.5px;color:var(--gris)}
.ped-a{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.ped-a .btn{margin:0;min-height:38px;padding:0 14px;font-size:13px}
.ped-a .btn{text-transform:none;letter-spacing:0}

/* Auditoría 23 oct: ligas del pie con área de toque suficiente */
.pie-sitio a{display:inline-block;padding:10px 4px}