/* ============================================================
   Contacto — videodjralph.com
   Reutiliza .vdjr-serv__hero de servicio.css. Variables de color
   heredadas de .vdjr (articulo.css).
   ============================================================ */

/* ── Tres vias directas ────────────────────────────────────── */
.vdjr-cont__vias{padding:70px var(--margen);border-bottom:1px solid var(--linea)}
.vdjr-cont__viasRejilla{max-width:820px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.vdjr-cont__via{
  position:relative;display:flex;flex-direction:column;gap:12px;padding:30px 60px 30px 30px;
  flex:1 1 280px;max-width:380px;
  border:1px solid var(--linea);color:var(--hueso);
  transition:transform .3s cubic-bezier(.16,.84,.44,1),background .3s,border-color .3s;
}
.vdjr-cont__via:hover{transform:translateY(-4px);background:rgba(31,122,255,.08);border-color:var(--azul);color:var(--hueso)}
.vdjr-cont__viaT{font-family:'Archivo Black',Archivo,sans-serif;font-size:22px;line-height:1.1;text-transform:uppercase;letter-spacing:-.4px}
.vdjr-cont__viaV{font-family:'Space Mono',ui-monospace,monospace;font-size:15px;letter-spacing:.4px;color:var(--hueso);word-break:break-word}
.vdjr-cont__viaD{font-size:15px;line-height:1.65;color:var(--grisTexto)}
.vdjr-cont__viaF{position:absolute;right:26px;bottom:26px;font-size:22px;color:var(--azul);transition:transform .3s}
.vdjr-cont__via:hover .vdjr-cont__viaF{transform:translateX(6px)}

/* ── Formulario (fondo oscuro, foto a la derecha) ──────────── */
.vdjr-cont__formulario{position:relative;overflow:hidden;background:linear-gradient(155deg,#0a0a0a 15%,#0d2038 100%);color:var(--hueso);padding:96px var(--margen)}
/* Flexbox, no grid: con stretch la columna de la foto toma justo la altura
   del formulario, sin los cuelgues de "auto" que da CSS Grid con una
   imagen al 100% de alto dentro. */
.vdjr-cont__formCuerpo{position:relative;max-width:1400px;margin:0 auto;display:flex;align-items:stretch;justify-content:center;gap:40px;flex-wrap:wrap}
.vdjr-cont__formLeft{min-width:0;flex:0 1 560px;align-self:flex-end}
.vdjr-cont__formulario .vdjr-etiqueta{color:var(--claro)}
.vdjr-cont__formulario .vdjr-h2{color:var(--hueso)!important;margin-bottom:22px}
.vdjr-cont__formIntro{font-size:17px;line-height:1.7;color:var(--grisTexto);margin:0 0 26px;max-width:520px}
.vdjr-cont__lista{list-style:none;counter-reset:d;margin:0 0 34px;padding:0;display:grid;gap:0;border-top:1px solid rgba(237,234,227,.18);max-width:520px}
.vdjr-cont__lista li{counter-increment:d;display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(237,234,227,.18);font-size:16px;line-height:1.5;color:var(--hueso)}
.vdjr-cont__lista li::before{content:counter(d,decimal-leading-zero);font-family:'Space Mono',ui-monospace,monospace;font-size:12px;letter-spacing:1.4px;color:var(--azul);flex:none}

.vdjr-cont__formCaja{background:#fff;color:var(--negro);border:1px solid rgba(10,10,10,.1);padding:36px 34px;box-shadow:0 24px 60px rgba(0,0,0,.35);max-width:560px}
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form{margin:0!important}
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form .wpforms-field{padding:0 0 22px!important}
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form .wpforms-field-label{
  font:700 11px/1.3 'Space Mono',ui-monospace,monospace!important;letter-spacing:1.8px;text-transform:uppercase;color:#3a382f!important;margin:0 0 8px!important}
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form .wpforms-required-label{color:#0b5ed0!important}
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form input[type=text],
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form input[type=email],
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form input[type=tel],
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form textarea{
  width:100%!important;max-width:100%!important;box-sizing:border-box;background:#f6f4ee!important;color:var(--negro)!important;
  border:1px solid rgba(10,10,10,.25)!important;border-radius:0!important;padding:14px 16px!important;
  font:16px/1.4 Archivo,Arial,sans-serif!important;height:auto!important;box-shadow:none!important;
}
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form textarea{min-height:150px}
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form input:focus,.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form textarea:focus{outline:0;border-color:#0b5ed0!important;background:#fff!important;box-shadow:0 0 0 3px rgba(31,122,255,.22)!important}
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form .wpforms-field-row{margin:0!important}
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form .wpforms-submit-container{padding:6px 0 0!important}
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form button[type=submit],.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form .wpforms-submit{
  -webkit-appearance:none;appearance:none;cursor:pointer;border-radius:0!important;background:var(--azul)!important;color:var(--negro)!important;
  border:1px solid var(--azul)!important;padding:16px 34px!important;font:700 13px/1 'Space Mono',ui-monospace,monospace!important;
  letter-spacing:1.6px;text-transform:uppercase;transition:background .25s,color .25s,transform .25s;
}
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form button[type=submit]:hover,.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form .wpforms-submit:hover{background:var(--negro)!important;color:var(--hueso)!important;border-color:var(--negro)!important;transform:translateY(-2px)}
.vdjr-cont .vdjr-cont__formCaja  .wpforms-confirmation-container-full,.vdjr-cont .vdjr-cont__formCaja  .wpforms-confirmation-container{background:#eaf2ff;border:1px solid #0b5ed0;color:var(--negro);border-radius:0;padding:16px 18px}
.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form .wpforms-error,.vdjr-cont .vdjr-cont__formCaja .wpforms-container .wpforms-form label.wpforms-error{color:#c62828!important;font-size:13px!important}

/* ── Foto de Ralph, a la derecha del formulario ────────────── */
/* align-self:stretch + object-fit:contain: la foto ocupa toda la altura
   de la fila (la misma que el formulario) siempre que haya sitio a lo
   ancho; en pantallas mas estrechas se reduce con elegancia. */
.vdjr-cont__foto{position:relative;flex:1 1 340px;max-width:733px;display:flex;align-items:flex-end;justify-content:center;min-height:320px}
.vdjr-cont__fotoResplandor{
  position:absolute;left:50%;bottom:4%;width:70%;aspect-ratio:1/1;max-width:560px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(31,122,255,.4) 0%,rgba(31,122,255,0) 70%);
  filter:blur(6px);pointer-events:none;
  animation:vdjrResplandor 4.5s ease-in-out infinite;
}
.vdjr-cont__foto img{
  position:relative;display:block;width:100%;height:100%;object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));
  animation:vdjrFlotar 5.5s ease-in-out infinite;
  transform-origin:bottom center;
  /* La foto lleva su propio fondo (no es un recorte transparente): se
     desvanece por abajo para que no se note el borde recto contra el
     fondo de la seccion. */
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* ── Efecto al pasar el cursor: destello con separacion de color (glitch) ── */
.vdjr-cont__foto::before,.vdjr-cont__foto::after{
  content:'';position:absolute;inset:0;
  background-image:url(../img/contacto-ralph.webp);background-repeat:no-repeat;
  background-size:contain;background-position:bottom center;
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
  mix-blend-mode:screen;opacity:0;pointer-events:none;transition:opacity .2s;
}
.vdjr-cont__foto::before{filter:hue-rotate(-50deg) saturate(3.5) brightness(1.15)}
.vdjr-cont__foto::after{filter:hue-rotate(140deg) saturate(3.5) brightness(1.15)}
.vdjr-cont__foto:hover::before,.vdjr-cont__foto:hover::after{opacity:.5}
.vdjr-cont__foto:hover::before{animation:vdjrGlitchA .38s steps(2) infinite}
.vdjr-cont__foto:hover::after{animation:vdjrGlitchB .38s steps(2) infinite}
.vdjr-cont__foto:hover{animation:vdjrGlitchTemblor .38s steps(2) infinite}

@keyframes vdjrFlotar{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-16px) rotate(-1deg)}
}
@keyframes vdjrResplandor{
  0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.12)}
}
@keyframes vdjrGlitchA{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-5px,2px)}
  40%{transform:translate(4px,-2px)}
  60%{transform:translate(-3px,1px)}
  80%{transform:translate(3px,-1px)}
}
@keyframes vdjrGlitchB{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(5px,-2px)}
  40%{transform:translate(-4px,2px)}
  60%{transform:translate(3px,-1px)}
  80%{transform:translate(-3px,1px)}
}
@keyframes vdjrGlitchTemblor{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-1px,0)}
  50%{transform:translate(1px,1px)}
  75%{transform:translate(-1px,-1px)}
}
@media (prefers-reduced-motion:reduce){
  .vdjr-cont__foto img,.vdjr-cont__fotoResplandor,.vdjr-cont__foto,.vdjr-cont__foto::before,.vdjr-cont__foto::after{animation:none}
}

/* ── Gestion ───────────────────────────────────────────────── */
.vdjr-cont__gestion{padding:64px var(--margen);border-top:1px solid var(--linea)}
.vdjr-cont__gestionCuerpo{max-width:1100px;margin:0 auto;display:grid;gap:10px}
.vdjr-cont__gestNombre{font-family:'Archivo Black',Archivo,sans-serif;font-size:clamp(20px,2.6vw,28px);line-height:1.15;text-transform:uppercase;letter-spacing:-.4px;margin:6px 0 4px}
.vdjr-cont__gestDir{font-style:normal;display:grid;gap:4px;font-size:16px;line-height:1.6;color:var(--grisTexto)}

@media (max-width:860px){
  .vdjr-cont__formCuerpo{flex-direction:column;gap:8px}
  .vdjr-cont__formulario{padding:56px var(--margen)}
  .vdjr-cont__vias{padding:44px var(--margen)}
  .vdjr-cont__formLeft{flex-basis:auto;align-self:stretch}
  .vdjr-cont__formCaja{padding:26px 20px;max-width:100%}
  .vdjr-cont__foto{order:-1;flex-basis:auto;max-width:100%;height:auto;min-height:0;margin:0 0 28px}
  .vdjr-cont__foto img{width:100%;max-width:220px;height:auto;aspect-ratio:1/1}
  .vdjr-cont__fotoResplandor{width:220px;max-width:220px;height:220px}
}