:root {
      --brand-950:#06183f;
      --brand-900:#09245c;
      --brand-800:#0a327f;
      --brand-700:#0a48ad;
      --brand-600:#0d61db;
      --brand-500:#1381f1;
      --cyan:#10d5d4;

      --bg:#f5f8fd;
      --surface:rgba(255,255,255,.82);
      --surface-solid:#ffffff;
      --text:#12213d;
      --muted:#6c7b93;
      --line:rgba(19,57,114,.11);
      --shadow:0 24px 70px rgba(17,45,91,.13);
      --shadow-hover:0 28px 80px rgba(15,55,125,.18);
      --radius:28px;
    }

    * { box-sizing:border-box; }
    html { color-scheme: light; }
    body {
      margin:0;
      min-height:100vh;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color:var(--text);
      overflow-x:hidden;
      background:
        radial-gradient(circle at 8% 5%, rgba(19,129,241,.13), transparent 26rem),
        radial-gradient(circle at 92% 10%, rgba(16,213,212,.12), transparent 25rem),
        linear-gradient(180deg,#f9fbff 0%,#f2f6fc 100%);
    }

    body::before {
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.45;
      background-image:
        linear-gradient(rgba(37,87,164,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,87,164,.045) 1px, transparent 1px);
      background-size:40px 40px;
      mask-image:linear-gradient(to bottom, black, transparent 72%);
    }

    .orb {
      position:fixed;
      border-radius:999px;
      filter:blur(3px);
      pointer-events:none;
      opacity:.7;
      z-index:0;
    }
    .orb.one {
      width:280px;height:280px;
      background:radial-gradient(circle,rgba(19,129,241,.18),transparent 68%);
      top:18%;left:-90px;
    }
    .orb.two {
      width:320px;height:320px;
      background:radial-gradient(circle,rgba(16,213,212,.17),transparent 67%);
      right:-110px;bottom:7%;
    }

    a,button { font:inherit; }
    button { -webkit-tap-highlight-color:transparent; }

    .shell {
      position:relative;
      z-index:1;
      width:min(1240px,calc(100% - 36px));
      margin:0 auto;
      min-height:100vh;
      display:flex;
      flex-direction:column;
      padding:24px 0 34px;
    }

    .topbar {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
    }

    .logo-link {
      display:inline-flex;
      align-items:center;
      text-decoration:none;
    }

    .logo {
      width:158px;
      height:auto;
      display:block;
      object-fit:contain;
      filter:drop-shadow(0 7px 14px rgba(17,66,132,.10));
    }

    .top-actions {
      display:flex;
      align-items:center;
      gap:18px;
    }

    .step-mini {
      color:#8190a7;
      font-size:.82rem;
      font-weight:650;
      white-space:nowrap;
    }
    .step-mini b { color:var(--brand-700); }

    .login-link {
      display:inline-flex;
      align-items:center;
      gap:9px;
      color:var(--brand-800);
      font-weight:750;
      text-decoration:none;
      padding:10px 14px;
      border-radius:14px;
      border:1px solid rgba(18,74,157,.10);
      background:rgba(255,255,255,.62);
      backdrop-filter:blur(12px);
      transition:.2s ease;
    }
    .login-link:hover {
      transform:translateY(-1px);
      background:#fff;
      border-color:rgba(18,74,157,.18);
      box-shadow:0 8px 24px rgba(20,66,135,.10);
    }

    main {
      flex:1;
      display:flex;
      flex-direction:column;
      justify-content:center;
      padding:44px 0 20px;
    }

    .hero {
      text-align:center;
      max-width:760px;
      margin:0 auto 34px;
    }

    .kicker {
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.76);
      border:1px solid rgba(17,83,181,.10);
      box-shadow:0 8px 26px rgba(25,68,128,.06);
      color:var(--brand-700);
      font-size:.78rem;
      font-weight:800;
      letter-spacing:.045em;
      text-transform:uppercase;
      backdrop-filter:blur(14px);
    }
    .kicker-dot {
      width:7px;height:7px;border-radius:50%;
      background:linear-gradient(135deg,var(--brand-500),var(--cyan));
      box-shadow:0 0 0 4px rgba(19,129,241,.08);
    }

    h1 {
      margin:16px 0 11px;
      font-size:clamp(2.15rem,4.5vw,3.45rem);
      line-height:1.03;
      letter-spacing:-.055em;
      color:#102141;
    }

    .hero p {
      margin:0 auto;
      max-width:680px;
      color:var(--muted);
      font-size:clamp(.98rem,1.5vw,1.08rem);
      line-height:1.65;
    }

    .progress {
      max-width:560px;
      margin:22px auto 0;
      display:flex;
      align-items:center;
      gap:12px;
    }
    .progress-track {
      flex:1;
      height:7px;
      border-radius:999px;
      background:#e6edf8;
      overflow:hidden;
    }
    .progress-track > span {
      display:block;
      width:33.33%;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--brand-600),var(--cyan));
      box-shadow:0 0 18px rgba(16,175,223,.35);
    }
    .progress-label {
      color:#8694aa;
      font-weight:750;
      font-size:.78rem;
      white-space:nowrap;
    }

    .cards {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:22px;
      align-items:stretch;
    }

    .profile {
      --accent:#1381f1;
      --accent2:#10d5d4;
      position:relative;
      min-height:410px;
      padding:24px;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:var(--surface);
      backdrop-filter:blur(18px);
      box-shadow:var(--shadow);
      cursor:pointer;
      outline:none;
      transition:
        transform .24s ease,
        box-shadow .24s ease,
        border-color .24s ease,
        background .24s ease;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      isolation:isolate;
    }

    .profile::before {
      content:"";
      position:absolute;
      width:180px;height:180px;
      border-radius:50%;
      right:-72px;top:-72px;
      background:radial-gradient(circle, color-mix(in srgb,var(--accent) 18%,transparent), transparent 70%);
      z-index:-1;
      transition:.25s ease;
    }

    .profile::after {
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      pointer-events:none;
      opacity:0;
      background:linear-gradient(
        145deg,
        color-mix(in srgb,var(--accent) 5%,transparent),
        transparent 52%,
        color-mix(in srgb,var(--accent2) 5%,transparent)
      );
      transition:.24s ease;
      z-index:-1;
    }

    .profile:hover {
      transform:translateY(-6px);
      box-shadow:var(--shadow-hover);
      border-color:color-mix(in srgb,var(--accent) 24%,#dce5f3);
    }
    .profile:hover::after { opacity:1; }

    .profile[data-profile="morador"] {
      --accent:#0aa97c;
      --accent2:#11d7b2;
    }
    .profile[data-profile="sindico"] {
      --accent:#6657e8;
      --accent2:#8b73ff;
    }
    .profile[data-profile="porteiro"] {
      --accent:#1766df;
      --accent2:#21a6f7;
    }

    .profile.is-selected {
      transform:translateY(-6px);
      background:rgba(255,255,255,.95);
      border-color:color-mix(in srgb,var(--accent) 55%,white);
      box-shadow:
        0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent),
        0 30px 84px rgba(15,55,125,.19);
    }
    .profile.is-selected::after { opacity:1; }

    .select-check {
      position:absolute;
      top:18px;right:18px;
      width:32px;height:32px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:transparent;
      background:rgba(255,255,255,.76);
      border:1px solid #dbe4f0;
      box-shadow:0 6px 18px rgba(29,65,119,.06);
      transition:.2s ease;
    }
    .profile.is-selected .select-check {
      color:white;
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      border-color:transparent;
      box-shadow:0 9px 24px color-mix(in srgb,var(--accent) 25%,transparent);
    }

    .icon-box {
      width:76px;height:76px;
      border-radius:23px;
      display:grid;
      place-items:center;
      color:var(--accent);
      background:
        linear-gradient(145deg,
          color-mix(in srgb,var(--accent) 12%,white),
          color-mix(in srgb,var(--accent2) 9%,white)
        );
      border:1px solid color-mix(in srgb,var(--accent) 12%,white);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 12px 30px color-mix(in srgb,var(--accent) 10%,transparent);
      margin:3px 0 22px;
    }
    .icon-box svg { width:37px;height:37px; }

    .role-tag {
      align-self:flex-start;
      margin-bottom:9px;
      color:var(--accent);
      font-size:.74rem;
      font-weight:850;
      text-transform:uppercase;
      letter-spacing:.07em;
    }

    .profile h2 {
      margin:0 0 9px;
      color:#172946;
      font-size:1.62rem;
      letter-spacing:-.035em;
    }

    .profile .description {
      margin:0;
      min-height:72px;
      color:#68778e;
      line-height:1.58;
      font-size:.92rem;
    }

    .feature-list {
      list-style:none;
      padding:0;
      margin:20px 0 0;
      display:grid;
      gap:10px;
    }
    .feature-list li {
      display:flex;
      align-items:center;
      gap:9px;
      color:#42536d;
      font-size:.84rem;
      font-weight:620;
    }
    .feature-list svg {
      flex:0 0 auto;
      color:var(--accent);
    }

    .choose {
      margin-top:auto;
      padding-top:22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      color:#66768e;
      font-size:.85rem;
      font-weight:750;
    }
    .choose-bubble {
      width:40px;height:40px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:#f3f6fb;
      color:#7f8da3;
      transition:.2s ease;
    }
    .profile.is-selected .choose {
      color:var(--accent);
    }
    .profile.is-selected .choose-bubble {
      color:white;
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      transform:translateX(2px);
      box-shadow:0 10px 20px color-mix(in srgb,var(--accent) 20%,transparent);
    }

    .bottom {
      margin-top:26px;
      padding:17px 18px;
      border-radius:22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      background:rgba(255,255,255,.58);
      border:1px solid rgba(19,57,114,.08);
      backdrop-filter:blur(14px);
    }

    .hint {
      display:flex;
      align-items:center;
      gap:11px;
      color:#75839a;
      font-size:.86rem;
      line-height:1.45;
    }
    .hint-icon {
      width:35px;height:35px;
      border-radius:12px;
      background:#edf4ff;
      color:var(--brand-600);
      display:grid;
      place-items:center;
      flex:0 0 auto;
    }

    .continue {
      min-width:164px;
      border:0;
      border-radius:16px;
      padding:14px 20px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      color:white;
      font-weight:820;
      cursor:pointer;
      background:linear-gradient(135deg,var(--brand-700),var(--brand-500) 68%,#19b7df);
      box-shadow:0 13px 28px rgba(13,97,219,.24);
      transition:.2s ease;
    }
    .continue:hover:not(:disabled) {
      transform:translateY(-2px);
      box-shadow:0 16px 34px rgba(13,97,219,.30);
    }
    .continue:active:not(:disabled) { transform:translateY(0); }
    .continue:disabled {
      cursor:not-allowed;
      opacity:.42;
      box-shadow:none;
      filter:saturate(.5);
    }

    .sr-only {
      position:absolute;
      width:1px;height:1px;
      padding:0;margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }

    @media (max-width:940px) {
      main { padding-top:34px; }
      .cards {
        grid-template-columns:1fr;
        max-width:650px;
        width:100%;
        margin:0 auto;
      }
      .profile {
        min-height:330px;
      }
      .profile .description { min-height:auto; }
    }

    @media (max-width:620px) {
      .shell {
        width:min(100% - 24px,1240px);
        padding-top:15px;
      }
      .logo { width:132px; }
      .step-mini { display:none; }
      .login-link {
        font-size:.85rem;
        padding:9px 11px;
      }
      main { padding-top:28px; }
      .hero { margin-bottom:25px; }
      h1 { font-size:2.15rem; }
      .progress { margin-top:18px; }
      .profile {
        padding:21px;
        border-radius:24px;
      }
      .bottom {
        flex-direction:column;
        align-items:stretch;
      }
      .continue { width:100%; }
    }

    @media (prefers-reduced-motion:reduce) {
      *,*::before,*::after {
        scroll-behavior:auto!important;
        transition:none!important;
      }
    }

/* Integração Condomit v0.54.0: utiliza a logo real do projeto e preserva o layout de referência. */
.logo { width: 172px; max-height: 72px; object-fit: contain; }
.logo-link { min-height: 56px; }
@media (max-width:620px) { .logo { width: 145px; max-height: 62px; } }


/* ============================================================
   Condomit 055 - seleção de perfil sem etapa/progresso e sem scroll
============================================================ */
.logo { width: 235px; max-height:none; }
.back-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--brand-800);
  font-weight:750;
  text-decoration:none;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(18,74,157,.10);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(12px);
  transition:.2s ease;
}
.back-link:hover {
  transform:translateY(-1px);
  background:#fff;
  border-color:rgba(18,74,157,.18);
  box-shadow:0 8px 24px rgba(20,66,135,.10);
}
.step-mini,.kicker,.progress { display:none !important; }
.shell { padding:14px 0 16px; min-height:100dvh; }
main { padding:12px 0 0; justify-content:flex-start; }
.hero { margin:0 auto 15px; max-width:760px; }
h1 { margin:0 0 7px; font-size:clamp(1.75rem,3vw,2.5rem); }
.hero p { font-size:.92rem; line-height:1.5; max-width:720px; }
.cards { gap:17px; }
.profile { min-height:315px; padding:19px 20px; border-radius:24px; }
.icon-box { width:62px; height:62px; border-radius:19px; margin:1px 0 13px; }
.icon-box svg { width:31px; height:31px; }
.role-tag { margin-bottom:5px; font-size:.68rem; }
.profile h2 { margin-bottom:6px; font-size:1.38rem; }
.profile .description { min-height:58px; line-height:1.45; font-size:.84rem; }
.feature-list { margin-top:12px; gap:7px; }
.feature-list li { font-size:.78rem; }
.choose { padding-top:13px; font-size:.8rem; }
.choose-bubble { width:35px; height:35px; border-radius:12px; }
.bottom { margin-top:14px; padding:11px 14px; border-radius:18px; }
.hint { font-size:.79rem; }
.hint-icon { width:31px; height:31px; border-radius:10px; }
.continue { min-width:150px; padding:11px 17px; border-radius:14px; }

@media (min-width:941px) and (min-height:620px) {
  html, body { height:100%; overflow:hidden; }
  .shell { height:100dvh; }
}
@media (max-width:940px) {
  html, body { overflow-y:auto; }
  .shell { min-height:100dvh; height:auto; padding:14px 0 24px; }
  main { padding-top:14px; }
  .cards { max-width:650px; }
  .profile { min-height:300px; }
}
@media (max-width:620px) {
  .logo { width:175px; max-height:none; }
  .top-actions { gap:8px; }
  .back-link,.login-link { padding:8px 10px; font-size:.78rem; }
  .back-link svg,.login-link svg { width:15px; height:15px; }
  h1 { font-size:1.75rem; }
  .hero p { font-size:.86rem; }
}

/* 058 - logo transparente */
.logo { background: transparent !important; }
.logo-link { background: transparent !important; }
