/* Umami Labs · piezas visuales de las páginas de servicio (maquetas, test, móvil con puntos, iconos a mano) */

/* ---------- papel de fondo y aparición suave ---------- */
body.vis{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:no-preference){
  .vis-js .vis-rev{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .vis-js .vis-rev.vis-in{opacity:1;transform:none}
}

/* ---------- iconos dibujados ---------- */
.ic-mano{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.h-ic{display:flex;align-items:center;gap:14px}
.ps-ic{flex:none;width:48px;height:48px;border-radius:15px;background:#fff;color:var(--red2);display:grid;place-items:center;padding:11px;box-shadow:0 10px 24px -16px rgba(22,21,27,.5);transform:rotate(-3deg)}
.ps:nth-of-type(even) .ps-ic{transform:rotate(3deg)}

/* ---------- cabecera con maqueta ---------- */
.phero-vis{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:44px;align-items:center}
.phero-txt{display:flex;flex-direction:column;gap:18px}
.vis-hero-mock{position:relative;display:flex;flex-direction:column;gap:16px}
.vis-hero-mock::before{content:'';position:absolute;inset:-8% -6% 18% -4%;z-index:-1;border-radius:40px;opacity:.55;
  background:repeating-linear-gradient(0deg,rgba(229,72,42,.10) 0 14px,transparent 14px 28px),repeating-linear-gradient(90deg,rgba(229,72,42,.10) 0 14px,transparent 14px 28px);
  -webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent)}
.vis-escena{position:relative;padding:0 46px 28px 0}
.vis-mando{background:#fff;border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 40px -28px rgba(22,21,27,.55)}
.vis-mando label{font-weight:700;font-size:15px}
.vis-mando input{font:inherit;font-size:17px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#FCFBF9;width:100%}
.vis-mando input:focus{outline:2px solid var(--red);outline-offset:1px;border-color:transparent}
.vis-mando small{color:var(--mute);font-size:12.5px}
.vis-temas{display:flex;gap:8px;flex-wrap:wrap}
.vis-tema{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--f-body);padding:8px 13px;border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;color:var(--ink)}
.vis-tema i{width:16px;height:16px;border-radius:50%}
.vis-tema .t-marinero{background:linear-gradient(135deg,#1F3A5F 50%,#F3EDE2 50%)}
.vis-tema .t-brasa{background:linear-gradient(135deg,#1E1B19 50%,#F2A33A 50%)}
.vis-tema .t-huerta{background:linear-gradient(135deg,#3E6B35 50%,#E3A72F 50%)}
.vis-tema.on{border-color:var(--ink);background:var(--ink);color:#fff}

/* ---------- aparatos ---------- */
.dev-portatil{width:100%}
.dev-tapa{background:#1B1A20;border-radius:16px 16px 6px 6px;padding:10px 10px 14px;box-shadow:0 30px 60px -30px rgba(22,21,27,.6)}
.dev-tapa .dev-pantalla{aspect-ratio:16/10;border-radius:6px}
.dev-base{height:12px;margin:0 -5%;border-radius:0 0 14px 14px;background:linear-gradient(#D7D3CC,#B9B4AC);position:relative}
.dev-base::after{content:'';position:absolute;left:42%;right:42%;top:0;height:5px;border-radius:0 0 6px 6px;background:#A29D95}
.dev-pantalla{overflow:hidden;background:#fff;container-type:inline-size;position:relative}
.dev-movil{position:relative;width:170px;border-radius:30px;background:#16151B;padding:8px;box-shadow:0 30px 50px -24px rgba(22,21,27,.7)}
.dev-movil .dev-pantalla{aspect-ratio:9/19;border-radius:23px}
.dev-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:44px;height:11px;border-radius:8px;background:#16151B;z-index:3}
.dev-delante{position:absolute;right:0;bottom:0;transform:rotate(3deg)}
@media (prefers-reduced-motion:no-preference){.dev-delante{animation:flota 6s ease-in-out infinite}@keyframes flota{50%{transform:rotate(3deg) translateY(-8px)}}}
.dev-solo{width:min(290px,100%);margin:0 auto}

/* ---------- la web de ejemplo ---------- */
.ms{--ms-bg:#F3EDE2;--ms-c1:#1F3A5F;--ms-c2:#E5482A;--ms-c3:#DCE6EE;--ms-c4:#FFFFFF;--ms-ink:#1F2A37;
  height:100%;background:var(--ms-bg);color:var(--ms-ink);font-family:var(--f-body);font-size:5.6cqw;line-height:1.3;display:flex;flex-direction:column;position:relative;transition:background .4s,color .4s}
[data-vis-tema="brasa"] .ms{--ms-bg:#1E1B19;--ms-c1:#F2A33A;--ms-c2:#C4472B;--ms-c3:#2E2926;--ms-c4:#3A3330;--ms-ink:#F4EDE4}
[data-vis-tema="huerta"] .ms{--ms-bg:#F1F3E6;--ms-c1:#3E6B35;--ms-c2:#E3A72F;--ms-c3:#DDE6C9;--ms-c4:#FFFFFF;--ms-ink:#23301F}
.ms-nav{display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:2.6em .9em .6em;font-size:.95em}
.ms-n{font-family:var(--f-head);font-weight:700;font-size:1.05em;color:var(--ms-c1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ms-lang{font-size:.75em;font-weight:700;opacity:.75;white-space:nowrap;position:relative}
.ms-hero{background:var(--ms-c1);color:#fff;padding:1em .9em 1.2em;position:relative;display:flex;flex-direction:column;gap:.45em}
[data-vis-tema="brasa"] .ms-hero{color:#1E1B19}
.ms-k{font-family:var(--f-mono);font-size:.62em;letter-spacing:.12em;opacity:.85}
.ms-hero h4{margin:0;font-family:var(--f-head);font-weight:700;font-size:1.25em;line-height:1.12;max-width:11em}
.ms-plato{width:45%;align-self:flex-end;margin:-.2em -.2em -.4em 0}
.ms-btn{align-self:flex-start;background:var(--ms-c2);color:#fff;font-weight:700;font-size:.82em;padding:.55em 1em;border-radius:99px;position:relative}
.ms-olas{display:block;width:100%;height:1.2em;margin-top:-1.15em;position:relative;z-index:1}
.ms-card{background:var(--ms-c4);margin:.55em .8em 0;border-radius:.8em;padding:.6em .75em;position:relative;box-shadow:0 .3em .8em -.5em rgba(0,0,0,.35)}
.ms-card p{margin:.15em 0 0;font-size:.85em;font-weight:600}
.ms-card p::before{content:'· ';color:var(--ms-c2)}
.ms-rev{display:flex;align-items:center;gap:.5em}.ms-rev small{font-size:.75em;opacity:.8}
.ms-est{color:#F2B33D;letter-spacing:.05em;font-size:.9em}
.ms-mapa{display:flex;align-items:center;gap:.6em;min-height:3em;background:linear-gradient(135deg,var(--ms-c3) 25%,transparent 25%) 0 0/1.4em 1.4em,var(--ms-c4)}
.ms-mapa small{font-size:.75em;font-weight:700}
.ms-pin{width:1.1em;height:1.1em;border-radius:50% 50% 50% 0;background:var(--ms-c2);transform:rotate(-45deg);flex:none;box-shadow:0 0 0 .3em rgba(229,72,42,.2)}
.ms-chat{position:absolute;right:.7em;bottom:.8em;background:var(--ms-c2);color:#fff;font-size:.7em;font-weight:700;padding:.5em .8em;border-radius:1em 1em .2em 1em;box-shadow:0 .4em 1em -.4em rgba(0,0,0,.5)}
/* versión portátil */
.ms-ancho{font-size:2.3cqw}
.ms-ancho .ms-nav{padding:.9em 1.4em}
.ms-links{font-size:.75em;opacity:.7;margin-left:auto}
.ms-ancho .ms-hero{flex-direction:row;align-items:center;justify-content:space-between;padding:1.4em 1.6em}
.ms-ancho .ms-hero>div{display:flex;flex-direction:column;gap:.6em}
.ms-ancho .ms-hero h4{font-size:1.9em}
.ms-ancho .ms-plato{width:24%;margin:0}
.ms-fila{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:.8em;padding:1em 1.4em}
.ms-fila .ms-card{margin:0}
.ms-ancho .ms-mapa{flex-direction:column;align-items:flex-start}

/* ---------- puntos que se tocan ---------- */
.pt-dot{position:absolute;z-index:4;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:var(--red);color:#fff;font:700 12px/1 var(--f-body);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 4px 10px -2px rgba(0,0,0,.4)}
.pt-dot.on{background:var(--ink);transform:scale(1.18)}
@media (prefers-reduced-motion:no-preference){.pt-dot::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--red);opacity:0;animation:pulso 2.4s infinite}@keyframes pulso{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.4)}}}
.ms-hero>.pt-dot[data-p="1"]{top:-.6em;left:.6em}
.ms-btn .pt-dot{top:-12px;right:-14px}
.ms-lang .pt-dot{top:-16px;right:-10px}
.ms-card .pt-dot,.ms-k .pt-dot{top:-10px;right:-8px}
.ms>.pt-dot[data-p="7"]{right:.4em;bottom:2.6em}
.vis-puntos{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:center;margin-top:6px}
.vp-movil{display:flex;flex-direction:column;align-items:center;gap:10px}
.vp-movil>small{font-family:var(--f-mono);font-size:11.5px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.vp-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vp-lista li{display:grid;grid-template-columns:26px 34px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:14px;cursor:pointer;transition:background .25s,box-shadow .25s;font-size:16px;line-height:1.5;color:var(--ink2)}
.vp-lista li:hover{background:#fff}
.vp-lista li.on{background:#fff;box-shadow:0 14px 30px -22px rgba(22,21,27,.55)}
.vp-lista b{color:var(--ink)}
.pt-n{width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;margin-top:1px}
.vp-lista li.on .pt-n{background:var(--ink)}
.pt-ic{width:34px;height:34px;color:var(--red2);padding:3px}

/* ---------- test de 30 segundos ---------- */
.vis-test{background:#fff;border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:6px;box-shadow:0 24px 50px -34px rgba(22,21,27,.6);margin-top:6px}
.vt-cab{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.vt-cab .ic-mano{width:44px;height:44px;flex:none;color:#fff;background:var(--red);border-radius:14px;padding:9px;transform:rotate(-4deg)}
.vt-cab b{font-family:var(--f-head);font-weight:600;font-size:19px;display:block;line-height:1.2}
.vt-cab span{color:var(--mute);font-size:14px}
.vt-barra{height:6px;border-radius:9px;background:var(--paper);overflow:hidden;margin:4px 0 6px}
.vt-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),#F2C14E);transition:width .4s}
.vt-q{border:0;border-top:1px solid var(--line);margin:0;padding:14px 0;display:flex;flex-direction:column;gap:10px}
.vt-q legend{float:left;width:100%;display:flex;gap:10px;font-weight:600;font-size:16px;line-height:1.45;color:var(--ink);padding:0}
.vt-q legend+*{clear:both}
.vt-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:12.5px;font-weight:700;margin-top:1px}
.vt-r{display:flex;gap:8px;flex-wrap:wrap;padding-left:34px}
.vt-r button{font:600 14.5px var(--f-body);padding:8px 16px;border-radius:99px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s}
.vt-r button:hover{border-color:var(--ink)}
.vt-r button.on[data-r="si"]{background:#1F7A4F;border-color:#1F7A4F;color:#fff}
.vt-r button.on[data-r="no"]{background:var(--red);border-color:var(--red);color:#fff}
.vt-r button.on[data-r="ns"]{background:var(--ink);border-color:var(--ink);color:#fff}
.vt-fix{margin:0 0 0 34px!important;font-size:14.5px!important;background:#FFF4EF;border-radius:10px;padding:8px 12px;color:var(--ink2)!important}
.vt-fix::before{content:'Lo arreglamos así: ';font-weight:700;color:var(--red2)}
.vt-res{border-radius:18px;padding:18px;margin-top:8px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.vt-sem{display:flex;gap:6px}.vt-sem i{width:16px;height:16px;border-radius:50%;background:#D9D5CD}
.vt-res.r-rojo .vt-sem i:nth-child(1){background:var(--red)}
.vt-res.r-ambar .vt-sem i:nth-child(2){background:#F2B33D}
.vt-res.r-verde .vt-sem i:nth-child(3){background:#1F7A4F}
.vt-res b{font-family:var(--f-head);font-weight:600;font-size:21px;line-height:1.2}
.vt-res p{margin:0;font-size:16px!important}
.vt-res .acts{display:flex;gap:10px;flex-wrap:wrap}
.vt-res .acts button{font:600 15px var(--f-body);background:none;border:0;color:var(--red2);cursor:pointer;text-decoration:underline;padding:10px 4px}

/* ---------- móvil ---------- */
@media (max-width:900px){
  .phero-vis{grid-template-columns:minmax(0,1fr);gap:26px}
  .vis-escena{padding:0 34px 24px 0;max-width:560px}
  .vis-hero-mock::before{inset:-6% 0 18% 0}
}
@media (max-width:640px){
  .dev-movil.dev-delante{width:118px;border-radius:22px;padding:6px}
  .dev-delante .dev-pantalla{border-radius:17px}
  .dev-delante .dev-notch{width:32px;height:8px;top:10px}
  .vis-puntos{grid-template-columns:minmax(0,1fr)}
  .vis-test{padding:18px 16px}
  .vt-r{padding-left:0}
  .vt-fix{margin-left:0!important}
  .ps-ic{width:42px;height:42px;padding:9px}
}

/* que los estilos de texto de la página no se cuelen en la web de ejemplo */
.ps .ms p{color:inherit;font-size:.85em;line-height:1.3}
.ps .ms small{font-family:inherit;letter-spacing:0;text-transform:none}
.ps .ms .ms-k{font-family:var(--f-mono);letter-spacing:.12em}
.vt-res .btn-red{color:#fff}
.ms-reserva{display:flex;align-items:center;gap:.6em;margin:0 1.4em 1em;background:var(--ms-c4);border-radius:.8em;padding:.7em .9em;box-shadow:0 .3em .8em -.5em rgba(0,0,0,.35)}
.ms-reserva b{font-size:.85em;margin-right:auto}
.ms-reserva span{font-size:.75em;font-weight:700;border:1px solid rgba(127,127,127,.35);border-radius:.5em;padding:.35em .6em}
.ms-reserva .ms-btn{align-self:center}

/* ---------- SEO local: búsqueda dibujada ---------- */
.vis-busca{background:#fff;border-radius:22px;padding:16px;box-shadow:0 24px 50px -34px rgba(22,21,27,.6);display:flex;flex-direction:column;gap:12px;margin-top:6px}
.vb-barra{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:99px;padding:10px 16px;font-size:16px;color:var(--ink)}
.vb-lupa{width:15px;height:15px;border:2.2px solid var(--mute);border-radius:50%;position:relative;flex:none}
.vb-lupa::after{content:'';position:absolute;width:7px;height:2.2px;background:var(--mute);right:-6px;bottom:-3px;transform:rotate(45deg);border-radius:2px}
.vb-cursor{width:2px;height:18px;background:var(--red);margin-left:-8px}
@media (prefers-reduced-motion:no-preference){.vb-cursor{animation:parpadeo 1s steps(2) infinite}@keyframes parpadeo{50%{opacity:0}}}
.vb-cuerpo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px}
.vb-mapa{position:relative;border-radius:16px;overflow:hidden;min-height:230px;background:#EDE9DF}
.vb-calle{position:absolute;background:#fff;border-radius:4px}
.vb-calle.c1{left:-10%;right:-10%;top:42%;height:10px;transform:rotate(-8deg)}
.vb-calle.c2{top:-10%;bottom:-10%;left:38%;width:9px;transform:rotate(12deg)}
.vb-calle.c3{left:10%;right:-10%;top:72%;height:7px;transform:rotate(4deg)}
.vb-mar{position:absolute;right:-20%;top:-20%;width:60%;height:70%;border-radius:50%;background:#CFE0EA}
.vb-pin{position:absolute;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#9C98A3;box-shadow:0 3px 6px rgba(0,0,0,.25)}
.vb-pin.p2{left:20%;top:28%}.vb-pin.p3{left:62%;top:62%}.vb-pin.p4{left:28%;top:80%}
.vb-yo{left:46%;top:36%;width:24px;height:24px;background:var(--red);z-index:2}
.vb-yo b{position:absolute;left:30px;top:-6px;transform:rotate(45deg);transform-origin:left top;background:#fff;color:var(--ink);font-size:12px;white-space:nowrap;padding:4px 8px;border-radius:8px;box-shadow:0 6px 14px -6px rgba(0,0,0,.35);max-width:130px;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:no-preference){.vb-yo{animation:salta 2.4s ease-in-out infinite}@keyframes salta{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(3px,-3px)}}}
.vb-res{display:flex;flex-direction:column;gap:10px}
.vb-ficha{border:1.5px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.vb-buena{border-color:var(--red);box-shadow:0 0 0 4px rgba(229,72,42,.10)}
.vb-mala{opacity:.75}
.vb-fh{display:flex;flex-direction:column;gap:2px}
.vb-fh b{font-family:var(--f-head);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-est{color:#E2A21B;font-size:13px}.vb-est em{font-style:normal;color:var(--mute)}
.vb-ok{color:#1F7A4F;font-size:12.5px;font-weight:600}.vb-no{color:var(--mute);font-size:12.5px}
.vb-fotos{display:flex;gap:6px}
.vb-f{flex:1;height:42px;border-radius:8px}
.vb-f0{background:linear-gradient(135deg,#E8B07A,#C4472B)}.vb-f1{background:linear-gradient(135deg,#9CC5D9,#1F3A5F)}.vb-f2{background:linear-gradient(135deg,#C8D89A,#3E6B35)}
.vb-sin{flex:1;height:42px;border-radius:8px;background:repeating-linear-gradient(45deg,#F1EFEA 0 6px,#E6E2DA 6px 12px);font-style:normal;font-size:11.5px;color:var(--mute);display:grid;place-items:center}
.vb-bot{display:flex;gap:6px;flex-wrap:wrap}
.vb-bot span{font-size:12px;font-weight:600;border:1px solid var(--line);border-radius:99px;padding:4px 10px;color:var(--ink2)}
.vb-bot span.on{background:var(--red);border-color:var(--red);color:#fff}
.vb-pie{margin:0!important;font-size:13px!important;color:var(--mute)!important}

/* ---------- ejemplos en aparatos ---------- */
.vis-ejemplos{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.ve-tabs{display:flex;gap:8px}
.ve-tab{font:600 15px var(--f-body);padding:9px 16px;border-radius:99px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.ve-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ve-panel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:center}
.ve-panel[hidden]{display:none}
.ve-escena{position:relative;padding:0 40px 20px 0}
.ve-lap .ve-scr{background:#1B1A20;border-radius:14px 14px 6px 6px;padding:8px}
.ve-bar{display:flex;gap:5px;padding:2px 4px 7px}.ve-bar i{width:7px;height:7px;border-radius:50%;background:#4A4852}
.ve-vp{--alto:250px;height:var(--alto);overflow:hidden;border-radius:4px;background:#fff;position:relative}
.ve-vp img{width:100%;height:auto;display:block}
.ve-vp img{will-change:transform;transition:opacity .55s ease}
.ve-base{height:10px;margin:0 -5%;border-radius:0 0 12px 12px;background:linear-gradient(#D7D3CC,#B9B4AC)}
.ve-mov{position:absolute;right:0;bottom:0;width:112px;border-radius:20px;background:#16151B;padding:6px;transform:rotate(3deg);box-shadow:0 24px 40px -20px rgba(22,21,27,.7)}
.ve-mov .ve-vp{--alto:220px;border-radius:15px}
.ve-info{display:flex;flex-direction:column;gap:6px}
.ve-info b{font-family:var(--f-head);font-weight:600;font-size:22px}
.ve-info small{color:var(--mute);font-size:14px}
.ve-info p{margin:0;font-size:16px!important}
.ve-pill{align-self:flex-start;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--violet2);color:var(--violet);padding:4px 10px;border-radius:99px}
.ve-mas{align-self:flex-start;font-weight:700}

/* ---------- cómo trabajamos ---------- */
.vis-pasos{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative}
.vis-pasos::before{content:'';position:absolute;top:26px;left:26px;right:26px;height:2px;background:repeating-linear-gradient(90deg,var(--red) 0 8px,transparent 8px 14px);opacity:.5}
.vis-pasos li{position:relative;display:flex;flex-direction:column;gap:6px}
.vpa-ic{width:52px;height:52px;border-radius:16px;background:#fff;color:var(--red2);padding:12px;box-shadow:0 10px 24px -16px rgba(22,21,27,.5);position:relative;z-index:1}
.vis-pasos li:nth-child(odd) .vpa-ic{transform:rotate(-3deg)}.vis-pasos li:nth-child(even) .vpa-ic{transform:rotate(3deg)}
.vpa-n{font-family:var(--f-mono);font-size:12px;color:var(--red2);font-weight:600;margin-top:6px}
.vis-pasos b{font-family:var(--f-head);font-weight:600;font-size:15.5px;line-height:1.25}
.vis-pasos p{margin:0;font-size:14.5px!important;line-height:1.5!important}
@media (prefers-reduced-motion:no-preference){.vis-js .vis-pasos li{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}.vis-js .vis-pasos.vis-in li{opacity:1;transform:none}
  .vis-pasos li:nth-child(2){transition-delay:.12s}.vis-pasos li:nth-child(3){transition-delay:.24s}.vis-pasos li:nth-child(4){transition-delay:.36s}.vis-pasos li:nth-child(5){transition-delay:.48s}}
.vpa-nota{display:flex;gap:10px;align-items:center;font-size:15px!important;background:#fff;border-radius:14px;padding:10px 14px;margin-top:4px}
.vpa-nota .ic-mano{width:22px;height:22px;color:var(--red2);flex:none}

/* ---------- la cuenta ---------- */
.vis-cuenta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:8px 0 4px}
.vt-ticket{--giro:0deg;background:#FFFEFB;padding:20px 20px 18px;transform:rotate(var(--giro));display:flex;flex-direction:column;gap:10px;position:relative;box-shadow:0 22px 40px -26px rgba(22,21,27,.55);font-family:var(--f-mono);font-size:13px;color:var(--ink2);
  -webkit-mask:radial-gradient(circle 7px at 50% 0,transparent 98%,#000) 0 0/18px 51% repeat-x,radial-gradient(circle 7px at 50% 100%,transparent 98%,#000) 0 100%/18px 51% repeat-x;
  mask:radial-gradient(circle 7px at 50% 0,transparent 98%,#000) 0 0/18px 51% repeat-x,radial-gradient(circle 7px at 50% 100%,transparent 98%,#000) 0 100%/18px 51% repeat-x}
.vt-top{text-align:center;display:flex;flex-direction:column;gap:2px;border-bottom:1.5px dashed var(--line);padding:8px 0 12px}
.vt-top small{font-size:10.5px;letter-spacing:.14em;color:var(--mute)}
.vt-top b{font-family:var(--f-head);font-size:22px;color:var(--ink)}
.vt-top span{color:var(--red2);font-weight:600}
.vt-ticket ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.vt-ticket li{display:flex;align-items:baseline;gap:6px}
.vt-ticket li i{flex:1;border-bottom:1.5px dotted #C9C4BB;transform:translateY(-3px)}
.vt-ticket li em{font-style:normal;color:#1F7A4F;font-weight:600}
.vt-tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1.5px dashed var(--line);padding-top:8px}
.vt-tot+.vt-tot{border-top:0;padding-top:0}
.vt-tot b{font-family:var(--f-head);font-size:24px;color:var(--ink)}.vt-tot b small{font-size:13px;color:var(--mute)}
.vt-iva{margin:0!important;font-size:11.5px!important;color:var(--mute)!important;text-align:center;font-family:var(--f-mono)}
.vt-ticket .btn{align-self:center;font-family:var(--f-body);color:#fff}
.ps .vt-ticket a.btn-red{color:#fff}

@media (max-width:900px){
  .vis-pasos{grid-template-columns:minmax(0,1fr);gap:16px}
  .vis-pasos::before{top:26px;bottom:26px;left:25px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--red) 0 8px,transparent 8px 14px)}
  .vis-pasos li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;row-gap:2px}
  .vpa-ic{grid-row:1/4}.vpa-n{margin-top:0}
  .ve-panel{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .vb-cuerpo{grid-template-columns:minmax(0,1fr)}
  .vb-mapa{min-height:170px}
  .vis-cuenta{grid-template-columns:minmax(0,1fr)}
  .ve-escena{padding-right:30px}
  .ve-vp{--alto:190px}.ve-mov{width:92px}.ve-mov .ve-vp{--alto:170px}
}