/* ==========================================================================
   VV Popup de Contacto
   ========================================================================== */

.vv-popup {
  --vv-ink:      #f4f1ff;
  --vv-muted:    #b9aede;
  --vv-violet:   #7c3aed;
  --vv-violet-2: #a78bfa;
  --vv-line:     rgba(167, 139, 250, .24);
  --vv-panel:    #1a0c33;

  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color-scheme: dark;
}

.vv-popup.is-open { display: flex; }
.vv-popup[hidden] { display: none; }

.vv-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 3, 20, .74);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .35s ease;
}
.vv-popup.is-visible .vv-popup__backdrop { opacity: 1; }

.vv-popup__dialog {
  position: relative;
  width: min(960px, 100%);
  max-height: min(92vh, 980px);
  display: grid;
  grid-template-columns: 40% 60%;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(155deg, #1b0d33 0%, #2a1350 52%, #170a2c 100%);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .62), inset 0 0 0 1px var(--vv-line);
  opacity: 0;
  transform: translateY(20px) scale(.975);
  transition: opacity .38s ease, transform .45s cubic-bezier(.18, .84, .26, 1);
}
.vv-popup.is-visible .vv-popup__dialog { opacity: 1; transform: none; }

/* En un grid, un hijo con overflow:auto NO hace scroll si conserva su
   min-height automatica: se desborda y lo recorta el padre. */
.vv-popup__dialog > * { min-height: 0; }

/* ------------------------------------------------------------ cerrar */

.vv-popup__close {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 5;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--vv-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: var(--vv-ink);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.vv-popup__close:hover { background: rgba(255, 255, 255, .16); transform: rotate(90deg); }
.vv-popup__close:focus-visible { outline: 2px solid var(--vv-violet-2); outline-offset: 2px; }

/* ------------------------------------------------------- panel visual */

.vv-popup__visual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 34px 30px;
  background: radial-gradient(120% 90% at 20% 10%, #2d1758 0%, #150a2b 70%);
}

.vv-popup__visual-inner { position: relative; z-index: 2; }

.vv-popup__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vv-violet-2);
}

.vv-popup__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--vv-violet-2);
  box-shadow: 0 0 12px rgba(167, 139, 250, .8);
}

.vv-popup__title {
  margin: 0 0 14px;
  font-size: clamp(23px, 2.3vw, 31px);
  line-height: 1.13;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}

.vv-popup__aside {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(244, 241, 255, .74);
}

/* ---------------------------------------------------------- lava */

.vv-lava {
  position: absolute;
  inset: -18%;
  z-index: 1;
  filter: blur(34px) saturate(125%);
}

.vv-blob {
  position: absolute;
  display: block;
  will-change: transform, border-radius;
  animation: vvMorph 17s ease-in-out infinite, vvDrift 26s ease-in-out infinite;
}

.vv-blob i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
}

.vv-blob__cool {
  background: radial-gradient(circle at 34% 32%,
    #b39cff 0%, #7c3aed 38%, #4c1d95 64%, rgba(76, 29, 149, 0) 78%);
}

.vv-blob__hot {
  background: radial-gradient(circle at 42% 40%,
    #ffd08a 0%, #fb923c 30%, #ea580c 52%, #9a1f10 70%, rgba(120, 25, 12, 0) 82%);
  opacity: 0;
  animation: vvLava 21s ease-in-out infinite;
}

.vv-blob--1 { width: 62%; height: 46%; top:  4%; left: -6%; }
.vv-blob--2 { width: 74%; height: 54%; top: 30%; left: 28%; animation-duration: 21s, 31s; animation-delay: -6s, -9s; }
.vv-blob--3 { width: 54%; height: 42%; top: 62%; left: -2%; animation-duration: 15s, 24s; animation-delay: -11s, -4s; }
.vv-blob--4 { width: 44%; height: 34%; top: 78%; left: 44%; animation-duration: 19s, 29s; animation-delay: -3s, -16s; }

.vv-blob--1 .vv-blob__hot { animation-delay: -2s;  }
.vv-blob--2 .vv-blob__hot { animation-delay: -9s;  animation-duration: 25s; }
.vv-blob--3 .vv-blob__hot { animation-delay: -15s; animation-duration: 19s; }
.vv-blob--4 .vv-blob__hot { animation-delay: -21s; animation-duration: 27s; }

@keyframes vvMorph {
  0%,  100% { border-radius: 62% 38% 47% 53% / 55% 48% 52% 45%; }
  33%       { border-radius: 41% 59% 63% 37% / 42% 61% 39% 58%; }
  66%       { border-radius: 56% 44% 34% 66% / 63% 36% 64% 37%; }
}

@keyframes vvDrift {
  0%,  100% { transform: translate3d(0, 0, 0)    rotate(0deg)   scale(1);    }
  25%       { transform: translate3d(7%, -8%, 0) rotate(34deg)  scale(1.10); }
  50%       { transform: translate3d(-5%, 6%, 0) rotate(-20deg) scale(.93);  }
  75%       { transform: translate3d(8%, 5%, 0)  rotate(16deg)  scale(1.06); }
}

@keyframes vvLava {
  0%, 8%, 62%, 100% { opacity: 0;   }
  24%               { opacity: .58; }
  38%               { opacity: .88; }
  50%               { opacity: .46; }
}

/* -------------------------------------------------------- panel form */

.vv-popup__panel {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 30px 30px 22px;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(124, 58, 237, .20) 0%, rgba(124, 58, 237, 0) 60%),
    linear-gradient(180deg, #1f0f3d 0%, var(--vv-panel) 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, .45) transparent;
}

.vv-popup__panel::-webkit-scrollbar { width: 8px; }
.vv-popup__panel::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, .4);
  border-radius: 8px;
}

.vv-popup__sub {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--vv-muted);
}

.vv-popup__foot {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: rgba(185, 174, 222, .8);
  text-align: center;
}

/* ------------------------------------------- formulario CF7 en oscuro */

.vv-popup .vv-field { margin: 0 0 9px; }

.vv-popup .vv-label-text {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--vv-muted);
}

.vv-popup .vv-req { color: #fb923c; }

.vv-popup .vv-form input[type="text"],
.vv-popup .vv-form input[type="email"],
.vv-popup .vv-form input[type="tel"],
.vv-popup .vv-form select,
.vv-popup .vv-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, .055) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 10px !important;
  color: var(--vv-ink) !important;
  font-size: 13.5px;
  line-height: 1.35;
  padding: 9px 12px !important;
  box-shadow: none !important;
  transition: border-color .18s ease, background .18s ease;
}

.vv-popup .vv-form textarea { min-height: 68px; resize: vertical; }

.vv-popup .vv-form input::placeholder,
.vv-popup .vv-form textarea::placeholder {
  color: rgba(244, 241, 255, .38);
  text-transform: none;
}

.vv-popup .vv-form input:focus,
.vv-popup .vv-form select:focus,
.vv-popup .vv-form textarea:focus {
  border-color: var(--vv-violet-2) !important;
  background: rgba(255, 255, 255, .085) !important;
  outline: none;
}

/* Cargo y Presupuesto comparten fila: ahorra una fila entera de alto.
   Se seleccionan por el nombre del campo (no por posicion), asi que
   reordenar el formulario no lo rompe. */
.vv-popup .row-form-1 > div:has([data-name="your-role"]),
.vv-popup .row-form-1 > div:has([data-name="your-budget"]) {
  flex: 0 0 50%;
  max-width: 50%;
  width: 50%;
}
.vv-popup .row-form-1 > div:has([data-name="your-role"])    { order: 1; }
.vv-popup .row-form-1 > div:has([data-name="your-budget"])  { order: 2; }
.vv-popup .row-form-1 > div:has([data-name="your-service"]) { order: 3; }
.vv-popup .row-form-1 > div:has([data-name="your-message"]) { order: 4; }

/* boton de envio: pegado abajo, siempre visible aunque haya scroll */
.vv-popup .wpcf7-button {
  position: sticky;
  bottom: -22px;
  z-index: 3;
  margin: 4px 0 0;
  padding: 8px 0 22px;
  background: linear-gradient(180deg, rgba(26, 12, 51, 0) 0%, var(--vv-panel) 30%);
}

.vv-popup .wpcf7-button button {
  width: 100%;
  border: 0;
  border-radius: 11px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  box-shadow: 0 10px 26px rgba(109, 40, 217, .42);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.vv-popup .wpcf7-button button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 14px 32px rgba(109, 40, 217, .52);
}
.vv-popup .wpcf7-button button i { display: none; }

.vv-popup .wpcf7-response-output {
  margin: 10px 0 0 !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border-width: 1px !important;
  font-size: 13px;
  color: var(--vv-ink);
}
.vv-popup .wpcf7-not-valid-tip { color: #fca5a5; font-size: 11.5px; margin-top: 3px; }

.vv-popup__panel.is-sent .vv-popup__form,
.vv-popup__panel.is-sent .vv-popup__sub { display: none; }

/* ------------------------------- pantallas de poca altura: aun mas junto */

@media (max-height: 780px) {
  .vv-popup { padding: 12px; }
  .vv-popup__visual { padding: 26px 24px; }
  .vv-popup__panel  { padding: 22px 24px 16px; }
  .vv-popup__sub    { margin-bottom: 13px; font-size: 13px; }
  .vv-popup .vv-field { margin-bottom: 7px; }
  .vv-popup .vv-form textarea { min-height: 56px; }
  .vv-popup__aside { display: none; }
}

/* -------------------------------------------------------------- movil */

@media (max-width: 860px) {
  .vv-popup { padding: 12px; }
  .vv-popup__dialog {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    max-height: 94vh;
  }
  .vv-popup__visual { padding: 20px 22px; }
  .vv-popup__eyebrow { margin-bottom: 8px; }
  .vv-popup__title { font-size: 20px; margin-bottom: 0; }
  .vv-popup__aside { display: none; }
  .vv-popup__panel { padding: 20px 20px 16px; }

  /* en una columna estrecha, cargo y presupuesto vuelven a apilarse */
  .vv-popup .row-form-1 > div:has([data-name="your-role"]),
  .vv-popup .row-form-1 > div:has([data-name="your-budget"]) {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

/* ------------------------------------------ accesibilidad / movimiento */

@media (prefers-reduced-motion: reduce) {
  .vv-popup__dialog,
  .vv-popup__backdrop { transition: none; }
  .vv-blob,
  .vv-blob__hot { animation: none; }
  .vv-blob__hot { opacity: .35; }
  .vv-popup__close:hover { transform: none; }
}