/* ============================================================
   Szent Solutions — estilos
   Base tomada del handoff de diseño (hi-fi), + responsive,
   accesibilidad y menú móvil.
   ============================================================ */

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* El header es fijo (~94px): sin esto, al ir a una sección desde el menú
     el título quedaría escondido detrás. */
  scroll-padding-top:110px;
}
body{margin:0;font-family:'Montserrat',system-ui,sans-serif;font-weight:400;color:#ECE8F7;
  background:#000000;
  background-image:radial-gradient(40% 14% at 15% 40%,rgba(255,255,255,.1),transparent 72%),radial-gradient(44% 14% at 85% 52%,rgba(255,255,255,.09),transparent 72%),radial-gradient(40% 13% at 50% 30%,rgba(255,255,255,.08),transparent 72%),radial-gradient(55% 45% at 50% -2%,rgba(165,165,165,.3),transparent 70%),radial-gradient(40% 40% at 88% 12%,rgba(120,120,120,.22),transparent 70%),radial-gradient(45% 45% at 8% 30%,rgba(90,90,90,.18),transparent 70%),radial-gradient(46% 17% at 72% 60%,rgba(255,255,255,.1),transparent 72%),radial-gradient(42% 15% at 24% 74%,rgba(255,255,255,.09),transparent 72%),radial-gradient(50% 15% at 60% 88%,rgba(255,255,255,.08),transparent 72%),radial-gradient(44% 14% at 26% 21%,rgba(255,255,255,.09),transparent 72%),radial-gradient(46% 14% at 76% 33%,rgba(255,255,255,.085),transparent 72%),radial-gradient(42% 14% at 32% 47%,rgba(255,255,255,.08),transparent 72%),radial-gradient(44% 14% at 82% 80%,rgba(255,255,255,.075),transparent 72%),radial-gradient(42% 13% at 18% 92%,rgba(255,255,255,.07),transparent 72%);}
a{color:inherit}
img{max-width:100%}

/* ===== Keyframes ===== */
@keyframes szMarquee{0%{transform:translateX(0)}100%{transform:translateX(-20%)}}
@keyframes vGlow{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:.95;transform:translateX(-50%) scale(1.08)}}
@keyframes vFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes vDrift{0%,100%{transform:translateX(-50%) translate(0,0)}50%{transform:translateX(-50%) translate(46px,-38px)}}

/* ===== Tarjetas / botones / nav ===== */
.v-card{transition:transform .6s cubic-bezier(.22,1,.36,1),border-color .5s ease,background .5s ease}
.v-card:hover{transform:perspective(1400px) translateY(-4px) rotateX(1.3deg);border-color:rgba(255,255,255,.4)}
/* Servicios: al pasar el mouse la caja se ilumina de negro a blanco.
   La curva es ease-in-out a proposito: con easeOutCubic el 90% del cambio
   pasaba en el primer 40% del tiempo y se sentia de golpe aunque durara mas. */
.v-bento .v-card{transition:transform .6s cubic-bezier(.22,1,.36,1),border-color 1.15s cubic-bezier(.45,0,.35,1),background 1.15s cubic-bezier(.45,0,.35,1)}
.v-bento .v-card h3,.v-bento .v-card p{transition:color 1.15s cubic-bezier(.45,0,.35,1)}
.v-bento .v-card > div:first-child{transition:background 1.15s cubic-bezier(.45,0,.35,1)}
.v-bento .v-card:hover{background:#ffffff!important;border-color:#ffffff!important}
/* Las cajas destacadas tienen gradiente de fondo. Los navegadores NO saben
   interpolar gradientes (ni gradiente->color ni gradiente->gradiente): el
   fondo saltaba de golpe = el flash. Solucion: el gradiente queda quieto y
   el blanco entra como una capa aparte a la que si se le puede animar la
   opacidad. El contenido va por encima con z-index. */
.v-bento .v-card-feat{position:relative}
.v-bento .v-card-feat::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  background:#ffffff;
  opacity:0;
  z-index:0;
  transition:opacity 1.15s cubic-bezier(.45,0,.35,1);
}
.v-bento .v-card-feat > *{position:relative;z-index:1}
.v-bento .v-card-feat:hover::before{opacity:1}
/* Se le devuelve el gradiente original en hover para que la regla de arriba
   (background:#ffffff!important) no lo apague de golpe. */
.v-bento .v-card-feat:hover{background:linear-gradient(180deg,rgba(165,165,165,.1),rgba(255,255,255,.02))!important}
.v-bento .v-card:hover h3{color:#0a0a0a!important}
.v-bento .v-card:hover p{color:rgba(10,10,10,.72)!important}
.v-bento .v-card:hover > div:first-child{background:#151518!important}

/* ===== Productos (HUB / OS / Presence) ===== */
.v-prod{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.v-prodcard{
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  padding:32px 30px;
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .4s ease;
}
.v-prodcard:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.42)}
.v-prodtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.v-prodicon{
  width:46px;height:46px;flex:none;
  border-radius:13px;
  background:linear-gradient(135deg,#3a3a3a,#1a1a1a);
  display:flex;align-items:center;justify-content:center;
  font-size:21px;
}
.v-prodbadge{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(236,232,247,.5);
  border:1px solid rgba(255,255,255,.14);
  border-radius:100px;
  padding:5px 11px;
}
.v-prodcard h3{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.v-prodtag{font-size:15.5px;font-weight:500;color:#ECE8F7;margin:0 0 12px}
.v-proddesc{font-size:14px;line-height:1.65;color:rgba(236,232,247,.6);margin:0 0 20px}
.v-prodfeat{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.v-prodfeat li{font-size:13.5px;color:rgba(236,232,247,.78);padding-left:20px;position:relative}
.v-prodfeat li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.v-prodex{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:13px;color:rgba(236,232,247,.5);
}
.v-prodex a{color:rgba(236,232,247,.85);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.v-prodex a:hover{color:#fff;border-bottom-color:#fff}

/* Cierre: trabajo a medida */
.v-prod-custom{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:20px auto 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  background:rgba(255,255,255,.02);
  padding:26px 32px;
}
.v-prod-custom > div{font-size:14.5px;line-height:1.6;color:rgba(236,232,247,.62);max-width:820px}
.v-prod-custom strong{color:#fff;font-weight:600}

@media (max-width:900px){
  .v-prod{grid-template-columns:1fr}
  .v-prod-custom{flex-direction:column;align-items:flex-start;gap:20px}
}

.v-btn{transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
.v-btn:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(255,255,255,.16)}
.v-nl{transition:color .3s ease}.v-nl:hover{color:#fff!important}
.v-think{transition:transform .45s cubic-bezier(.2,.8,.2,1)}.v-think:hover{transform:translateY(-7px)}
.v-think:hover .v-chip{border-color:rgba(255,255,255,.55);color:#fff}
.v-chip{transition:border-color .4s ease,color .4s ease}

/* ===== FAQ ===== */
.v-faq summary::-webkit-details-marker{display:none}
.v-faq summary{position:relative;padding-right:36px}
.v-faq summary::after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:300;color:#BFBFBF;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.v-faq[open] summary::after{transform:translateY(-50%) rotate(135deg)}
.v-faq::details-content{opacity:0;max-height:0;overflow:hidden;transform:translateY(-4px);content-visibility:hidden;transition:max-height .7s cubic-bezier(.16,1,.3,1),opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1),content-visibility .7s allow-discrete}
.v-faq[open]::details-content{opacity:1;max-height:240px;transform:translateY(0);content-visibility:visible}
.v-faq{transition:border-color .45s ease,background .45s ease}
.v-faq:hover{border-color:rgba(255,255,255,.32)!important}
.v-faq[open]{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.26)!important}
.v-faq summary{transition:color .3s ease}
.v-faq:hover summary,.v-faq[open] summary{color:#fff}
.v-faq summary::before{content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%) scaleY(0);transform-origin:center;width:3px;height:20px;background:#fff;border-radius:2px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.v-faq[open] summary::before{transform:translateY(-50%) scaleY(1)}

/* ===== Formulario ===== */
.v-fld{width:100%;box-sizing:border-box;font-family:'Montserrat',sans-serif;font-size:14px;padding:14px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);color:#ECE8F7;outline:none;transition:border-color .3s ease,background .3s ease}
.v-fld:focus{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.v-fld::placeholder{color:rgba(236,232,247,.4)}
/* Textarea que crece solo: nunca muestra barra de scroll */
.v-autogrow{
  min-height:110px;
  overflow-y:hidden!important;
  resize:none;
  transition:height .12s ease;
}

.v-fchip{cursor:pointer}
.v-fchip input{position:absolute;opacity:0;pointer-events:none}
.v-fchip span{display:inline-block;font-size:13px;padding:10px 18px;border-radius:100px;border:1px solid rgba(255,255,255,.18);color:rgba(236,232,247,.75);transition:background .3s ease,color .3s ease,border-color .3s ease}
.v-fchip:hover span{border-color:rgba(255,255,255,.45)}
.v-fchip input:checked + span{background:#fff;color:#0a0a0a;border-color:#fff}
.v-formnote{font-size:14px;margin:16px 0 0;text-align:center;min-height:1em}
.v-formnote.ok{color:#7ee787}
.v-formnote.err{color:#ff9a9a}

/* ===== Cursores ===== */
.v6, .v6 *{cursor:default}
/* El "*" incluye lo que va DENTRO del link (img, svg...). Sin el, la regla
   ".v6 *{cursor:default}" de arriba le gana al hijo, porque el hijo no es un
   <a>: el link mostraba la manito pero la imagen de adentro no. */
.v6 a,.v6 a *,.v6 button,.v6 button *,.v6 summary,.v6 summary *,.v6 .v-fchip,.v6 .v-fchip *,.v6 .v-top,.v6 .v-top *,.v6 .v-burger,.v6 .v-burger *{cursor:pointer}
.v6 input[type=text],.v6 input[type=email],.v6 input[type=tel],.v6 textarea{cursor:text}

/* ===== WhatsApp flotante ===== */
@keyframes vWaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.v-wa,.v-wa *{cursor:pointer}
.v-wa{transition:transform .3s ease,filter .3s ease}
.v-wa:hover{transform:translateY(-3px) scale(1.03);filter:drop-shadow(0 14px 34px rgba(255,255,255,.28))}
.v-wa:hover .v-wa-label{max-width:260px;opacity:1;padding:0 20px 0 20px;margin-right:-14px}
.v-wa-label{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .5s cubic-bezier(.22,1,.36,1),opacity .4s ease,padding .5s ease,margin-right .5s ease}

/* ===== Volver arriba ===== */
.v-top{transition:transform .3s ease,background .3s ease,border-color .3s ease}
.v-top:hover{transform:translateY(-3px);background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.5)!important}

/* ===== Loader ===== */
@keyframes vLoadFade{0%,68%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes vLoadBar{0%{width:0}100%{width:100%}}
@keyframes vLoadLogo{0%{opacity:0;transform:scale(.92)}34%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
.v-loader{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:60;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;animation:vLoadFade 2.6s ease forwards}
.v-loaderlogo{width:320px;max-width:70vw;height:auto;display:block;animation:vLoadLogo 1.7s ease both}
.v-loaderbar{width:170px;height:2px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.v-loaderbar i{display:block;height:100%;background:#fff;animation:vLoadBar 2s cubic-bezier(.4,0,.2,1) forwards}

/* ===== Proceso secuencial ===== */
.v-stepnum{display:inline-block}
@keyframes vSeq{0%,5%,42%,100%{box-shadow:0 0 0 rgba(255,255,255,0)}20%{box-shadow:0 14px 46px rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.5)}}
@keyframes vSeqNum{0%,5%,42%,100%{color:#BFBFBF}20%{color:#fff}}
.v-steps .v-step{animation:vSeq 7s ease-in-out infinite}
.v-steps .v-step:nth-child(2){animation-delay:1.4s}
.v-steps .v-step:nth-child(3){animation-delay:2.8s}
.v-steps .v-step:nth-child(4){animation-delay:4.2s}
.v-steps .v-step .v-stepnum{animation:vSeqNum 7s ease-in-out infinite}
.v-steps .v-step:nth-child(2) .v-stepnum{animation-delay:1.4s}
.v-steps .v-step:nth-child(3) .v-stepnum{animation-delay:2.8s}
.v-steps .v-step:nth-child(4) .v-stepnum{animation-delay:4.2s}

/* ===== Shine H1 ===== */
@keyframes vShine{0%{background-position:250% 50%}100%{background-position:-150% 50%}}
.v-shine{background:linear-gradient(100deg,#82828c 0%,#ffffff 42%,#ffffff 58%,#82828c 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:vShine 3.5s linear infinite}

/* ===== Acento editorial: serif itálica en el remate del título =====
   Instrument Serif ya venía cargada pero no se usaba. Solo tiene peso 400,
   así que forzamos 400 para que el navegador no la "engorde" artificialmente. */
.v-serif{
  /* Playfair Display en lugar de Instrument Serif: aquella solo tenía peso 400
     y el remate se veía demasiado fino. Esta tiene pesos reales (sin falso negrita). */
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style:normal;
  font-weight:700;
  letter-spacing:-.02em;
  font-size:1.18em;         /* mantiene el tamaño que ya funcionaba (mayúscula ~+20% vs el sans) */
  display:block;            /* "lo construimos" siempre en su propio renglón */
}

/* El título necesita ~1111px para que "Lo que tu negocio necesite," entre en un renglón.
   Se achica de forma fluida en pantallas intermedias para que nunca se parta. */
@media (min-width:901px){
  .v-hero h1{font-size:clamp(56px, 6.4vw, 84px)!important}
}

/* ===== Revelado progresivo al scrollear =====
   Se aplica por JS y se limpia al terminar, para no pisar las transiciones propias
   de cada elemento (hover, tilt, etc.). */
.rv{
  opacity:0!important;
  transform:translateY(26px)!important;
  transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)!important;
}
.rv.in{ opacity:1!important; transform:none!important; }

/* ===== Textura de grano (sutil, sobre todo el sitio) ===== */
.v6::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:200;
  opacity:.045;
  background-size:160px 160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Barra de progreso de lectura ===== */
.v-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:46;pointer-events:none;background:transparent}
.v-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,rgba(255,255,255,.3),#ffffff);box-shadow:0 0 10px rgba(255,255,255,.45)}

/* ===== Hero a pantalla completa (al entrar solo se ve el banner) ===== */
.v-hero{
  min-height:100vh;      /* fallback */
  min-height:100svh;     /* evita el salto por la barra del navegador en celular */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== Header fijo: acompaña toda la navegación (nunca se oculta) ===== */
.v-nav{transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.v-nav--solid{background:rgba(10,10,12,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}

/* ===== Ticker (banda de servicios) ===== */
.v-ticker{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
}
.v-ticker:hover .v-ticker-track{animation-play-state:paused!important}

/* ===== Carrusel de testimonios ===== */
.v-arrow{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s ease,background .3s ease,border-color .3s ease}
.v-arrow:hover{transform:translateY(-2px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.v-testi-viewport{overflow:hidden;flex:1;min-width:0}
.v-testi-track{display:flex;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.v-testi-slide{flex:0 0 100%;box-sizing:border-box;padding:0 4px}
.v-testi-dots{display:flex;gap:9px;justify-content:center;margin-top:26px}
.v-dot{width:8px;height:8px;padding:0;border-radius:50%;border:none;background:rgba(255,255,255,.24);cursor:pointer;transition:background .3s ease,transform .3s ease}
.v-dot.active{background:#fff;transform:scale(1.3)}

/* ===== Carrusel de sitios de muestra (2 por vista) ===== */
.v-muestra-viewport{overflow:hidden;flex:1;min-width:0}
.v-muestra-track{display:flex;gap:24px;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.v-muestra-track > .v-card{flex:0 0 calc(50% - 12px)}
.v-muestra-dots{display:flex;gap:9px;justify-content:center;margin-top:26px}

/* ===== Menú móvil (hamburguesa) ===== */
.v-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#ECE8F7;font-size:20px;line-height:1}

/* ===== Accesibilidad: foco visible ===== */
a:focus-visible,button:focus-visible,summary:focus-visible,.v-fchip:focus-within span{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
/* Campos del formulario: quitar el outline extra; el borde blanco de :focus alcanza */
.v-fld:focus,.v-fld:focus-visible{outline:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  /* Nav: colapsa en menú desplegable */
  .v-burger{display:flex}
  .v-navpill{
    position:absolute;top:70px;right:16px;left:16px;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:12px!important;border-radius:16px!important;
    /* Negro grisáceo con luces difuminadas, igual que la zona del header del sitio.
       Se mantiene opaco (no translúcido) para que las categorías se lean siempre.
       El linear-gradient plano levanta todo el panel del negro puro. */
    background:
      radial-gradient(70% 60% at 15% 0%, rgba(255,255,255,.18), transparent 72%),
      radial-gradient(60% 55% at 95% 20%, rgba(190,190,190,.16), transparent 72%),
      radial-gradient(65% 50% at 55% 100%, rgba(255,255,255,.10), transparent 74%),
      linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)),
      #000000 !important;
    -webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    box-shadow:0 18px 50px rgba(0,0,0,.55)!important;
    display:none!important;z-index:40;
  }
  .v-navpill.open{display:flex!important}
  .v-navpill a{padding:12px 14px!important;font-size:15px!important}
  /* Enlaces bien legibles sobre el fondo sólido */
  .v-navpill a.v-nl{color:rgba(236,232,247,.92)!important}
  /* El botón "Hablemos" ocupa todo el ancho al final */
  .v-navpill a.v-btn{text-align:center;margin-top:4px}

  /* Hero */
  .v-hero h1{font-size:44px!important}
  .v-hero p{font-size:16px!important}

  /* Bento a 1-2 columnas */
  .v-bento{grid-template-columns:1fr 1fr!important;grid-auto-rows:auto!important}
  .v-bento > div{grid-column:span 1!important;min-height:180px}

  /* Proceso: una sola columna, sin sticky */
  .v-proceso{grid-template-columns:1fr!important;gap:32px!important}
  .v-proceso > div:first-child{position:static!important}
  .v-proceso h2{font-size:34px!important}

  /* Cómo pensamos: apilado */
  .v-think-grid{grid-template-columns:1fr!important;gap:44px}
  .v-think-grid > div{border-left:none!important;border-right:none!important;padding:0 20px!important}

  /* Muestras y testimonios: 1 columna */
  .v-muestra-grid,.v-testi-grid{grid-template-columns:1fr!important}

  /* Títulos de sección más chicos */
  .v-h2{font-size:34px!important}

  section{padding-left:22px!important;padding-right:22px!important}
}

@media (max-width:640px){
  /* Carrusel de muestras: 1 por vista y flechas debajo en celular */
  .v-muestra{flex-wrap:wrap;justify-content:center;gap:14px}
  .v-muestra .v-muestra-viewport{flex:0 0 100%!important;order:0}
  .v-muestra .v-arrow{order:1}
  .v-muestra-track > .v-card{flex:0 0 100%}
}

@media (max-width:560px){
  /* Hero en celular: aprovecha la pantalla completa */
  .v-hero{padding-left:24px!important;padding-right:24px!important}
  /* 34px es el tamaño al que "Lo que tu negocio / necesite," corta limpio en 2 renglones.
     A 42px se partía en 3 ("negocio" quedaba solo). */
  .v-hero h1{font-size:34px!important}
  /* "lo construimos" como la línea más grande (el renglón propio ya viene del base) */
  .v-hero h1 .v-serif{font-size:1.32em}
  .v-hero p{font-size:16.5px!important;margin-top:22px!important}
  /* Botones apilados, todos del mismo ancho (antes quedaban desparejos) */
  .v-hero-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:30px!important}
  .v-hero-cta a.v-btn{width:100%;text-align:center}
  .v-bento{grid-template-columns:1fr!important}
  .v-formgrid{grid-template-columns:1fr!important}
  .v-formgrid input{grid-column:span 1!important}
  .v-cta h2{font-size:40px!important}
  .v-nav{padding:18px 20px!important}
  .v-wa{right:16px!important;bottom:16px!important}
}

/* ===== Instagram del footer ===== */
.v-ig{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(236,232,247,.5);
  text-decoration:none;
  transition:color .3s ease;
  /* El padding lleva el area tocable a 45px (minimo recomendado en mobile)
     alrededor de un icono de 19px; los margenes negativos lo compensan para
     que el icono no separe el logo del texto de abajo. */
  padding:13px;
  margin:-17px 0 -3px;
}
/* El "*" es necesario: la regla global ".v6 *{cursor:default}" le gana al svg
   de adentro (no es un <a>), asi que sin esto el icono muestra la flecha
   comun. Mismo patron que usa .v-wa. */
.v-ig, .v-ig *{ cursor:pointer }
.v-ig svg{ opacity:.7; transition:opacity .3s ease }
.v-ig:hover{ color:#fff }
.v-ig:hover svg{ opacity:1 }
.v-ig:focus-visible{ outline:1px solid rgba(255,255,255,.6); outline-offset:-8px; border-radius:3px }

/* ===== Último proyecto (BONA Store) ===== */
/* Texto arriba (a lo ancho, en dos columnas) + capturas en UNA fila abajo.
   Antes iba texto-al-lado-de-imagenes y la columna de capturas quedaba
   altisima; asi la seccion es mucho mas baja. */
.v-bona{display:block}
/* Cada proyecto es un bloque .v-bona; el segundo en adelante lleva separacion
   y una linea divisoria arriba. */
.v-bona + .v-bona{margin-top:76px;padding-top:76px;border-top:1px solid rgba(255,255,255,.1)}

/* Cabecera de texto: info a la izquierda, etiquetas + boton a la derecha */
.v-bona-txt{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:48px;
  align-items:center;
  margin-bottom:40px;
}
.v-bona-info{min-width:0}
.v-bona-meta{display:flex;flex-direction:column;align-items:flex-start;gap:22px}

/* Etiquetas de lo que incluye el proyecto */
.v-bona-chips{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.v-bona-chips li{
  font-size:12px;
  color:rgba(236,232,247,.72);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
  border-radius:100px;
  padding:6px 12px;
}

/* Las 3 capturas en una fila. Orden: producto · stock por local · panel. */
.v-bona-shots{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  text-decoration:none;
  min-width:0;
}
.v-shot{
  margin:0;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#0e0e12;
  /* 7/5 (1.4): casi calza con producto (1.39) y stock (1.46); el panel (1.61)
     recorta solo 7% a cada lado sin perder los datos. Celdas mas altas = las
     capturas se ven mas grandes en cualquier pantalla. */
  aspect-ratio:7/5;
  transition:transform .6s cubic-bezier(.22,1,.36,1),border-color .5s ease;
}
.v-shot img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Desde arriba: donde se reconoce cada pantalla (barra, menu, titulo). */
  object-position:top;
  display:block;
}

/* GrindOS: capturas anchas (~2:1). Van en celdas 16/10 (mas altas) para que se
   vean mas grandes; el recorte es solo ~12% de cada lado (margenes), sin tocar
   el contenido — ni los 3 calendarios de Habitos. Centra en horizontal. */
.v-shots-grind .v-shot{aspect-ratio:16/10}

/* Aclaracion sutil: los numeros del panel son de muestra */
.v-bona-nota{
  margin:14px 0 0;
  font-size:12px;
  color:rgba(236,232,247,.38);
  text-align:right;
}

/* Etiqueta que aclara que esa captura es el back-office, no la tienda */
.v-shot-cap{
  position:absolute;
  left:12px;
  bottom:10px;
  z-index:2;
  font-size:11.5px;
  font-weight:500;
  color:#0a0a0a;
  background:rgba(255,255,255,.92);
  padding:5px 11px;
  border-radius:100px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.v-bona-shots:hover .v-shot{border-color:rgba(255,255,255,.32);transform:translateY(-3px)}
.v-bona-shots:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:8px;border-radius:16px}
.v-bona-cta:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(255,255,255,.16)}

@media (max-width:900px){
  /* La cabecera pasa a una columna */
  .v-bona-txt{grid-template-columns:1fr;gap:26px;margin-bottom:32px}
  /* Y las capturas se apilan en una sola columna */
  .v-bona-shots{grid-template-columns:1fr;gap:14px}
}
@media (max-width:560px){
  .v-bona-head h2{font-size:32px!important}
  .v-bona-txt h3{font-size:27px!important}
}

/* ===== Respeta usuarios que piden menos movimiento ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .v-loader{display:none!important}
}