/* Victor Studios — sistema visual corporativo, tecnológico y adaptable */
:root {
  --vs-bg: #07111f;
  --vs-bg-soft: #0b192b;
  --vs-panel: rgba(15, 31, 51, .78);
  --vs-line: rgba(151, 181, 213, .20);
  --vs-text: #f5f8fc;
  --vs-muted: #a8b8cc;
  --vs-cyan: #5ee7f5;
  --vs-blue: #5b8cff;
  --vs-violet: #9c8cff;
  --vs-radius: 24px;
}
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: 'Manrope', 'Kanit', system-ui, sans-serif !important;
  color: var(--vs-text);
  background: radial-gradient(ellipse at 15% 0%, rgba(33, 89, 145, .18), transparent 36%), var(--vs-bg) !important;
  line-height: 1.7;
  overflow-x: hidden;
}
body::selection { background: rgba(94,231,245,.32); color: #fff; }
img { max-width: 100%; }
a { text-underline-offset: 4px; }
a, button { -webkit-tap-highlight-color: transparent; }
button, a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
#header {
  height: auto !important;
  min-height: 590px;
  isolation: isolate;
  overflow: clip;
  background-attachment: scroll !important;
  background-position: center 42% !important;
  border-bottom: 1px solid rgba(130, 185, 240, .18);
}
#header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(150,190,235,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(150,190,235,.07) 1px, transparent 1px), radial-gradient(ellipse at 72% 32%, rgba(77, 213, 244, .22), transparent 35%);
  background-size: 44px 44px, 44px 44px, auto;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.74) 65%, transparent 100%);
}
#navigation-header {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 13px clamp(18px, 5vw, 72px) !important;
  background: rgba(5, 13, 25, .76) !important;
  border-bottom: 1px solid rgba(176, 208, 239, .15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#navigation-header > a:first-child img { width: 44px !important; height: 44px !important; filter: drop-shadow(0 0 14px rgba(94,231,245,.18)); }
#menu-toggle {
  width: 45px; height: 43px; border-radius: 13px; border: 1px solid rgba(193,218,243,.24);
  background: rgba(255,255,255,.06); font-size: 25px !important; line-height: 1; color: #fff;
}
#menu-toggle:hover { background: rgba(94,231,245,.14); border-color: var(--vs-cyan); transform: translateY(-1px); }
#btnLogin { background: linear-gradient(135deg, #147dba, #426cf3) !important; border-radius: 999px !important; padding: 10px 19px !important; }
#navbar {
  top: 67px !important; right: clamp(15px, 4vw, 60px) !important;
  width: min(310px, calc(100vw - 30px)) !important;
  background: rgba(7, 17, 31, .96) !important;
  border: 1px solid var(--vs-line);
  box-shadow: 0 24px 75px rgba(0,0,0,.4) !important;
  backdrop-filter: blur(22px);
}
#navbar a { display: block; padding: 8px 10px; border-radius: 10px; color: #eaf4ff !important; font-size: 15px !important; }
#navbar a:hover { color: var(--vs-cyan) !important; background: rgba(94,231,245,.08); padding-left: 14px; }
#header > section:not(#navigation-header) {
  position: relative; z-index: 1; box-sizing: border-box;
  min-height: 590px !important; height: auto !important;
  max-width: 1100px; margin: 0 auto; padding: 145px 24px 145px !important;
  gap: 14px; align-items: flex-start !important; text-align: left !important;
}
#header > section:not(#navigation-header) h1:first-of-type {
  margin: 0 0 2px; color: var(--vs-cyan) !important;
  font-family: 'Space Grotesk', 'Manrope', sans-serif !important;
  font-size: 13px !important; font-weight: 800 !important; letter-spacing: .22em; text-transform: uppercase;
}
#header > section:not(#navigation-header) h1:nth-of-type(2) {
  width: min(920px, 100%); margin: 0; color: #fff !important;
  font-family: 'Space Grotesk', 'Manrope', sans-serif !important;
  font-size: clamp(36px, 6.5vw, 76px) !important; font-weight: 700 !important;
  line-height: 1.04 !important; letter-spacing: -.055em; text-wrap: balance;
  text-shadow: 0 8px 35px rgba(0,0,0,.22);
}
#header > section:not(#navigation-header) h2 {
  margin-top: 4px; color: #c9def4 !important; font-family: 'Manrope', sans-serif !important;
  font-size: clamp(17px, 2.2vw, 23px) !important; font-weight: 500 !important; letter-spacing: .02em;
}
.wave svg path { fill: var(--vs-bg) !important; }
main { position: relative; z-index: 1; color: var(--vs-text); }
main h1, main h2, main h3, main h4 {
  font-family: 'Space Grotesk', 'Manrope', sans-serif !important;
  letter-spacing: -.025em;
}
main > h2, main > .text-center h2 { color: var(--vs-cyan) !important; }
main p { color: #c1cede; line-height: 1.8; }
main section { scroll-margin-top: 95px; }
main .bg-zinc-900, main .bg-zinc-900\/50, main .bg-\[\#0f0f0f\] { background-color: rgba(13, 27, 45, .72) !important; }
main .border-cyan-500\/30, main .border-cyan-500 { border-color: rgba(94,231,245,.26) !important; }
main .text-cyan-400, main .text-\[\#33BEFF\] { color: var(--vs-cyan) !important; }
main button, main a.inline-flex, main a.rounded-md { border-radius: 999px !important; font-weight: 800; }
main button:hover, main a.inline-flex:hover, main a.rounded-md:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(35, 129, 197, .18); }
main img { border-radius: 18px; }
main .wave img, main img.w-10, main .rounded-full img { border-radius: inherit; }
footer.bg-white, footer.text-black {
  color: #dce9f8 !important;
  background: linear-gradient(135deg, #0b1a2c, #07111f) !important;
  border-top: 1px solid rgba(151,181,213,.17);
}
footer.bg-white p, footer.bg-white h2, footer.bg-white h4, footer.text-black p, footer.text-black h2, footer.text-black h4 { color: #dce9f8 !important; }
footer .wave2 svg path { fill: #0b1a2c !important; }
footer .wave2 { height: 92px !important; }
footer > div:last-child { padding-top: 22px !important; }
footer a:hover { color: var(--vs-cyan); }
/* Inicio: nuevo encabezado y tarjetas de valor */
.vs-hero-copy { max-width: 780px; }
.vs-hero-copy p { max-width: 670px; font-size: clamp(16px, 1.8vw, 20px); color: #d0deee; }
.vs-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.vs-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 47px; padding: 12px 21px; border: 1px solid rgba(133,205,247,.24); border-radius: 999px; background: linear-gradient(135deg,#1599c4,#536bff); color: #fff !important; text-decoration: none; font-weight: 800; box-shadow: 0 12px 25px rgba(18,114,199,.22); }
.vs-button:hover { transform: translateY(-2px); box-shadow: 0 17px 32px rgba(18,114,199,.3); }
.vs-button-outline { background: rgba(255,255,255,.055); border-color: rgba(207,229,248,.24); box-shadow: none; }
.vs-eyebrow { color: var(--vs-cyan); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.vs-section { width: min(1160px, calc(100% - 36px)); margin: 0 auto; padding: 66px 0; }
.vs-section-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.vs-section-head .vs-eyebrow { display: block; margin-bottom: 10px; }
.vs-section-head h2 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 43px); line-height: 1.12; color: #f3f8ff; }
.vs-section-head p { margin: 0 auto; max-width: 670px; }
.vs-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.vs-service-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 245px; padding: 25px; border: 1px solid var(--vs-line); border-radius: var(--vs-radius); background: linear-gradient(145deg, rgba(23,47,74,.9), rgba(9,22,38,.9)); box-shadow: 0 18px 55px rgba(0,0,0,.13); }
.vs-service-card::before { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; top: -100px; border-radius: 50%; background: rgba(94,231,245,.12); filter: blur(1px); }
.vs-service-icon { display: grid; place-items: center; width: 49px; height: 49px; margin-bottom: 19px; border: 1px solid rgba(94,231,245,.25); border-radius: 16px; color: var(--vs-cyan); background: rgba(94,231,245,.09); font-size: 24px; }
.vs-service-card h3 { margin: 0 0 9px; font-size: 21px; color: #f5f9ff; }
.vs-service-card p { margin: 0 0 19px; font-size: 14px; color: #b7c7db; }
.vs-service-card a { margin-top: auto; align-self: flex-start; color: var(--vs-cyan); text-decoration: none; font-size: 14px; font-weight: 800; }
.vs-service-card a:hover { color: #fff; gap: 14px; }
/* Página de soluciones digitales */
.software-page #header { min-height: 610px; }
.software-page #header > section:not(#navigation-header) { min-height: 610px !important; }
.software-hero { max-width: 840px; }
.software-hero .vs-hero-actions { margin-top: 22px; }
.software-proof { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.software-proof span { padding: 8px 12px; border: 1px solid rgba(202,225,246,.2); border-radius: 999px; background: rgba(255,255,255,.055); color: #d8e8f7; font-size: 12px; font-weight: 700; }
.software-main { padding-top: 12px; }
.software-intro { width: min(1000px, calc(100% - 36px)); margin: 0 auto; padding: 58px 0 22px; text-align: center; }
.software-intro .vs-eyebrow { display: block; margin-bottom: 12px; }
.software-intro h2 { margin: 0 0 15px; color: #f7fbff; font-size: clamp(31px, 4.4vw, 48px); line-height: 1.1; }
.software-intro p { max-width: 780px; margin: 0 auto; color: var(--vs-muted); }
.solution-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; width: min(1160px, calc(100% - 36px)); margin: 26px auto 0; }
.solution-card { overflow: hidden; display: flex; flex-direction: column; min-width: 0; border: 1px solid rgba(151,181,213,.21); border-radius: 25px; background: linear-gradient(155deg, rgba(17,37,61,.96), rgba(8,20,35,.98)); box-shadow: 0 22px 60px rgba(0,0,0,.18); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.solution-card:hover { transform: translateY(-6px); border-color: rgba(94,231,245,.5); box-shadow: 0 27px 70px rgba(0,0,0,.25); }
.solution-visual { position: relative; display: grid; place-items: center; min-height: 210px; padding: 24px; overflow: hidden; background: radial-gradient(circle at 70% 25%, rgba(94,231,245,.23), transparent 40%), linear-gradient(135deg, #123a54, #132443); }
.solution-visual::after { content: ""; position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(135deg,black,transparent); pointer-events: none; }
.solution-visual img { position: relative; z-index: 1; display: block; width: min(78%, 230px); max-height: 150px; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(0,0,0,.2)); }
.solution-visual .solution-photo { width: 100%; max-height: none; height: 230px; object-fit: cover; border-radius: 0; position: absolute; inset: 0; opacity: .8; }
.solution-visual .solution-photo::after { content: ""; }
.solution-logo-panel { position: relative; z-index: 1; display: grid; place-items: center; width: 112px; height: 112px; border: 1px solid rgba(230,248,255,.55); border-radius: 28px; background: rgba(255,255,255,.93); box-shadow: 0 16px 42px rgba(0,0,0,.24); }
.solution-logo-panel img { width: 88px; max-height: 88px; object-fit: contain; }
.solution-label { position: absolute; z-index: 2; top: 16px; left: 16px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(5,13,25,.76); color: #def8ff; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.solution-content { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.solution-content h3 { margin: 0 0 8px; color: #f4f8ff; font-size: 26px; line-height: 1.15; }
.solution-content > p { margin: 0 0 17px; color: #b5c7dc; font-size: 14px; line-height: 1.75; }
.solution-features { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 23px; padding: 0; list-style: none; }
.solution-features li { border: 1px solid rgba(172,202,232,.17); border-radius: 999px; padding: 6px 9px; color: #c7d8e9; font-size: 11px; }
.solution-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; }
.solution-link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 14px; border: 1px solid rgba(94,231,245,.28); border-radius: 999px; background: rgba(94,231,245,.11); color: var(--vs-cyan) !important; text-decoration: none; font-size: 12px; font-weight: 800; }
.solution-link:hover { background: rgba(94,231,245,.2); border-color: var(--vs-cyan); transform: translateY(-1px); }
.solution-link.secondary { border-color: rgba(198,219,241,.22); background: rgba(255,255,255,.04); color: #e5eef8 !important; }
.software-details { width: min(1080px, calc(100% - 36px)); margin: 48px auto 0; padding: clamp(22px, 4vw, 42px); border: 1px solid rgba(94,231,245,.2); border-radius: 28px; background: linear-gradient(135deg, rgba(15,39,60,.86), rgba(9,22,38,.9)); }
.software-details[hidden] { display: none !important; }
.software-details h3 { margin: 0 0 14px; color: #f3f8ff; font-size: clamp(25px, 3vw, 35px); }
.software-details .detail-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: center; gap: 28px; }
.software-details .detail-logo { width: min(230px, 65%); margin: 0 auto; }
.software-details .detail-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.software-details .detail-gallery img { width: 100%; height: 180px; object-fit: contain; background: rgba(0,0,0,.15); border: 1px solid rgba(155,195,226,.16); padding: 8px; }
.software-bottom-cta { width: min(1160px, calc(100% - 36px)); margin: 60px auto 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(25px, 5vw, 45px); border: 1px solid rgba(94,231,245,.22); border-radius: 26px; background: radial-gradient(circle at 88% 15%, rgba(94,231,245,.15), transparent 33%), linear-gradient(135deg, #102945, #0a1829); }
.software-bottom-cta h2 { margin: 0 0 8px; color: #fff; font-size: clamp(24px, 3vw, 35px); }
.software-bottom-cta p { max-width: 650px; margin: 0; color: #bccfe2; }
@media (max-width: 900px) {
  .solution-grid, .vs-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #header > section:not(#navigation-header) { max-width: 760px; }
}
@media (max-width: 640px) {
  #header, .software-page #header { min-height: 560px; }
  #header > section:not(#navigation-header), .software-page #header > section:not(#navigation-header) { min-height: 560px !important; padding: 125px 22px 120px !important; }
  #navigation-header { padding: 11px 16px !important; }
  #navigation-header > a:first-child img { width: 39px !important; height: 39px !important; }
  #btnLogin { padding: 8px 13px !important; font-size: 13px; }
  main { padding-left: 0; padding-right: 0; }
  .vs-section { width: min(100% - 28px, 1160px); padding: 46px 0; }
  .vs-service-grid, .solution-grid { grid-template-columns: 1fr; width: calc(100% - 28px); }
  .solution-visual { min-height: 185px; }
  .solution-content { padding: 21px; }
  .software-intro { width: calc(100% - 30px); padding-top: 44px; }
  .software-details { width: calc(100% - 28px); margin-top: 30px; }
  .software-details .detail-layout { grid-template-columns: 1fr; }
  .software-details .detail-logo { width: 150px; }
  .software-details .detail-gallery { grid-template-columns: 1fr 1fr; }
  .software-details .detail-gallery img { height: 140px; }
  .software-bottom-cta { width: calc(100% - 28px); flex-direction: column; align-items: flex-start; margin-top: 42px; }
  footer .wave2 { height: 55px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}