/* Vitrina · negro lujo. Concepto: una vitrina iluminada de noche; la portada es el escaparate y todo lo demás queda sobrio.
   tinta #09070F · panel #110D1C · crema #F3EEE4 · gris #ABA4BA · violeta #7B5CFF · violeta texto #A390FF · violeta hondo #4326B8 · WhatsApp #25D366 (solo WhatsApp)
   Display: Bodoni Moda · Texto: Hanken Grotesk */
html,body{margin:0;background:#09070F}
body{color:#F3EEE4;font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
[style*="Bodoni"]{font-optical-sizing:none;font-variation-settings:"opsz" 28;text-rendering:geometricPrecision}
a{color:#A390FF;text-decoration:none}
a:hover{color:#F3EEE4}
a:focus-visible,button:focus-visible{outline:2px solid #A390FF;outline-offset:3px}
.vt-btn{transition:transform .2s ease,background-color .2s ease,border-color .2s ease}
.vt-btn:hover{transform:translateY(-1px)}
.vt-solid:hover{background:#FFFFFF !important;color:#09070F !important}
.vt-ghost:hover{border-color:#F3EEE4 !important;color:#F3EEE4 !important}
.vt-wa:hover{background:#2FE375 !important;color:#06210F !important}
.vt-navlink:hover{color:#F3EEE4 !important}
.vt-card{transition:border-color .2s ease,transform .2s ease,background-color .2s ease}
.vt-card:hover{border-color:rgba(163,144,255,0.55) !important;transform:translateY(-2px)}
.vt-card:hover .vt-more{background:#F3EEE4 !important;color:#09070F !important}
@keyframes vtGlow{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes vtFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.vt-glow{animation:vtGlow 6s ease-in-out infinite}
.vt-float{animation:vtFloat 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.vt-glow,.vt-float{animation:none}.vt-btn{transition:none}}
@media (max-width:860px){.vt-hide-sm{display:none !important}}

/* ---- Agregado al pasar el diseño a la web real ---- */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:72px}
img{max-width:100%;height:auto}
/* Portada: si hay foto (apps/web/img/hero.*), scripts/copiar-web.mjs pone html.con-foto y la escena dibujada se oculta */
.vt-foto{display:none}
html.con-foto .vt-foto{display:block;position:absolute;inset:0;background:#09070F url(/img/hero-m.webp) 66% center/cover no-repeat}
html.con-foto .vt-escena{display:none}
@media (min-width:861px){html.con-foto .vt-foto{background-image:url(/img/hero.webp);background-position:right center}}
/* Vitrina App de la sección #app: botones de la mini demo (vitrina-app.js) */
#vt-app button{font:inherit;border:0;background:none;color:inherit;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#vt-app button:focus-visible{outline:2px solid #A390FF;outline-offset:2px}
.vt-app-toque{position:relative}
.vt-app-toque::after{content:"";position:absolute;left:-4px;right:-4px;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px))}
#vt-app [data-scroll]::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}#vt-app *{transition:none !important}}
#vt-app{box-sizing:border-box}
.vt-navlink{display:inline-flex;align-items:center;min-height:44px}
/* Portada en celular: el texto arriba y la vitrina (dibujada o foto) debajo, sin taparse */
@media (max-width:860px){
  #inicio{display:flex;flex-direction:column}
  #inicio .vt-hero-txt{order:1;z-index:1;min-height:0 !important;width:100%;box-sizing:border-box;padding-bottom:32px !important}
  #inicio .vt-hero-deg{display:none}
  #inicio .vt-escena{order:2;position:relative !important;width:100% !important;height:720px;zoom:.62}
  /* con foto: la foto queda detrás del texto y un degradado oscuro lo deja leer */
  html.con-foto #inicio .vt-hero-txt{padding-bottom:72px !important}
  html.con-foto #inicio .vt-hero-deg{display:block;background:linear-gradient(180deg,rgba(9,7,15,.4) 0%,rgba(9,7,15,.66) 40%,rgba(9,7,15,.88) 75%,#09070F 100%) !important}
  html.con-foto #inicio .vt-hero-txt h1,html.con-foto #inicio .vt-hero-txt p{text-shadow:0 2px 18px rgba(9,7,15,.8)}
}
header nav>a:first-child{min-height:44px}
/* Web Motion en celular: "100% scroll" en una sola línea */
@media (max-width:480px){.vt-pct{font-size:10.5px !important;white-space:nowrap}}
/* Celular: menos aire en secciones, planes más compactos y los puntos de Catálogo y Vitrina App en dos columnas (mismos textos) */
@media (max-width:600px){
  section:not(#inicio)>div{padding-top:56px !important;padding-bottom:56px !important}
  section:not(#inicio)>div[style*="gap: 56px"]{gap:40px !important}
  .vt-plan{padding:26px 22px !important;gap:20px !important;border-radius:24px !important}
  .vt-plan [style*="font-size: 68px"]{font-size:54px !important}
  .vt-plan [style*="font-size: 30px"]{font-size:24px !important;margin-top:6px !important}
  .vt-plan ul{gap:9px !important;padding-top:18px !important}
  .vt-plan li{font-size:14px !important}
  .vt-plan>a{min-height:48px !important}
  .vt-rasgos{grid-template-columns:1fr 1fr !important;gap:20px 16px !important}
  .vt-rasgos>div{padding-top:12px !important;gap:4px !important}
  .vt-rasgos>div>span:first-child{font-size:15px !important;line-height:1.3}
  .vt-rasgos>div>span:last-child{font-size:13px !important;line-height:1.45 !important}
  .vt-tel>div:nth-child(2){height:540px !important}
}
/* Textos: .vt-l en PC, .vt-c (resumido) en el celular. "Lo que hacemos" y la sección Web Motion solo en PC; en el celular
   Web Motion es el primer extra (.vt-solo-movil) */
.vt-c{display:none}
@media (min-width:601px){.vt-solo-movil{display:none !important}}
@media (max-width:600px){
  .vt-solo-pc,.vt-l{display:none !important}
  .vt-c{display:inline}
  section:not(#inicio)>div>div[style*="text-align: center"]{gap:12px !important}
  div[style*="minmax(min(100%, 300px), 1fr)"]{gap:10px !important}
  div[style*="minmax(min(100%, 300px), 1fr)"]>div{padding:16px !important;gap:12px !important}
  .vt-caja-botones{flex-wrap:nowrap !important;width:100%}
  .vt-caja-botones>a{flex:1;justify-content:center;padding:0 12px !important}
  .vt-pasos{grid-template-columns:1fr 1fr !important;gap:10px !important}
  .vt-pasos>li{padding:16px 14px !important;gap:6px !important;border-radius:18px !important}
  .vt-pasos>li>span:first-child{font-size:30px !important}
  .vt-pasos>li>span:nth-child(2){font-size:15px !important;line-height:1.25}
  .vt-pasos>li>span:last-child{font-size:13px !important;line-height:1.45 !important}
  .vt-negocios{gap:10px !important}
  .vt-negocio{padding:10px !important;gap:12px !important}
  .vt-negocio img{flex-basis:96px !important;width:96px !important;height:64px !important}
}
@media (max-width:359px){.vt-rasgos{grid-template-columns:1fr !important}}