@font-face {
  font-family: 'Johnson Display';
  font-style: normal;
  font-weight: 700;
  src: url(https://assets.contentstack.io/v3/assets/bltb7c57cef5b058034/bltefd3ff5860fec2e3/JohnsonDisplay-Bold.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: 'Johnson Display';
  font-style: italic;
  font-weight: 700;
  src: url(https://assets.contentstack.io/v3/assets/bltb7c57cef5b058034/blt019ea69023c7c74a/JohnsonDisplay-BoldItalic.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: 'Johnson Display';
  font-style: normal;
  font-weight: 400;
  src: url(https://assets.contentstack.io/v3/assets/bltb7c57cef5b058034/blt8a9f649cdea865d0/JohnsonDisplay-Regular.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: 'Johnson Display';
  font-style: italic;
  font-weight: 400;
  src: url(https://assets.contentstack.io/v3/assets/bltb7c57cef5b058034/blt424bb49993931f64/JohnsonDisplay-RegularItalic.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: 'Johnson Display';
  font-style: normal;
  font-weight: 300;
  src: url(https://assets.contentstack.io/v3/assets/bltb7c57cef5b058034/blt4b6b5d2eebce0e1c/JohnsonDisplay-Light.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: 'Johnson Display';
  font-style: italic;
  font-weight: 300;
  src: url(https://assets.contentstack.io/v3/assets/bltb7c57cef5b058034/bltaa0c6bcf0bb06c41/JohnsonDisplay-LightItalic.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: 'Johnson Text';
  font-style: normal;
  font-weight: 400;
  src: url(https://assets.contentstack.io/v3/assets/bltb7c57cef5b058034/blt7ce92fa381ebc8bb/JohnsonText-Regular.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: 'Johnson Text';
  font-style: normal;
  font-weight: 700;
  src: url(https://assets.contentstack.io/v3/assets/bltb7c57cef5b058034/bltc092b42444fa36e8/JohnsonText-Bold.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: 'Johnson Text';
  font-style: italic;
  font-weight: 400;
  src: url(https://assets.contentstack.io/v3/assets/bltb7c57cef5b058034/bltf4c1a39ad625a78d/JohnsonText-RegularItalic.woff2) format("woff2");
  font-display: swap;
}
@font-face{
  font-family: 'Johnson Text';
  font-style: normal;
  font-weight: 300;
  src: url(https://assets.contentstack.io/v3/assets/bltb7c57cef5b058034/blt4b6b5d2eebce0e1c/JohnsonDisplay-Light.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: 'Johnson Text';
  font-style: italic;
  font-weight: 300;
  src: url(https://assets.contentstack.io/v3/assets/bltb7c57cef5b058034/bltaa0c6bcf0bb06c41/JohnsonDisplay-LightItalic.woff2) format("woff2");
  font-display: swap;
}
:root {
  --black: #000;
  --white: #fff;
  --red500: #eb1700;
  --red600: #cc1400;
  --red700: #ad1100;
  --gray100: #f9f8f7;
  --gray200: #f1efed;
  --gray300: #e8e6e3;
  --gray400: #d5cfc9;
  --gray500: #c1bbb3;
  --gray600: #a39992;
  --gray700: #81766f;
  --gray800: #564c47;
  --gray900: #212121;
  --ink: #212121;
  --ink-soft: #2c2c2c;
  --blue400: #69d0ff;
  --blue500: #0f68b2;
  --blue600: #004685;
  --green400: #53ce76;
  --green500: #328714;
  --green600: #3b5a0d;
  --arial-text: Arial, sans-serif;
  --jnj-text: 'Johnson Text', Helvetica, Arial, sans-serif;
  --jnj-display: 'Johnson Display', Helvetica, Arial, sans-serif;
  --font-awsome: "Font Awesome 6 Free";
}
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: var(--gray100);
  border-radius: 0px;
  border-left: 1px solid var(--gray200);
  padding-left: 2px;
}
::-webkit-scrollbar-thumb {
  background: var(--gray700); 
  border-radius: 10px;
  border: 3px solid var(--gray100);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gray800); 
}
#loading {
  background-color: rgba(255, 255, 255, 0.9);
  position: fixed;
  width: 100%;
  z-index: 1;
}
#loader {
  border: 12px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 12px solid rgba(235, 23, 0, 1);
  width: 70px;
  height: 70px;
  animation: spin 1s linear infinite;
  margin: auto;
  position: fixed;
  top: 45%;
  left: 50%;
  z-index: 1;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
body {
  font-family: var(--jnj-text);
  color: var(--black);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 400;
}
td {
  padding: 0;
}
hr {
   border-top: 1px solid var(--gray200);
   margin-top: 40px;
}
h1, .h1 {
   font-family: var(--jnj-display);
   font-size: 28px;
   margin-bottom: 1rem;
}
h2, .h2 {
  font-family: var(--jnj-display);
  font-size: 20px;
  margin-bottom: 1rem;
}
h3, .h3 {
  font-family: var(--jnj-display);
  font-size: 16px;
  margin: 10px 0;
}
a {
 color: var(--red500);
 text-decoration: underline;
}
a:hover {
 color: var(--red500);
 text-decoration: underline;
}
.breadcrumb {
  background-color: transparent;
  padding: 20px 0px 10px 0px;
  border-bottom: 1px solid var(--gray300);
  margin-bottom: 20px;
}
.breadcrumb a {
  color: var(--gray900);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--red500);
  text-decoration: underline;
}
.breadcrumb .breadcrumb-item.active {
  color: var(--gray700);
}
.badge-pill {
  color: var(--white);
  background-color: var(--green400);
  font-size: x-small;
  font-weight: 100;
  padding: 2px 8px;
  float: inline-end;
  min-width: 60px;
  position: relative;
  top: 4px;
}
.badge-pill.disabled {
  background-color: var(--gray600);
}
.alert {
  border-radius: 0;
  margin: 0px;
  font-size: smaller;
  text-align: center;
}
header {
  background-color: var(--white);
  padding: 25px 65px;
}
header .logo a {
  display: block;
  margin-top: 6px;
  background-repeat: no-repeat;
}
.user-profile .btn-group {
  float: right;
  padding: 0;
}
.user-profile .dropdown-toggle {
  border: 0;
  background-color: transparent;
  outline: transparent;
}
.user-profile .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--white);
  text-align: center;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  vertical-align: middle;
  overflow: hidden;
}
.user-profile .avatar [data-user="initials"] {
  line-height: 32px;
}
.user-profile .avatar [data-user="photo"] {
  width: 32px;
  height: 32px;
  vertical-align: top;
  object-fit: cover;
}
.user-profile .dropdown-menu {
  background-color: var(--white);
  border: 1px solid var(--gray300);
  border-radius: 0;
  font-size: 14px;
  margin-top: 15px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
}
.user-profile .dropdown-menu .avatar {
  width: 48px;
  height: 48px;
  border-radius: 48px;
  line-height: 48px;
  font-size: 24px;
  font-weight: 100;
}
.user-profile .dropdown-menu .user-name {
  display: inline-block;
  font-size: 19px;
  vertical-align: middle;
  line-height: 19px;
}
.user-profile .dropdown-menu a {
  text-decoration: none;
  color: var(--gray800);
}
.user-profile .dropdown-menu a:hover {
  color: var(--black);
}
.user-profile .dropdown-item {
  padding: 5px 15px;
  color: var(--gray800);
}
.user-profile .dropdown-item .avatar [data-user="photo"] {
  width: 48px;
  height: 48px;
}
.user-profile .dropdown-item p {
  display: block;
  font-size: 12px;
  margin-top: 3px;
  color: var(--gray700);
  margin: 0;
}
.user-profile .dropdown-item:hover {
  background-color: transparent;
}
.page-title {
  background-color: var(--white);
  color: var(--gray900);
  padding: 20px 80px 16px;
}
.page-title h1 {
  margin: 0;
  color: var(--gray900);
  font-weight: 700;
}
.page-title h2 {
  margin: 6px 0 0;
  color: var(--gray600);
  font-size: 16px;
  font-weight: 400;
  font-family: var(--jnj-text);
}
.title-bar {
  background-color: var(--white);
  border-bottom: 2px solid var(--gray300);
}
.title-bar h2 {
  margin-bottom: 10px;
}
.box-tabs {
  background-color: var(--white);
  color: var(--gray900);
  padding-left: 80px;
  padding-right: 80px;
}
/* Tabs Mockup/History — estilo sublinhado sobre fundo branco */
.nav-tabs {
  border-bottom: 1px solid var(--gray300);
}
.nav-tabs .nav-link {
  color: var(--gray600);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  margin-right: 28px;
  padding: 10px 2px;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--red500);
  background: transparent;
  border-color: transparent transparent var(--red500);
}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  color: var(--gray900);
  border-color: transparent transparent var(--gray400);
}
.nav-tabs .nav-link.active:focus,
.nav-tabs .nav-link.active:hover {
  color: var(--red500);
  border-bottom-color: var(--red500);
}
.tab-content {
  padding-top: 25px;
}
#pageMockup {
  background-color: var(--gray200);
}
#pageHistory {
  padding-left: 80px;
  padding-right: 80px;
}
#pageHistory li {
  padding-left: 0;
}
#pageHistory li a {
  background-image: url('data:image/png;base64,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');
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: left;
  padding-left: 28px;
  display: inline-block;
  height: 20px;
  padding-top: 3px;
  text-decoration: none;
}
.page-profile {
  padding-left: 65px;
  padding-right: 65px;
}
.page-profile .thumb-image {
  position: relative;
  cursor: pointer;
  display: inline-block;
}
.page-profile .thumb-image [data-user="photo"] {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid var(--gray300);
  object-fit: cover;
}
.page-profile .thumb-image:before {
  font-family: var(--font-awsome);
  content: "\f304";
  position: absolute;
  background-color: var(--gray900);
  color: var(--white);
  padding: 7px;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  font-size: 12px;
  display: block;
  z-index: 1;
  left: 42px;
  top: 42px;
}
.page-profile .thumb-image:hover:before {
  background-color: var(--gray200);
  color: var(--gray900);
}
.page-profile .user-name {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}
.page-profile .user-name h3 {
  margin: 0;
  font-size: 24px;
}
.page-profile .user-name span {
  display: block;
  font-size: 14px;
  color: var(--gray700);
}
.form-group label {
  margin-bottom: 5px;
}
.form-group label .text-danger {
  color: var(--red500);
  margin-left: 5px;
}
form {
  margin-top: 0px;
}
.form-control {
  border: 1px solid var(--gray400);
  border-radius: 3px;
  color: var(--gray900);
  background-color: var(--white);
}
.label-multiselect {
  display: block;
}
.form-group .bootstrap-select .btn {
  border-radius: 3px;
  border-color: var(--gray400);
  background-color: var(--white);
  color: var(--gray900);
}
.bs-placeholder .filter-option-inner-inner {
  color: #444444;
}
.form-control::placeholder,
select.form-control { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--gray900);
  opacity: 1; /* Firefox */
}
.custom-select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M98.9,184.7l1.8,2.1l136,156.5c4.6,5.3,11.5,8.6,19.2,8.6c7.7,0,14.6-3.4,19.2-8.6L411,187.1l2.3-2.6  c1.7-2.5,2.7-5.5,2.7-8.7c0-8.7-7.4-15.8-16.6-15.8v0H112.6v0c-9.2,0-16.6,7.1-16.6,15.8C96,179.1,97.1,182.2,98.9,184.7z" fill="%23666666"/></svg>');
  background-color: var(--white);
  background-repeat: no-repeat;
  background-size: 12px;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--gray900);
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--gray900);
}
.form-control .dropdown-menu.show li.disabled {
  display: none;
}
select.form-control::selected {
  color: var(--gray900);
}
.btn-primary {
  padding: 8px 16px;
  background-color: var(--blue600);
  border: 0;
}
.btn-primary:hover {
  background-color: var(--blue400);
  transition: 0.5s;
}
.btn-secondary {
  padding: 8px 16px;
  background-color: var(--gray600);
  border: 0;
}
.btn-secondary:hover {
  background-color: var(--gray500);
  transition: 0.5s;
}
.btn-outline-secondary {
  color: var(--gray600);
  border-color: var(--gray600);
}
.btn-outline-secondary:hover {
  background-color: var(--gray600);
  border-color: var(--gray600);
  color: var(--white);
  transition: 0.3s;
}
.btn.disabled,
.btn:disabled {
  background-color: var(--gray600);
  opacity: .20;
}

/* Email Configuration Section — card branco clean, recolhível */
.email-config {
  width: auto;
  background: var(--white);
  border: 1px solid var(--gray200);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 24, 40, 0.05);
  margin: 16px 80px 24px;
}

/* Barra de resumo (clicável, sempre visível) */
.email-config__summary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  background: transparent;
  border: none;
  padding: 14px 22px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  border-radius: 16px 16px 0 0;
}
.email-config.is-collapsed .email-config__summary { border-radius: 16px; }
.email-config__summary:hover { background: var(--gray100); }
.email-config__summary:focus { outline: none; }
.email-config__summary:focus-visible { box-shadow: inset 0 0 0 2px rgba(235,23,0,0.25); }
.email-config__summary-ico {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray100); color: var(--gray500); font-size: 13px;
}
.email-config__summary-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-config__summary-text.is-empty { color: var(--gray500); font-weight: 400; }
.email-config__summary-action {
  flex: none; font-size: 12.5px; font-weight: 600; color: var(--red500);
  border: 1px solid var(--gray200); border-radius: 8px; padding: 5px 11px;
}
.email-config__summary-caret { flex: none; color: var(--gray400); font-size: 12px; transition: transform 0.2s; }

/* Estado expandido */
.email-config:not(.is-collapsed) .email-config__summary-action { display: none; }
.email-config:not(.is-collapsed) .email-config__summary-caret { transform: rotate(180deg); }
.email-config.is-collapsed .email-config__body { display: none; }

.email-config__body {
  padding: 2px 24px 22px;
  border-top: 1px solid var(--gray100);
}
.email-config__body section { padding-top: 20px; }

.email-config .form-group {
  margin-bottom: 0;
}
.email-config label {
  display: block;
  font-weight: 700;
  color: var(--gray500);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.email-config label .text-danger { color: var(--red500); }
.email-config .form-control {
  border-radius: 10px;
  border: 1px solid var(--gray300);
  font-size: 14px;
  padding: 11px 14px;
  height: auto;
  color: var(--gray900);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.email-config .form-control:focus {
  border-color: var(--red500);
  box-shadow: 0 0 0 3px rgba(235, 23, 0, 0.12);
}
.email-config small {
  font-size: 11px;
  color: var(--gray500);
}
.email-config .form-group:last-child {
  margin-bottom: 0;
}
/* Grade de campos alinhados + agendamento + rodapé de ações */
.email-config__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; align-items: start; }
.email-config__batch { grid-column: span 2; }
.email-config__batch[hidden] { display: none; }
.email-config__batch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.email-config__foot { display: flex; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--gray100); }

/* Botões ghost (Reset / Clear) */
.email-config #resetEmailConfig,
.email-config #clearAllData {
  border-radius: 10px;
  border: 1px solid var(--gray300);
  background: var(--white);
  color: var(--gray700);
  font-weight: 600;
  font-size: 13px;
  padding: 9px 15px;
  transition: 0.15s;
}
.email-config #resetEmailConfig:hover {
  background: var(--gray100);
  color: var(--gray900);
  border-color: var(--gray400);
}
.email-config #clearAllData:hover {
  background: #fdf0ee;
  border-color: var(--red500);
  color: var(--red500);
}
footer {
  background-color: var(--gray900);
  color: var(--gray100);
  padding: 20px 0;
}
footer p {
  margin-bottom: 0;
  font-size: 11px;
}
footer a {
  color: var(--gray500);
}
footer a:hover {
  color: var(--white);
}
.form-control.is-valid, .was-validated .form-control:valid {
  border-color: #28a745;
  background-image: none;
}
.was-validated .bootstrap-select .selectpicker:invalid + .dropdown-toggle {
  border-color: #b94a48;
  background-color: #fef8f8;
}
.form-control.is-invalid, .was-validated .form-control:invalid {
  background-image: none;
  border-color: #b94a48;
  background-color: #fef8f8;
}
.form-check-input.is-valid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label {
  color: var(--gray900);
}
.custom-control-input:checked~.custom-control-label::before {
  border-color: var(--gray500);
  background-color: var(--gray100);
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23666' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}
.custom-radio .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23666'/%3e%3c/svg%3e");
}
.custom-control-input.is-invalid~.custom-control-label, .was-validated .custom-control-input:invalid~.custom-control-label {
  color: var(--black);
}
.custom-control-input.is-valid~.custom-control-label, .was-validated .custom-control-input:valid~.custom-control-label {
  color: var(--black);
}
.custom-control-input.is-valid~.custom-control-label::before, .was-validated .custom-control-input:valid~.custom-control-label::before {
  border-color: var(--gray400);
}
.custom-control-input.is-valid:checked~.custom-control-label::before, .was-validated .custom-control-input:valid:checked~.custom-control-label::before {
  border-color: var(--gray400);
  background-color: var(--gray200);
}
.custom-control-input:not(:disabled):active~.custom-control-label::before {
  background-color: var(--gray200);
  border-color: var(--gray400);
}
.custom-control {
  padding-left: 1.8rem;
}
.custom-control-input {
  width: 1.25rem;
  height: 1.25rem;
  left: 0.7rem;
}
.custom-control-label::before  {
  width: 20px;
  height: 20px;
  top: 0;
  left: -1.8rem;
  background-color: var(--gray200);
}
.custom-control-label {
  left: 29px;
  line-height: 21px;
}
.custom-control-label::after {
  width: 24px;
  height: 24px;
  top: -0.12rem;
  left: -1.92rem;
}
.custom-checkbox label {
  width: 90%;
}

/* Viewport tabs (Desktop / Mobile) */
.view-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.view-tab {
  border: 1px solid var(--gray400);
  background: var(--white);
  color: var(--gray800);
  border-radius: 20px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}
.view-tab .view-tab-dim {
  font-weight: 400;
  opacity: 0.7;
}
.view-tab:hover {
  border-color: var(--gray600);
}
.view-tab.active {
  background: var(--blue600);
  border-color: var(--blue600);
  color: var(--white);
}
.view-tab.active .view-tab-dim {
  opacity: 0.85;
}

/* Email frame that switches between desktop (600px) and mobile (375px) widths */
.email-frame {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.custom-checkbox .custom-control-label::before {
  border-radius: 3px;
}
.modal .input-group-text {
  border-radius: 3px 0 0 3px;
}
.modal .form-control {
  border-left: 0;
}
#mobile-message {
  display: none;
  text-align: center;
  padding: 40px 24px;
  max-width: 460px;
  margin: 0 auto;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#mobile-message::before {
  content: "J&J";
  width: 64px; height: 64px; border-radius: 18px; margin-bottom: 24px;
  background: linear-gradient(135deg, #eb1700, #b81300);
  color: #fff; font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(235,23,0,0.30);
}
#mobile-message h1 { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0 0 10px; line-height: 1.3; }
#mobile-message h2 { font-size: 15px; font-weight: 400; color: #6b6b6b; margin: 0; line-height: 1.5; }

/* Só o builder (mockup/wizard) permanece desktop-only no mobile. */
@media (max-width: 1264px) {
  .builder-body main { display: none; }
  .builder-body #mobile-message { display: flex; }
}

/* ===== Login / Cadastro — split moderno ===== */
html.login-page, .login-page body { height: 100%; margin: 0; }
.login-page body { display: block; background: var(--white); }
.auth-split { display: flex; min-height: 100vh; }

/* Painel de marca (esquerda) */
.auth-brand {
  position: relative; overflow: hidden;
  flex: 1 1 45%;
  background: linear-gradient(140deg, #ff4127 0%, var(--red500) 45%, var(--red700) 100%);
  color: var(--white);
  display: flex; align-items: center; padding: 64px;
}
.auth-brand__blob { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.10); }
.auth-brand__blob--1 { width: 380px; height: 380px; top: -120px; right: -110px; }
.auth-brand__blob--2 { width: 260px; height: 260px; bottom: -120px; left: -90px; background: rgba(255, 255, 255, 0.07); }
.auth-brand__art { position: absolute; top: 52px; right: 60px; width: 120px; height: 120px; color: rgba(255, 255, 255, 0.4); }
.auth-brand__content { position: relative; z-index: 1; max-width: 440px; }
.auth-brand__logo {
  width: 62px; height: 62px; border-radius: 16px; margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--jnj-display); font-weight: 700; font-size: 20px; color: var(--white);
}
.auth-brand__title { font-family: var(--jnj-display); font-size: 42px; font-weight: 700; line-height: 1.1; margin: 0 0 16px; }
.auth-brand__text { font-size: 16px; opacity: 0.92; margin: 0; line-height: 1.55; }

/* Formulário (direita) */
.auth-form-wrap { flex: 1 1 55%; display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-title { font-family: var(--jnj-display); font-size: 27px; font-weight: 700; color: var(--gray900); margin: 0 0 6px; }
.auth-sub { color: var(--gray600); font-size: 14px; margin: 0 0 28px; }

.login-page .form-group { margin-bottom: 16px; }
.login-page .auth-label { display: block; font-size: 13px; font-weight: 600; color: var(--gray800); margin-bottom: 6px; }
.login-page .form-control {
  border: 1px solid var(--gray300); background: var(--white);
  border-radius: 10px; padding: 11px 14px; font-size: 14px; height: auto;
  color: var(--gray900); font-weight: 400;
}
.login-page .form-control::placeholder { color: var(--gray500); }
.login-page .form-control:focus { border-color: var(--red500); box-shadow: 0 0 0 3px rgba(235, 23, 0, 0.12); }
.login-page .custom-checkbox { opacity: 1; }
.login-page .custom-checkbox label { color: var(--gray700); font-weight: 400; }
.login-page .btn-primary,
.login-page .btn-primary:focus,
.login-page .btn-primary:not(:disabled):not(.disabled):active {
  background: var(--red500); border: none; border-radius: 10px;
  font-weight: 700; padding: 12px; margin-top: 6px;
  box-shadow: 0 6px 16px rgba(235, 23, 0, 0.24);
}
.login-page .btn-primary:hover { background: var(--red600); }
.login-page .invalid-feedback { display: block; width: 100%; color: var(--red500); font-weight: 500; font-size: 13px; margin-top: 10px; }
.login-page a.forgot { color: var(--red600); font-weight: 600; display: inline-block; margin-top: 18px; text-decoration: none; font-size: 14px; }
.login-page a.forgot:hover { color: var(--red700); text-decoration: underline; }
.login-page .login-lang { display: flex; gap: 6px; justify-content: flex-start; margin-top: 34px; }

@media (max-width: 900px) { .auth-brand { display: none; } .auth-form-wrap { flex: 1; } }