/*! Vaporex Design · vx-contact */

.vx-contact.contact{position:relative;margin-top:var(--vx-sp);padding:clamp(56px,7vw,96px) 0;background:var(--vx-blue);color:#fff;overflow:hidden}
.vx-contact.contact .vapor::before,.vx-contact.contact .vapor::after{background:radial-gradient(closest-side,rgba(110,193,228,.5),transparent 70%)}
.vx-contact .contact__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,100px);align-items:start}
.vx-contact.contact .h2{color:#fff}
.vx-contact.contact .h2 em{color:var(--vx-sky)}
.vx-contact.contact .sec-head__eyebrow,.vx-contact.contact .sec-head__note{color:var(--vx-sky)}
.vx-contact.contact .sec-head__desc{color:rgba(255,255,255,.78)}
.vx-contact .contact__head{position:relative;z-index:1}
.vx-contact .contact__copy{padding-top:0}
.vx-contact .contact__copy .sec-head{margin-bottom:32px}
.vx-contact .contact__data{font-style:normal;display:grid;gap:6px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2);font-size:var(--vx-fz);color:rgba(255,255,255,.85)}
.vx-contact .contact__data a:hover{text-decoration:underline}
@media (max-width:860px){
  .vx-contact .contact__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .vx-contact.contact{padding:56px 0}
}


/* ---- ajustes para WordPress/Elementor ---- */
.vx-contact .form .vx-editor-notice{margin:0}

/* ---- Formulario propio de cada página (campo «Formulario»: «Propio de esta página») ----
   El contenedor con la clase vx-contact-sec hace de sección (fondo, vapor y rejilla). Dentro van
   este widget, que solo pinta la columna de texto, y el widget Formulario de Elementor Pro con
   las clases vx-form vx-form-card. */
.e-con.vx-contact-sec{position:relative;overflow:hidden;display:grid !important;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,100px) !important;align-items:start;margin-top:var(--vx-sp) !important;margin-bottom:0 !important;padding:clamp(56px,7vw,96px) max(var(--vx-gutter),calc((100% - var(--vx-wrap))/2)) !important;background:var(--vx-blue);color:#fff}
.e-con.vx-contact-sec>.elementor-element{position:relative;z-index:1;width:auto !important;max-width:none !important;min-width:0;margin:0 !important;align-self:start}
.e-con.vx-contact-sec::before,.e-con.vx-contact-sec::after{content:"";display:block;position:absolute;z-index:0;inset:auto;border:0;border-radius:50%;opacity:1;mix-blend-mode:normal;pointer-events:none;filter:blur(60px);background:radial-gradient(closest-side,rgba(110,193,228,.5),transparent 70%);animation:vx-drift 22s ease-in-out infinite alternate;transition:none}
.e-con.vx-contact-sec::before{width:52vw;height:52vw;max-width:760px;max-height:760px;top:-18%;right:-8%}
.e-con.vx-contact-sec::after{width:36vw;height:36vw;max-width:520px;max-height:520px;bottom:6%;left:-10%;animation-delay:-11s;animation-duration:28s}
.e-con.vx-contact-sec .vx-contact.contact--col{margin:0;padding:0;background:none;overflow:visible;position:static}
/* Si el widget queda fuera de ese contenedor, sigue viéndose como una sección azul. */
.vx-contact.contact--col{padding-inline:var(--vx-gutter)}
@media (prefers-reduced-motion:reduce){
  .e-con.vx-contact-sec::before,.e-con.vx-contact-sec::after{animation:none}
}
@media (max-width:860px){
  .e-con.vx-contact-sec{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .e-con.vx-contact-sec{padding-top:56px !important;padding-bottom:56px !important}
}
/* Solo en el editor: aviso si falta el contenedor con la clase vx-contact-sec. */
.elementor-editor-active .elementor-widget-vx-contact>.contact--col::after{content:"Formulario propio: este widget va dentro de un contenedor con la clase vx-contact-sec, con el widget Formulario al lado. Lo más fácil: inserta la plantilla «Vaporex · Bloque contacto con formulario».";display:block;margin-top:24px;padding:12px 14px;border:1px dashed rgba(255,255,255,.6);border-radius:6px;font:500 14px/1.5 var(--vx-f-body);color:#fff}
.elementor-editor-active .vx-contact-sec>.elementor-widget-vx-contact>.contact--col::after{content:none;display:none}