/* ============================================================
   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 (transición suave) */
.v-bento .v-card{transition:transform .6s cubic-bezier(.22,1,.36,1),border-color .7s ease,background .7s cubic-bezier(.33,1,.68,1)}
.v-bento .v-card h3,.v-bento .v-card p{transition:color .7s cubic-bezier(.33,1,.68,1)}
.v-bento .v-card > div:first-child{transition:background .7s cubic-bezier(.33,1,.68,1)}
.v-bento .v-card:hover{background:#ffffff!important;border-color:#ffffff!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}
.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}
.v6 a,.v6 button,.v6 summary,.v6 .v-fchip,.v6 .v-top,.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(0,0,0,.55);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);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);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;
    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}
}

/* ===== 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}
}