/* Piezas comunes de las tres páginas: pie, galería de vistas reales y enlaces a la ayuda.
   Cada página define su acento con --acc (texto) y --acc-soft (fondo suave); el pie toma --foot-bg. */

/* pie */
.sfoot{background:var(--foot-bg,#121410);color:var(--foot-fg,#A3A89D);padding:clamp(48px,6vw,72px) 0 28px;font-size:14px}
.sfoot .cols{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:860px){.sfoot .cols{grid-template-columns:1fr 1fr}.sfoot .fbrand{grid-column:1/-1}}
.sfoot .fbrand img{height:22px}
.sfoot .fbrand p{margin-top:14px;max-width:22em;line-height:1.6}
.sfoot b{display:block;color:#fff;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.sfoot .col a{display:block;padding:5px 0;text-decoration:none;color:inherit;transition:color .2s}
.sfoot .col a:hover{color:#fff}
.sfoot .col a .ext{font-size:11px;opacity:.7}
.sfoot .base{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px}

/* enlace a la guía de una sección */
.guia{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:500;color:var(--acc);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.guia:hover{border-color:currentColor}
.guia::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--libro) center/contain no-repeat;mask:var(--libro) center/contain no-repeat}
:root{--libro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5V5a2 2 0 0 1 2-2h13v15H6a2 2 0 0 0-2 2Zm0 0A2 2 0 0 0 6 22h13'/%3E%3C/svg%3E")}

/* galería de vistas reales: pestañas + marco de app con captura clara u oscura según el sistema */
.vtabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -2px 16px;padding:2px}
.vtabs::-webkit-scrollbar{display:none}
.vtabs button{flex:0 0 auto;font:inherit;font-size:14px;padding:9px 16px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:inherit;cursor:pointer;transition:background .2s,color .2s}
.vtabs button:hover{border-color:var(--muted)}
.vtabs button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.vtabs button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.vview .app{display:none}
.vview .app.on{display:block;animation:vfade .5s cubic-bezier(.2,.7,.2,1)}
@keyframes vfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vview .app img{width:100%;height:auto;background:var(--surface)}
.vview .app.fit{background:var(--shot-bg)}
.vview .app.fit picture{display:flex;justify-content:center;padding:clamp(16px,3vw,36px)}
.vview .app.fit img{width:auto;max-width:100%;max-height:640px;border-radius:12px;box-shadow:0 24px 48px -28px rgba(0,0,0,.45)}
.vnote{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;align-items:baseline;margin-top:12px}
.vnote p{font-size:13.5px;color:var(--muted);max-width:52em}
.vnote small{font-size:12.5px;color:var(--muted)}
@media (max-width:640px){
  .vview .app:not(.fit) .vscroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
  .vview .app:not(.fit) .vscroll img{width:820px;max-width:none}
  .vview .app:not(.fit)::after{content:"Desliza para ver la pantalla completa →";display:block;padding:8px 14px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
}