:root{
      --bg:#DCEFFF;
      --card:#FFFFFF;
      --stroke:#E7EAF2;
      --stroke-strong:#D9DEE9;
      --text:#121826;
      --muted:#556074;

      --primary:#3B82F6;
      --primary2:#2563EB;

      --wa1:#22C55E;
      --wa2:#16A34A;

      --radius:22px;
      --shadow:0 12px 28px rgba(16,24,40,.08);

      /* ============================================================
         ✅ VELOCIDADE DO CARROSSEL (LOOP INFINITO)
         Quanto MAIOR o tempo (s), MAIS LENTO o carrossel.
         ============================================================ */
      --marqueeDuration: 45s; /* <<< AJUSTE AQUI */
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(900px 420px at 20% 0%, rgba(59,130,246,.18), transparent 60%),
        radial-gradient(800px 520px at 90% 10%, rgba(37,99,235,.14), transparent 60%),
        var(--bg);
    }

    /* ===== BANNERS FLUTUANTES (apenas desktop) ===== */
    .floating-banner{ display:none; }
    @media (min-width: 1100px){
      .floating-banner{
        display:block;
        position:fixed;
        top:110px;
        width:240px;
        height:520px;
        border-radius:22px;
        border:2px solid rgba(37,99,235,.18);
        box-shadow: 0 18px 55px rgba(16,24,40,.12);
        overflow:hidden;
        background:#fff;
        z-index:5;
        animation: floaty 4.5s ease-in-out infinite;
      }
      .floating-banner.left{ left:24px; }
      .floating-banner.right{ right:24px; animation-delay: .8s; }
      .floating-banner a{ display:block; width:100%; height:100%; text-decoration:none; color:inherit; }
      .floating-banner .img{ width:100%; height:100%; background-size:cover; background-position:center; filter:saturate(1.05); }
      .floating-banner .overlay{
        position:absolute; inset:auto 0 0 0;
        padding:14px;
        background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
        color:#fff; font-weight:900; letter-spacing:.2px;
      }
      .floating-banner .overlay small{ display:block; margin-top:4px; font-weight:700; opacity:.85; }
      @keyframes floaty{ 0%,100%{ transform: translateY(0px);} 50%{ transform: translateY(-10px);} }
    }

    /* ===== Topbar ===== */
    header{
      position:sticky; top:0; z-index:10;
      background: rgba(220,239,255,.86);
      backdrop-filter: blur(12px);
      border-bottom:1px solid rgba(231,234,242,.95);
    }
    .topbar{
      width:min(980px,92vw);
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:14px 0;
    }
    .brand{display:flex; align-items:center; gap:12px; min-width:0;}
    .brand-link{text-decoration:none; color:inherit;}
    .brand .icon{
      width:40px;height:40px;border-radius:14px;
      display:grid; place-items:center;
      background: linear-gradient(135deg,var(--primary),var(--primary2));
      color:#fff; font-weight:900;
      box-shadow:0 10px 24px rgba(37,99,235,.18);
    }
    .brand .t1{font-weight:900; letter-spacing:-.2px; line-height:1.15}
    .brand .t2{font-size:.88rem; color:var(--muted); line-height:1.25}
    .actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}

    .btn{
      height:42px; padding:0 14px;
      border-radius:14px;
      font-weight:900;
      text-decoration:none;
      display:inline-flex; align-items:center; justify-content:center;
      border:1px solid transparent;
      cursor:pointer;
      white-space:nowrap;
      user-select:none;
    }
    .btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2)); color:#fff;}
    .btn.ghost{background:#fff; border-color:var(--stroke); color:var(--text);}
    .btn.whatsapp{
      background: linear-gradient(135deg, var(--wa1), var(--wa2));
      color:#fff;
      animation: whatsappPulse 1.8s ease-in-out infinite;
      box-shadow:0 0 0 0 rgba(34,197,94,.35);
    }
    @keyframes whatsappPulse{
      0%, 100%{
        filter:brightness(1);
        box-shadow:0 0 0 0 rgba(34,197,94,.35);
      }
      50%{
        filter:brightness(1.18);
        box-shadow:0 0 0 8px rgba(34,197,94,0);
      }
    }
    .btn:disabled{opacity:.65; cursor:not-allowed;}

    /* ===== Layout ===== */
    .wrap{ width:min(980px,92vw); margin:0 auto; padding:18px 0 70px; }
    .hero{ padding:18px 0 8px; text-align:center; }
    .hero h1{ margin:0 0 8px; font-size: clamp(1.5rem,2.6vw,2.2rem); letter-spacing:-.6px; }
    .hero p{ margin:0 auto; max-width:720px; color:var(--muted); line-height:1.55; }

    form.filters{
      margin:14px auto 0;
      width:min(920px,100%);
      display:grid;
      grid-template-columns: 1.3fr .9fr .8fr auto;
      gap:10px;
      background:#fff;
      border:1px solid var(--stroke);
      border-radius:var(--radius);
      padding:12px;
      box-shadow:var(--shadow);
    }
    input, select{
      height:46px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background:#fff;
      color:var(--text);
      padding:0 12px;
      outline:none;
    }
    input:focus, select:focus{
      border-color: rgba(59,130,246,.65);
      box-shadow:0 0 0 4px rgba(59,130,246,.14);
    }
    .hint{ margin-top:8px; font-size:.82rem; color:var(--muted); }

    .grid{ margin-top:18px; display:flex; flex-direction:column; gap:14px; align-items:center; }
    .card{
      width:min(820px,100%);
      background:var(--card);
      border:2px solid var(--stroke-strong);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:18px;
    }

    .head{display:flex; gap:12px; align-items:flex-start;}

    /* Avatar tipográfico (card) */
 /* Avatar do card (imagem ou iniciais) */
.logo{
  width:58px;
  height:58px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#C71585; /* fundo para fallback */
  flex:0 0 58px;
  user-select:none;
}

/* Imagem do logo */
.logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Iniciais (fallback) */
.logo .initials{
  font-weight:900;
  color:#FFFFFF;
  font-size:18px;
  letter-spacing:.6px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Se a imagem existir, escondemos as iniciais */
.logo img:not([src=""]) + .initials{
  display:none;
}







    .title{flex:1; min-width:0;}
    .title h2{margin:2px 0 6px; font-size:1.12rem;}
    .meta{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:.92rem;}
    .chips{
      margin-top:7px;
      display:flex;
      gap:4px;
      flex-wrap:wrap;
      align-items:center;
      color:#2A3346;
      font-size:.8rem;
      font-weight:800;
      line-height:1.25;
    }
    .chip-text{display:inline-flex;align-items:center;}
    .chip-sep{color:var(--muted);font-weight:900;margin:0 2px;}
    .desc{margin:12px 0 12px; color:var(--muted); line-height:1.6;}

    /* ===== Carrossel loop infinito ===== */
    .carousel{
      margin:14px 0 12px;
      border-radius:18px;
      border:1px solid var(--stroke);
      background:#fff;
      overflow:hidden;
      position:relative;
    }
    .carousel-track{
      display:flex;
      width:max-content;
      gap:10px;
      padding:12px;
      will-change: transform;
      animation: marquee var(--marqueeDuration) linear infinite;
    }
    .carousel:hover .carousel-track{ animation-play-state: paused; }
    .carousel-set{ display:flex; gap:10px; align-items:center; }
    .carousel-track img{
      width:280px; height:170px;
      object-fit:cover;
      object-position:center var(--fotoPosY,50%);
      border-radius:16px;
      flex-shrink:0;
      border:1px solid rgba(231,234,242,.9);
      background:#f3f4f6;
    }
    @keyframes marquee{ from { transform: translateX(0); } to { transform: translateX(-50%); } }

    .bottom{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      padding-top:10px;
      border-top:1px solid rgba(231,234,242,.95);
    }
    .rating-block{ display:flex; flex-direction:column; gap:6px; }
    .rating{ display:flex; align-items:center; gap:8px; color:#1F2937; font-weight:900; line-height:1.2; }
    .rating small{ color:var(--muted); font-weight:700 }
    .points{ font-size:.86rem; color:var(--muted); font-weight:800; }

    .empty{
      width:min(820px,100%);
      text-align:center;
      background:#fff;
      border:1px dashed rgba(86,96,116,.35);
      border-radius:var(--radius);
      padding:18px;
      color:var(--muted);
    }

    @media (max-width: 780px){
      header{position:relative;}
      .topbar{
        width:min(640px,92vw);
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:12px;
        padding:14px 0 16px;
      }
      .brand{
        width:100%;
        justify-content:flex-start;
        align-items:center;
      }
      .brand > div:last-child{min-width:0;}
      .brand .t1,
      .brand .t2{
        overflow-wrap:anywhere;
      }
      .actions{
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
      }
      .actions .btn{
        width:100%;
        min-width:0;
      }
      .wrap{
        width:min(640px,92vw);
        padding-top:12px;
      }
      .hero{
        padding-top:12px;
      }
      .hero h1{
        font-size:clamp(1.32rem,6vw,1.8rem);
        line-height:1.14;
      }
      .hero p{
        font-size:.94rem;
        line-height:1.45;
      }
      form.filters{
        grid-template-columns:1fr;
        border-radius:18px;
        padding:10px;
      }
      form.filters .btn{
        width:100%;
      }
      .grid{
        align-items:stretch;
      }
      .card{
        width:100%;
        padding:14px;
        border-radius:18px;
      }
      .head{
        gap:10px;
      }
      .logo{
        width:52px;
        height:52px;
        flex-basis:52px;
        border-radius:16px;
      }
      .title h2{
        font-size:1rem;
        line-height:1.25;
        overflow-wrap:anywhere;
      }
      .meta{
        gap:6px;
        font-size:.86rem;
        line-height:1.25;
      }
      .chips{
        font-size:.76rem;
        line-height:1.18;
        row-gap:2px;
      }
      .desc{
        font-size:.92rem;
        line-height:1.48;
      }
      .carousel-track{
        gap:8px;
        padding:10px;
      }
      .carousel-set{
        gap:8px;
      }
      .carousel-track img{
        width:220px;
        height:138px;
        border-radius:14px;
      }
      .bottom{
        align-items:stretch;
      }
      .rating-block{
        width:100%;
      }
      .bottom .btn{
        width:100%;
      }
    }

    @media (max-width: 430px){
      .topbar,
      .wrap{
        width:min(100% - 24px, 420px);
      }
      .brand-avatar,
      .brand .icon{
        width:50px;
        height:50px;
        border-radius:16px;
        flex:0 0 50px;
      }
      .brand .t1{
        font-size:1rem;
      }
      .brand .t2{
        font-size:.8rem;
      }
      .actions{
        grid-template-columns:1fr;
      }
      .btn{
        height:44px;
        border-radius:13px;
      }
      form.filters select,
      form.filters .btn{
        height:46px;
      }
      .head{
        align-items:flex-start;
      }
      .carousel-track img{
        width:190px;
        height:122px;
      }
      .rating{
        flex-wrap:wrap;
      }
    }

    /* ===================== MODAL LIGHTBOX (base) ===================== */
    .modal-backdrop{
      position:fixed; inset:0;
      background: rgba(3, 10, 25, .55);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:9999;
    }
    .modal-backdrop.open{ display:flex; }

    .modal{
      width:min(560px, 100%);
      background:#fff;
      border:2px solid var(--stroke-strong);
      border-radius:22px;
      box-shadow: 0 24px 70px rgba(16,24,40,.22);
      overflow:hidden;
    }
    .modal-head{
      padding:16px 16px 12px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      border-bottom:1px solid rgba(231,234,242,.95);
      background: linear-gradient(180deg, #F7FBFF, #FFFFFF);
    }
    .modal-title{ display:flex; flex-direction:column; gap:4px; }
    .modal-title strong{ font-size:1.05rem; }
    .modal-title span{ font-size:.86rem; color:var(--muted); }

    /* ✅ X reforçado */
    .modal .modal-close,
    .modal-close{
      width:32px;
      height:32px;
      min-width:32px;
      padding:0;
      border-radius:10px;
      border:1px solid #DC2626;
      background:#DC2626;
      color:#fff;
      font-weight:900;
      font-size:14px;
      line-height:1;
      cursor:pointer;
      display:grid;
      place-items:center;
      text-align:center;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      box-shadow:none;
      transition: opacity .12s ease, transform .12s ease;
    }
    .modal-close:hover{
      opacity:.9;
      transform: translateY(-1px);
    }
    .modal-close:active{
      transform: translateY(0px) scale(.98);
    }

    .modal-body{ padding:16px; }
    .form-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }
    .form-grid .full{ grid-column: 1 / -1; }
    .field{ display:flex; flex-direction:column; gap:6px; }
    .field label{ font-size:.82rem; color:var(--muted); font-weight:800; }
    .field input, .field select{
      height:46px;
      border-radius:14px;
      border:1px solid var(--stroke);
      padding:0 12px;
      background:#fff;
    }

    .msg{
      margin-top:12px;
      padding:12px 12px;
      border-radius:16px;
      font-weight:800;
      display:none;
    }
    .msg.show{ display:block; }
    .msg.ok{ background: rgba(22,163,74,.08); border:1px solid rgba(22,163,74,.25); color: #14532D; }
    .msg.err{ background: rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.25); color: #7F1D1D; }

    .modal-actions{
      padding:14px 16px 16px;
      display:flex;
      gap:10px;
      justify-content:flex-end;
      border-top:1px solid rgba(231,234,242,.95);
      background:#fff;
    }
    .tiny{
      font-size:.8rem;
      color:var(--muted);
      margin-top:10px;
      line-height:1.35;
    }

    /* ===== Modal SUCESSO ===== */
    .success-body{
      padding:18px 16px 14px;
      text-align:center;
    }
    .success-icon{
      width:56px;height:56px;border-radius:18px;
      margin:10px auto 10px;
      display:grid;place-items:center;
      background: rgba(22,163,74,.12);
      border:1px solid rgba(22,163,74,.22);
      color:#166534;
      font-size:26px;
      font-weight:900;
    }
    .success-text{
      margin:10px auto 6px;
      max-width:430px;
      color:#243047;
      font-weight:900;
      line-height:1.35;
    }
    .success-sub{
      margin:0 auto 10px;
      max-width:430px;
      color:var(--muted);
      font-weight:700;
      line-height:1.45;
      font-size:.92rem;
    }





.brand-avatar{
  width:58px;
  height:58px;
  border-radius:18px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#C71585;
  color:#fff;
  font-weight:900;
  font-size:18px;
  letter-spacing:.5px;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}

.brand-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.brand-avatar.initials{
  background:#C71585;
  color:#fff;
}







.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.modal-backdrop.open{display:flex;}

.modal{
  background:#fff;
  width:95%;
  max-width:500px;
  border-radius:20px;
  padding:30px;
  box-shadow:0 30px 80px rgba(0,0,0,.3);
  animation:fadeIn .25s ease;
  position:relative;
}

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

.modal h3{margin-bottom:20px;font-size:20px;}

.modal input,
.modal textarea{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid #ddd;
  margin-bottom:15px;
  font-size:14px;
}

.modal button{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:none;
  background:#C71585;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.modal button:hover{opacity:.9;}

.modal .closeX{
  position:absolute;
  top:15px;
  right:15px;
  width:32px;
  height:32px;
  padding:0;
  border-radius:10px;
  background:#DC2626;
  border:1px solid #DC2626;
  display:grid;
  place-items:center;
  font-size:14px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  color:#fff;
}

.site-footer{
  width:100%;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px 12px 0;
  color:var(--muted);
  line-height:1.45;
}

.site-footer *{
  text-align:center;
}

@media (max-width: 780px){
  .site-footer{
    align-self:center;
    width:100%;
    max-width:100%;
    margin:4px auto 0;
    padding:10px 10px 0;
  }

  .modal-backdrop{
    align-items:flex-start;
    justify-content:center;
    padding:12px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .modal{
    width:100%;
    max-width:560px;
    max-height:calc(100dvh - 24px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:18px;
    padding:0;
  }

  .modal-head{
    position:sticky;
    top:0;
    z-index:2;
    padding:14px;
  }

  .modal-title strong{
    font-size:1rem;
    line-height:1.2;
  }

  .modal-title span{
    font-size:.82rem;
    line-height:1.35;
  }

  .modal-body{
    padding:14px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .form-grid .field,
  .form-grid .full{
    grid-column:1 / -1;
  }

  .field input,
  .field select,
  .modal input,
  .modal textarea{
    min-height:46px;
    font-size:16px;
    width:100%;
    max-width:100%;
  }

  .field select,
  form.filters select{
    appearance:auto;
    -webkit-appearance:menulist;
    line-height:normal;
  }

  .modal textarea{
    min-height:112px;
    resize:vertical;
  }

  .modal-actions{
    padding:12px 14px 14px;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .modal-actions .btn,
  .modal-actions button{
    width:100%;
  }

  #loginModal .modal,
  #signupModal .modal,
  #successModal .modal,
  #leadModal .modal{
    width:100%;
    max-width:560px;
  }

  #signupModal .modal{
    max-height:calc(100dvh - 18px);
  }

  #signupModal .modal-body{
    padding-bottom:18px;
  }

  #leadModal .modal{
    padding:22px 16px 16px;
  }

  #leadModal h3{
    margin:0 34px 16px 0;
    font-size:1.05rem;
    line-height:1.25;
  }

  #leadModal p{
    line-height:1.4;
  }

  #leadModal button{
    min-height:46px;
    white-space:normal;
  }

  .lead-option-divider{
    margin:16px 0;
  }
}

@media (max-width: 430px){
  .modal-backdrop{
    padding:8px;
  }

  .modal{
    max-height:calc(100dvh - 16px);
    border-radius:16px;
  }

  .modal-head{
    padding:12px;
  }

  .modal-body{
    padding:12px;
  }

  .modal .modal-close,
  .modal-close,
  .modal .closeX{
    width:30px;
    height:30px;
    min-width:30px;
    border-radius:9px;
  }

  #leadModal .modal{
    padding:20px 12px 14px;
  }

  .lead-partner-box{
    align-items:flex-start;
  }

  .lead-partner-name{
    overflow-wrap:anywhere;
  }

  .lead-accept-box{
    align-items:flex-start;
  }
}