.elementor-7690 .elementor-element.elementor-element-a5b86b4{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-7690 .elementor-element.elementor-element-8184f35{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:5px 0px;--row-gap:5px;--column-gap:0px;--border-radius:25px 25px 25px 25px;--margin-top:50px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-7690 .elementor-element.elementor-element-8184f35.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-7690 .elementor-element.elementor-element-ffb601f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-7690 .elementor-element.elementor-element-ffb601f .elementor-heading-title{font-family:"Bricolage Grotesque", Sans-serif;font-size:30px;font-weight:600;color:#000000;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-7690 .elementor-element.elementor-element-2f9bac1 img{width:40%;}.elementor-7690 .elementor-element.elementor-element-9363a81{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--border-radius:25px 25px 25px 25px;}.elementor-7690 .elementor-element.elementor-element-8955a40{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}body.elementor-page-7690:not(.elementor-motion-effects-element-type-background), body.elementor-page-7690 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://jovejobs.com/wp-content/uploads/2026/02/pexels-a-darmel-7710148-1-2048x1365.jpg");background-position:-123px -90px;background-repeat:no-repeat;background-size:auto;}@media(max-width:1024px){body.elementor-page-7690:not(.elementor-motion-effects-element-type-background), body.elementor-page-7690 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}}@media(min-width:768px){.elementor-7690 .elementor-element.elementor-element-8184f35{--width:67%;}}@media(max-width:767px){.elementor-7690 .elementor-element.elementor-element-8184f35{--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body.elementor-page-7690:not(.elementor-motion-effects-element-type-background), body.elementor-page-7690 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}}/* Start custom CSS for shortcode, class: .elementor-element-8955a40 *//* =========================================
   ESTILOS FORMULARIO EMPRESAS (JoveJobs)
   ========================================= */

/* Carga de fuente */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600&display=swap');

:root {
  --jj-black: #000;
  --jj-gray: #666;
  --jj-border: #D9D9D9;
  --jj-bg: #fff;
  --jj-danger: #d11;
  --jj-focus-shadow: rgba(0,0,0,0.18);
}

.jj-form {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 400;
  color: #000;
  box-sizing: border-box;
}

/* ===== STEPPER ===== */
.jj-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 32px;
  user-select: none;
}
.jj-stepper .jj-dot {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #E6E6E6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: #fff;
  color: #000;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  font-weight: 600;
  transition: all 0.3s ease;
}
.jj-stepper .jj-line {
  width: 92px;
  height: 2px;
  background: #E6E6E6;
  margin: 0 14px;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.jj-dot.is-active, .jj-dot.is-done {
  background: var(--jj-black);
  border-color: var(--jj-black);
  color: #fff;
  box-shadow: none;
}
.jj-line.is-done { background: var(--jj-black); }

/* ===== LAYOUT & STEPS ===== */
.jj-step { display: none; }
.jj-step.is-active { 
  display: grid; 
  gap: 20px; /* Reducido ligeramente de 24px */
  animation: jjFadeIn 0.4s ease; 
}

@keyframes jjFadeIn { 
  from { opacity: 0; transform: translateY(10px); } 
  to { opacity: 1; transform: translateY(0); } 
}

/* ===== CAMPOS (Inputs) - ALTURA REDUCIDA ===== */
.jj-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.jj-field label {
  font-size: 14px;
  color: #000;
  margin-bottom: 6px; /* Reducido de 8px */
  font-weight: 500;
}

.jj-field input:not([type="checkbox"]),
.jj-field select,
.jj-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px; /* Reducido de 14px para menor altura */
  border: 1px solid var(--jj-border);
  border-radius: 12px;
  font-size: 15px;
  color: #000;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}

.jj-field input:focus,
.jj-field select:focus,
.jj-field textarea:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 0 3px var(--jj-focus-shadow);
}

.jj-field .jj-help { font-size: 12px; color: var(--jj-gray); margin-top: 4px; }
.jj-field .jj-error { font-size: 12px; color: var(--jj-danger); margin-top: 4px; display: none; font-weight: 500; }

/* ===== CHECKBOX / PRIVACIDAD ===== */
.jj-privacy-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
}
.jj-privacy-label input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: #000; cursor: pointer; margin: 0;
}

/* ===== BOTONES ===== */
.jj-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.jj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 12px 44px; /* Reducido de 14px para armonía visual */
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 15px;
  border: 1px solid #000;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  text-decoration: none;
}

.jj-btn:hover, .jj-btn:focus {
  background: #FF16D4; 
  border-color: #FF16D4;
  color: #FFF;
  transform: translateY(-1px);
}

.jj-btn.jj-btn-secondary {
  background: #FFF;
  color: #000;
  border: 1px solid #E6E6E6;
}
.jj-btn.jj-btn-secondary:hover {
  background: #000; color: #fff; border-color: #000;
}

.jj-btn:disabled { 
  opacity: 0.6; 
  cursor: not-allowed; 
  transform: none; 
}

/* ===== UPLOAD & PREVIEW ===== */
.jj-logo-preview { margin-top: 15px; text-align: center; }
.jj-logo-preview img {
  width: 120px; height: 120px; /* Reducido un poco */
  object-fit: contain;
  border: 1px solid #eee; border-radius: 12px; padding: 8px;
  background: #f9f9f9;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .jj-form { padding: 0 16px; }
  .jj-stepper .jj-line { width: 40px; }
  .jj-actions { flex-direction: column; align-items: stretch; }
  .jj-btn { width: 100%; }
}

/* Contenedor de la previsualización: Centrado y limpio */
.jj-logo-preview {
    margin-top: 15px;
    display: none; /* Se activa con JS via flex/block */
    flex-direction: column;
    align-items: center; /* Centra la imagen y el botón */
    gap: 15px;
    border: 1px dashed #ccc; /* Un borde sutil para delimitar el área */
    padding: 20px;
    border-radius: 8px;
    background-color: #fafafa;
}

/* Imagen del logo */
#jjLogoImg {
    max-width: 200px; /* Un poco más grande para ver bien el logo */
    max-height: 200px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ESTILO DEL BOTÓN QUITAR 
   Forzamos que herede las propiedades del botón principal (.jj-btn)
   pero ajustamos el ancho para que no ocupe toda la pantalla si no quieres.
*/
#jjLogoRemove {
    /* Aseguramos que use los colores del botón principal */
    background-color: #000000; /* Color de fondo del botón principal */
    color: #ffffff;            /* Color de texto del botón principal */
    border: none;
    
    /* Mismas dimensiones/padding que el botón principal */
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px; /* O el radius que tenga tu tema */
    cursor: pointer;
    transition: opacity 0.2s ease;
    
    /* Opcional: Si quieres que sea igual de ancho que el de 'Crear perfil', pon width: 100% */
    width: auto; 
    min-width: 200px; /* Para que tenga presencia */
}

#jjLogoRemove:hover {
    opacity: 0.85; /* Efecto hover igual al principal */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8184f35 */.elementor-7690 .elementor-element.elementor-element-8184f35{
  /* GLASSMORPHISM REAL */
    background: rgba(255, 255, 255, 0.35); /* menos opaco */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}/* End custom CSS */