/* ========================================================================= Fractionals - Encuesta Pagina: /proyectos/fractionals/encuesta La maquetacion y el estilo viven en Elementor (contenedores, headings, botones y los controles de Estilo del widget Form). Aqui SOLO queda lo que el widget de formulario no expone como control nativo: 1. Visibilidad del panel segun ?perfil (la escribe el script del ). 2. Opciones de respuesta como tarjetas seleccionables — Elementor pinta los radios como inputs sueltos y no hay control para convertirlos en pills. 3. Cabecera de la barra de progreso (paso + %), que inyecta survey.js. Todo lo demas (colores, tipografias, bordes, botones) se edita en Elementor. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Visibilidad por perfil El atributo data-frs-perfil lo escribe un script inline en el (ver functions.php) ANTES del primer pintado, para que no se vea el selector ni el formulario equivocado mientras carga survey.js. ------------------------------------------------------------------------- */ .frs__panel { display: none; } html[data-frs-perfil="propietario"] .frs #frs-propietario, html[data-frs-perfil="comprador"] .frs #frs-comprador { display: flex; } html[data-frs-perfil="propietario"] .frs #frs-chooser, html[data-frs-perfil="comprador"] .frs #frs-chooser { display: none; } /* Sin JavaScript el selector sigue funcionando: sus opciones son enlaces con ?perfil=..., y el panel se muestra por el atributo del . */ /* Circulo indicador de las opciones del selector de perfil, para que casen con las respuestas del formulario. */ .frs .frs__option .elementor-button-content-wrapper { justify-content: flex-start; gap: 14px; } .frs .frs__option .elementor-button-text { flex: 0 1 auto; text-align: left; } .frs .frs__option .elementor-button-content-wrapper::before { content: ""; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); } /* ------------------------------------------------------------------------- 2. Opciones de respuesta como tarjetas ------------------------------------------------------------------------- */ .frs .elementor-field-subgroup { display: flex; flex-direction: column; gap: 12px; } .frs .elementor-field-subgroup .elementor-field-option { display: block; width: 100%; margin: 0; } .frs .elementor-field-subgroup input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .frs .elementor-field-subgroup input[type="radio"] + label { display: flex; align-items: center; gap: 14px; width: 100%; background: #013049; border: 1px solid rgba(255, 255, 255, .14); cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1.4; padding: 18px 20px; border-radius: 12px; transition: border-color .2s ease, background .2s ease; } .frs .elementor-field-subgroup input[type="radio"] + label::before { content: ""; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } .frs .elementor-field-subgroup input[type="radio"]:hover + label { border-color: rgba(255, 158, 24, .55); } .frs .elementor-field-subgroup input[type="radio"]:focus-visible + label { outline: 2px solid #ff9e18; outline-offset: 3px; } .frs .elementor-field-subgroup input[type="radio"]:checked + label { border-color: #ff9e18; background: rgba(255, 158, 24, .12); } .frs .elementor-field-subgroup input[type="radio"]:checked + label::before { background: #ff9e18; border-color: #ff9e18; box-shadow: inset 0 0 0 4px #013049; } /* Los datos de contacto son etiquetas normales, no titulares de pregunta. (label_typography en Elementor aplica a TODAS las etiquetas del formulario.) */ .frs .elementor-field-type-text > .elementor-field-label, .frs .elementor-field-type-tel > .elementor-field-label, .frs .elementor-field-type-email > .elementor-field-label { font-size: 12.5px; font-weight: 700; line-height: 1.4; letter-spacing: 0; margin-bottom: 7px; } /* Aceptacion de Habeas Data: caja con borde, sin control nativo. */ .frs .elementor-field-type-acceptance .elementor-field-subgroup { gap: 0; } .frs .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; padding: 14px 16px; transition: border-color .2s ease; } .frs .elementor-field-type-acceptance input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: #ff9e18; cursor: pointer; } .frs .elementor-field-type-acceptance label { font-size: 13px; line-height: 1.5; font-weight: 400; letter-spacing: 0; cursor: pointer; } .frs .elementor-field-type-acceptance:focus-within .elementor-field-option { border-color: #ff9e18; } /* ------------------------------------------------------------------------- 3. Barra de progreso y su cabecera ------------------------------------------------------------------------- */ .frs__progressHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9fb3bf; font-weight: 700; } .frs .e-form__indicators { margin-bottom: 34px; gap: 0; } .frs .e-form__indicators__indicator__progress { height: 4px; background: rgba(255, 255, 255, .1); border-radius: 100px; overflow: hidden; } .frs .e-form__indicators__indicator__progress__meter { background: #ff9e18; color: transparent; /* el % se muestra en la cabecera, no dentro de la barra */ font-size: 0; border-radius: 100px; transition: width .35s cubic-bezier(.2, .7, .2, 1); } /* Botones "Atras" / "Continuar" en fila: Elementor los ajusta a columna. */ .frs .e-form__buttons { display: flex; align-items: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; padding: 0; } .frs .e-form__buttons__wrapper { flex: 0 0 auto; width: auto; padding: 0; margin: 0; } .frs .e-form__buttons__wrapper__button { flex: 0 0 auto; } .frs .elementor-field-type-previous { order: 1; } .frs .elementor-field-type-next, .frs .elementor-field-type-submit { order: 2; } .frs .e-form__buttons__wrapper__button-previous { background: none; border: 1px solid rgba(255, 255, 255, .14); color: #f5f7f8; font-weight: 600; padding: 14px 22px; } .frs .e-form__buttons__wrapper__button-previous:hover { border-color: #ff9e18; color: #ff9e18; } .frs .elementor-message-success { background: rgba(255, 158, 24, .12); border: 1px solid #ff9e18; border-radius: 12px; padding: 20px 22px; margin-top: 18px; } /* ========================================================================= MOVIL <=767px ========================================================================= */ @media (max-width: 767px) { .frs .elementor-field-subgroup input[type="radio"] + label { font-size: 15px; padding: 16px 17px; gap: 12px; } .frs .elementor-field-subgroup input[type="radio"] + label::before { width: 22px; height: 22px; } /* Los datos de contacto pasan a una sola columna */ .frs .elementor-field-group.elementor-col-50 { width: 100%; } /* Botones a lo ancho: area tactil mas comoda que el pill de escritorio */ .frs .e-form__buttons { flex-direction: column-reverse; align-items: stretch; } .frs .e-form__buttons__wrapper { flex: 1 1 auto; width: 100%; } .frs .e-form__buttons__wrapper__button, .frs .elementor-button[type="submit"] { width: 100%; } } @media (prefers-reduced-motion: reduce) { .frs *, .frs *::before, .frs *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }