/* =============================================================================
   WorkHard — Form Experience (página /formulario/, "Clase Gratis")
   =============================================================================
   Se carga SOLO en la página del formulario (is_page('formulario')), ver
   wh_form_enqueue_assets() en el mu-plugin. Es una capa de "skin" sobre el
   markup ESTÁNDAR de Contact Form 7 (no se toca el shortcode ni el template
   del formulario), aplicando el mismo lenguaje visual del resto del sitio:
   fondo oscuro, tarjeta con borde sutil, acento verde neón (#00eb00),
   tipografía Nunito, inputs redondeados con foco en verde.
   ============================================================================= */

body.page-id-131516{
  --wh-green:#00eb00;
  --wh-ink:#0a0a0a;
  --wh-surface:#141414;
  --wh-surface-2:#1f1f1f;
}

/* ---------- Columna izquierda: título + intro ---------- */
body.page-id-131516 .wpb_column.col-lg-4 h3,
body.page-id-131516 .wpb_column.col-lg-4 .vc_custom_heading{
  /* Misma tipografia de titulos que el resto del sitio (h1/h2 del home,
     encabezados de checkout, etc): Krona One. */
  font-family:'Krona One', sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-.01em;
  font-size:clamp(30px, 4vw, 44px) !important;
  line-height:1.15 !important;
}
body.page-id-131516 .wpb_column.col-lg-4 .wpb_wrapper > .vc_custom_heading{
  position:relative;
  padding-bottom:20px;
  margin-bottom:6px;
}
body.page-id-131516 .wpb_column.col-lg-4 .wpb_wrapper > .vc_custom_heading::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:46px; height:3px;
  border-radius:3px;
  background:var(--wh-green);
  box-shadow:0 0 14px 2px rgba(0,235,0,.5);
}
body.page-id-131516 .wpb_column.col-lg-4 .wpb_text_column p{
  font-family:'Nunito', sans-serif;
  font-size:19px;
  line-height:1.65;
  color:rgba(255,255,255,.65);
  max-width:400px;
}
/* Se elimina el icono de Instagram debajo del parrafo (uncode_socials). */
body.page-id-131516 .wpb_column.col-lg-4 .uncode-vc-social{
  display:none !important;
}

/* ---------- Columna derecha: tarjeta del formulario ---------- */
body.page-id-131516 .wpb_column.col-lg-8{
  /* OJO: nunca forzar display:flex acá. Uncode arma esta columna como
     table-cell (.uncell) para su sistema de alineación vertical propio —
     convertirla a flex rompe el algoritmo de ancho de la tabla y la
     columna colapsa a un ancho minusculo (mismo tipo de bug que la
     galeria sticky de producto). Se deja con su layout nativo. */
  padding-top:40px !important;
  padding-bottom:40px !important;
}
body.page-id-131516 .wpb_column.col-lg-8 .wpb_wrapper{
  width:100%;
  max-width:640px;
}
body.page-id-131516 .wpcf7{
  display:block;
  background:var(--wh-surface);
  border:1px solid var(--wh-surface-2);
  border-radius:22px;
  padding:36px 34px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03), 0 26px 60px rgba(0,0,0,.4);
}
body.page-id-131516 .wpb_column.col-lg-8 > .wpb_wrapper > .wpb_text_column{
  margin-top:16px;
}
body.page-id-131516 .wpb_column.col-lg-8 > .wpb_wrapper > .wpb_text_column p{
  font-family:'Nunito', sans-serif;
  font-size:12.5px;
  line-height:1.6;
  color:rgba(255,255,255,.4);
  padding:0 2px;
}

/* ---------- Campos del formulario ---------- */
body.page-id-131516 .wpcf7-form p{
  margin:0 0 20px;
}
body.page-id-131516 .wpcf7-form p:last-of-type{
  margin-bottom:0;
}
body.page-id-131516 .wpcf7-form label{
  display:block;
  font-family:'Nunito', sans-serif;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
body.page-id-131516 .wpcf7-form label br{
  display:none;
}
body.page-id-131516 .wpcf7-form-control-wrap{
  display:block;
  margin-top:9px;
}
body.page-id-131516 .wpcf7-form input.wpcf7-form-control,
body.page-id-131516 .wpcf7-form select.wpcf7-form-control,
body.page-id-131516 .wpcf7-form textarea.wpcf7-form-control{
  width:100%;
  box-sizing:border-box;
  display:block;
  background:var(--wh-ink) !important;
  border:1px solid var(--wh-surface-2) !important;
  color:#ffffff !important;
  font-family:'Nunito', sans-serif;
  font-size:15px;
  padding:13px 16px !important;
  border-radius:12px !important;
  transition:.2s ease;
}
body.page-id-131516 .wpcf7-form input.wpcf7-form-control::placeholder,
body.page-id-131516 .wpcf7-form textarea.wpcf7-form-control::placeholder{
  color:rgba(255,255,255,.32);
}
body.page-id-131516 .wpcf7-form input.wpcf7-form-control:hover,
body.page-id-131516 .wpcf7-form select.wpcf7-form-control:hover{
  border-color:rgba(0,235,0,.4) !important;
}
body.page-id-131516 .wpcf7-form input.wpcf7-form-control:focus,
body.page-id-131516 .wpcf7-form select.wpcf7-form-control:focus{
  outline:none;
  border-color:var(--wh-green) !important;
  box-shadow:0 0 0 3px rgba(0,235,0,.16);
}
body.page-id-131516 .wpcf7-form select.wpcf7-form-control{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300eb00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  padding-right:40px !important;
}
body.page-id-131516 .wpcf7-form input.wpcf7-not-valid,
body.page-id-131516 .wpcf7-form select.wpcf7-not-valid{
  border-color:#ff5c5c !important;
}
body.page-id-131516 .wpcf7-not-valid-tip{
  display:block;
  margin-top:6px;
  font-family:'Nunito', sans-serif;
  font-size:12px;
  font-weight:600;
  color:#ff8080 !important;
}

/* ---------- Botón enviar ---------- */
body.page-id-131516 .wpcf7-form input[type="submit"]{
  display:block;
  width:100%;
  margin-top:6px;
  background:var(--wh-green) !important;
  color:var(--wh-ink) !important;
  font-family:'Nunito', sans-serif;
  font-weight:800 !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:13.5px !important;
  border:none !important;
  border-radius:14px !important;
  padding:16px 24px !important;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 0 0 3px rgba(0,235,0,.1), 0 0 30px 4px rgba(0,235,0,.35);
}
body.page-id-131516 .wpcf7-form input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 4px rgba(0,235,0,.14), 0 0 40px 8px rgba(0,235,0,.5);
}
body.page-id-131516 .wpcf7-form input[type="submit"]:disabled{
  opacity:.5; cursor:not-allowed; transform:none;
}
body.page-id-131516 .wpcf7-spinner{
  margin-left:10px;
}

/* ---------- Mensaje de respuesta (errores) ----------
   El popup de éxito lo maneja form-experience.js — este bloque de CF7 se
   deja SOLO para mostrar errores de validación con estilo acorde. */
body.page-id-131516 .wpcf7-response-output{
  margin:18px 0 0 !important;
  padding:12px 16px !important;
  border-radius:10px !important;
  font-family:'Nunito', sans-serif;
  font-size:13px;
  border:1px solid rgba(255,92,92,.4) !important;
  color:#ff9d9d !important;
  background:rgba(255,92,92,.08);
}
body.page-id-131516 .wpcf7-form.sent .wpcf7-response-output{
  border-color:rgba(0,235,0,.4) !important;
  color:var(--wh-green) !important;
  background:rgba(0,235,0,.08);
}

/* ---------- Popup de confirmación (ver form-experience.js) ---------- */
.wh-form-modal-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  z-index:99999;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.wh-form-modal-overlay.wh-form-modal-active{
  opacity:1;
  pointer-events:auto;
}
.wh-form-modal{
  position:relative;
  width:100%;
  max-width:440px;
  background:#141414;
  border:1px solid #1f1f1f;
  border-radius:22px;
  padding:38px 32px 32px;
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.97);
  transition:transform .3s ease;
}
.wh-form-modal-overlay.wh-form-modal-active .wh-form-modal{
  transform:translateY(0) scale(1);
}
.wh-form-modal-close{
  position:absolute;
  top:14px; right:14px;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid #1f1f1f;
  background:#0a0a0a;
  color:rgba(255,255,255,.6);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  transition:.2s ease;
}
.wh-form-modal-close:hover{
  color:#00eb00;
  border-color:rgba(0,235,0,.4);
}
.wh-form-modal-icon{
  width:56px; height:56px;
  margin:0 auto 18px;
  border-radius:50%;
  background:rgba(0,235,0,.12);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px rgba(0,235,0,.06);
}
.wh-form-modal-icon svg{ width:26px; height:26px; }
.wh-form-modal h3{
  font-family:'Nunito', sans-serif;
  font-weight:900;
  font-size:21px;
  color:#ffffff;
  margin:0 0 14px;
  line-height:1.3;
}
.wh-form-modal p{
  font-family:'Nunito', sans-serif;
  font-size:14.5px;
  line-height:1.65;
  color:rgba(255,255,255,.65);
  margin:0 0 26px;
}
.wh-form-modal p strong{ color:#ffffff; }
.wh-form-modal-whatsapp{
  display:inline-flex;
  align-items:center; justify-content:center; gap:10px;
  width:100%;
  box-sizing:border-box;
  background:#25D366;
  color:#ffffff !important;
  text-decoration:none !important;
  font-family:'Nunito', sans-serif;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:13px;
  padding:15px 20px;
  border-radius:14px;
  box-shadow:0 0 0 5px rgba(37,211,102,.1), 0 0 26px 4px rgba(37,211,102,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wh-form-modal-whatsapp:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 7px rgba(37,211,102,.14), 0 0 34px 6px rgba(37,211,102,.5);
}
.wh-form-modal-whatsapp svg{ width:18px; height:18px; flex:none; }

/* ---------- Responsive ---------- */
@media (max-width:767px){
  body.page-id-131516 .wpcf7{ padding:28px 22px; border-radius:18px; }
  .wh-form-modal{ padding:32px 24px 26px; }
}