/* =========================================================
       BASE (dark premium + verde institucional)
       ========================================================= */
    :root{
      --max: 1180px;
      --bg: #0b1114;
      --bg2:#070b0d;
      --card: rgba(255,255,255,.06);
      --stroke: rgba(255,255,255,.10);
            --stroke2: rgba(255,255,255,.14);
      --border: var(--stroke);
--text: #e8ecef;
      --muted: rgba(232,236,239,.72);
      --green: #16A34A;
      --green2:#22c55e;
      --radius: 22px;
      --shadow: 0 20px 60px rgba(0,0,0,.45);
      --ma-z: 9999;
    
      --blue99:#08a4dc;}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Noto Sans, "Liberation Sans", sans-serif;
      background: radial-gradient(900px 520px at 15% 10%, rgba(22,163,74,.18), transparent 60%),
                  radial-gradient(800px 480px at 85% 0%, rgba(34,197,94,.14), transparent 55%),
                  linear-gradient(180deg, var(--bg), var(--bg2));
      color:var(--text);
      overflow-x:hidden;
    }

    /* Offset âncoras por conta do header fixo */
    section[id]{ scroll-margin-top: 96px; }

    /* =========================================================
       BLOCO 01 — HEADER FIXO (menu âncora)
       Itens: Início • Problema • Solução • Projetos • Processo • FAQ • Contratar no 99
       ========================================================= */
    .ma-topbar{
      position:fixed; top:0; left:0; right:0;
      z-index:var(--ma-z);
      background: rgba(12,15,18,.62);
      border-bottom: 1px solid var(--stroke);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .ma-topbar-inner{
      max-width: var(--max);
      margin: 0 auto;
      padding: 12px 18px;
      display:flex;
      justify-content: space-between;
      align-items:center;
      gap: 14px;
    }
    .ma-logo{
      display:flex; align-items:center; gap:10px;
      user-select:none;
    }

    .ma-logo-img{
      height: 34px;
      width: auto;
      display:block;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
    }
    @media (max-width: 900px){
      .ma-logo-img{ height: 30px; }
    }

    .ma-logo .mark{
      width:44px; height:44px;
      border-radius: 12px;
      display:grid; place-items:center;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.10);
    }
    .ma-logo .word{
      font-weight: 900;
      letter-spacing: .02em;
    }
    .ma-logo .word small{
      display:block;
      font-size: 11px;
      letter-spacing:.10em;
      text-transform:uppercase;
      color: rgba(232,236,239,.55);
      margin-top: -2px;
      font-weight: 800;
    }

    .ma-nav{
      display:flex;
      gap: 10px;
      align-items:center;
      flex-wrap: wrap;
      justify-content:flex-end;
    }
    .ma-nav a{
      position:relative;
      text-decoration:none;
      color: rgba(230,232,235,.72);
      font-weight: 800;
      font-size: 12.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid transparent;
      transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
      white-space:nowrap;
    }
    .ma-nav a:hover{
      color:#fff;
      background: rgba(255,255,255,.06);
      transform: translateY(-1px);
    }
    .ma-nav a.ma-active{
      color:#fff;
      background: rgba(22,163,74,.10);
      border-color: rgba(22,163,74,.28);
      box-shadow: inset 0 0 0 1px rgba(22,163,74,.08);
    }

    

    /* CTA azul (Contratar no 99) */
    .ma-nav a.ma-cta99{
      color:#fff;
      background: linear-gradient(180deg, rgba(8,164,220,.95), rgba(8,164,220,.75));
      border-color:rgba(8,164,220,.55);
      box-shadow: 0 14px 34px rgba(8,164,220,.18);
    }
    .ma-nav a.ma-cta99:hover{
      color:#fff;
      filter: brightness(1.05);
      transform: translateY(-1px);
      background: linear-gradient(180deg, rgba(8,164,220,1), rgba(8,164,220,.82));
    }
    .ma-nav a.ma-cta99:focus-visible{
      outline: none;
      box-shadow: 0 0 0 4px rgba(8,164,220,.22), 0 14px 34px rgba(8,164,220,.18);
    }

    /* Mobile drawer (melhorado) */
    .ma-burger{
      display:none;
      width:46px; height:46px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color:#fff;
      cursor:pointer;
      align-items:center;
      justify-content:center;
      -webkit-tap-highlight-color: transparent;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
    }
    .ma-burger:active{ transform: translateY(1px); }
    .ma-burger:focus-visible{
      outline: none;
      box-shadow: 0 0 0 4px rgba(22,163,74,.18);
    }
    .ma-burger img{ width:22px; height:22px; display:block; opacity:.92 }

    /* overlay por trás do painel */
    .ma-overlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.42);
      opacity:0;
      pointer-events:none;
      transition: opacity .22s ease;
      z-index: calc(var(--ma-z) - 1);
    }
    .ma-overlay.open{
      opacity:1;
      pointer-events:auto;
    }

    /* Painel: full-screen “sheet” (só no mobile) */
    .ma-drawer{
      position: fixed;
      inset: 0;
      padding: 86px 14px 14px; /* espaço do header fixo + respiro */
      background: rgba(6,8,10,.62);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      opacity:0;
      transform: translateY(-10px);
      pointer-events:none;
      transition: opacity .22s ease, transform .22s ease;
      z-index: var(--ma-z);
    }
    .ma-drawer.open{
      opacity:1;
      transform: translateY(0);
      pointer-events:auto;
    }

    .ma-drawer-panel{
      background: rgba(9,12,14,.92);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 22px;
      box-shadow: 0 24px 70px rgba(0,0,0,.58);
      overflow:hidden;
      max-height: calc(100vh - 100px);
      display:flex;
      flex-direction:column;
    }

    .ma-drawer-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 14px 14px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
    }
    .ma-drawer-title{
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(232,236,239,.70);
    }
    .ma-close{
      width:44px;height:44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      display:grid;
      place-items:center;
      cursor:pointer;
      -webkit-tap-highlight-color: transparent;
      transition: transform .15s ease, background .15s ease;
      color:#fff;
    }
    .ma-close:active{ transform: translateY(1px); }
    .ma-close:focus-visible{
      outline:none;
      box-shadow: 0 0 0 4px rgba(22,163,74,.18);
    }
    .ma-close svg{ width:18px; height:18px; opacity:.92; }

    .ma-drawer-links{
      padding: 12px;
      display:flex;
      flex-direction:column;
      gap: 10px;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }

    .ma-drawer a{
      display:flex;
      justify-content: space-between;
      align-items:center;
      padding: 16px 16px;
      color: rgba(232,236,239,.90);
      text-decoration:none;
      font-weight: 900;
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size: 12.5px;
      border-radius: 18px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 14px 28px rgba(0,0,0,.35);
      transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .ma-drawer a:hover{ background: rgba(255,255,255,.06); color:#fff; }
    .ma-drawer a:active{ transform: scale(.995); }

    .ma-drawer a .chev{
      width:18px;height:18px;
      opacity:.55;
      flex: 0 0 auto;
    }

    .ma-drawer a.ma-active{
      background: rgba(22,163,74,.10);
      border-color: rgba(22,163,74,.28);
      color:#fff;
    }

    /* CTA azul (Contratar no 99) — destaque no mobile */
    .ma-drawer a.ma-cta99{
      background: linear-gradient(180deg, rgba(8,164,220,.22), rgba(8,164,220,.10));
      border-color: rgba(8,164,220,.55);
      box-shadow: 0 18px 38px rgba(8,164,220,.16);
    }
    .ma-drawer a.ma-cta99 .chev{ opacity:.8; }

    /* trava scroll do fundo quando menu abre */
    body.ma-no-scroll{ overflow:hidden; }

    /* Mobile: vira menu compacto */
    @media (max-width: 900px){
      .ma-nav{ display:none; }
      .ma-burger{ display:flex; }
    }

    /* =========================================================
       BLOCO 02 — HERO (posicionamento + CTA que não sai do 99)
       - CTA primário: âncora no Portfólio
       - CTA secundário: âncora no "Contratar no 99"
       ========================================================= */
    .wrap{
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 18px;
    }

    /* Container padrão do site (alinha com a margem do layout) */
    .container{
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 18px;
    }
    @media (max-width: 520px){
  .footer-nav{ grid-template-columns: 1fr; }

      .container{ padding: 0 14px; }
      .tl-guide{ display:none; }
          }

    .hero{
      padding-top: 112px; /* espaço do header fixo */
      padding-bottom: 44px;
    }
    .hero__grid{
      display:grid;
      grid-template-columns: 1.2fr .9fr;
      gap: 26px;
      align-items:center;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .hero__grid:before{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(600px 420px at 20% 0%, rgba(22,163,74,.22), transparent 60%),
                  radial-gradient(520px 360px at 90% 10%, rgba(34,197,94,.18), transparent 55%);
      pointer-events:none;
      opacity:.95;
    }
    .hero__content{
      position:relative;
      padding: 44px 42px;
      z-index:1;
    }
    .hero__eyebrow{
      display:inline-flex;
      gap:10px;
      align-items:center;
      font-weight: 900;
      letter-spacing:.12em;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(232,236,239,.62);
      margin-bottom: 14px;
    }
    .dot{
      width:8px; height:8px;
      border-radius: 999px;
      background: rgba(22,163,74,.85);
      box-shadow: 0 0 0 4px rgba(22,163,74,.18);
    }
    h1{
      margin:0 0 14px 0;
      font-size: clamp(36px, 4.2vw, 58px);
      line-height: 1.02;
      letter-spacing: -0.02em;
    }
    .hero p{
      margin: 0 0 22px 0;
      color: var(--muted);
      font-size: 16.5px;
      line-height: 1.55;
      max-width: 56ch;
    }
    .hero strong{ color:#fff; font-weight: 900; }
    .hero__ctas{
      display:flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items:center;
    }
    .hero__proofs{
      display:flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 18px;
      max-width: 760px;
    }
    .hero__proof{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height: unset;
      padding: 8px 13px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.045);
      color: rgba(232,236,239,.82);
      font-size: 12.4px;
      font-weight: 850;
      line-height: 1.22;
      box-shadow: none;
      white-space: nowrap;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      padding: 14px 18px;
      border-radius: 999px;
      text-decoration:none;
      font-weight: 900;
      letter-spacing: .02em;
      border: 1px solid transparent;
      transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:active{ transform: translateY(1px); }
    .btn--primary{
      color: #06200f;
      background: linear-gradient(180deg, rgba(34,197,94,1), rgba(22,163,74,1));
      box-shadow: 0 14px 34px rgba(34,197,94,.22);
    }
    .btn--primary:hover{ filter: brightness(1.05); transform: translateY(-1px); }
    .btn--secondary{
      color:#fff;
      background: rgba(255,255,255,.04);
      border-color: rgba(8,164,220,.70);
    }
    .btn--secondary:hover{
      background: rgba(255,255,255,.07);
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.22);
    }
    .btn svg{ width:18px; height:18px; opacity:.92 }
    .hero__visual{
      position:relative;
      padding: 44px 28px;
      z-index:1;
    }
    .hero__mock{
      width: 100%;
      max-width: 520px;
      margin-left:auto;
      display:block;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.22);
      box-shadow: 0 22px 60px rgba(0,0,0,.55);
    }
    @media (max-width: 980px){
      .hero__grid{ grid-template-columns: 1fr; }
      .hero__visual{ padding-top: 0; padding-bottom: 34px; }
      .hero__content{ padding: 34px 22px; }
      .hero p{ max-width: 70ch; }
    }

    @media (max-width: 680px){
      .hero__proofs{
        gap: 8px;
        max-width: 100%;
      }
      .hero__proof{
        padding: 8px 11px;
        font-size: 12px;
        white-space: normal;
        text-align: left;
        justify-content: flex-start;
      }
    }

    
    /* =========================================================
       BLOCO 04 — DIFERENCIAIS / AUTORIDADE RÁPIDA
       ========================================================= */
    .authority{
      padding: 72px 0 86px;
      background: linear-gradient(180deg, rgba(7,11,13,.55), rgba(7,11,13,0));
      border-top: 1px solid rgba(255,255,255,.06);
    }
    .authority-head{ margin-bottom: 28px; }

    .auth-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin-top: 28px;
    }

    .auth-card{
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
      border: 1px solid rgba(255,255,255,.10);
      border-radius: var(--radius);
      padding: 20px 18px 18px;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
      min-height: 160px;
      box-shadow: 0 16px 44px rgba(0,0,0,.24);
    }
    @media (hover:hover){
      .auth-card:hover{
        transform: translateY(-2px);
        border-color: rgba(22,163,74,.30);
        background: linear-gradient(180deg, rgba(22,163,74,.10), rgba(255,255,255,0));
      }
    }

    .auth-icon{
      width: 56px;
      height: 56px;
      display:grid;
      place-items:center;
      border-radius: 16px;
      background: rgba(0,0,0,.28);
      border: 1px solid rgba(255,255,255,.10);
      margin-bottom: 14px;
      color: rgba(232,236,239,.92);
      box-shadow: inset 0 0 0 1px rgba(22,163,74,.10);
    }
    .auth-icon img{
       width: 30px;
       height: 30px;
       display:block;
     }

    .auth-title{
      font-weight: 950;
      font-size: 14.5px;
      line-height: 1.25;
      letter-spacing: -.1px;
      margin: 0 0 8px;
    }
    .auth-text{
      color: rgba(232,236,239,.70);
      font-size: 13.5px;
      line-height: 1.55;
      margin: 0;
      max-width: 36ch;
    }

    /* Tablet */
    @media (max-width: 980px){
      .auth-grid{ grid-template-columns: repeat(2, 1fr); }
    }
    /* Mobile */
    @media (max-width: 520px){
      .authority{ padding: 62px 0 78px; }
      .auth-grid{ grid-template-columns: 1fr; }
      .auth-card{ min-height: unset; }
    }


    /* =========================================================
       BLOCO 03 — PROBLEMA (após carrossel preservado)
       ========================================================= */
    .problem{
      padding: 86px 0 92px;
      background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
      border-top: 1px solid rgba(15,17,19,.10);
      color: #0B1516;
      position: relative;
      overflow: hidden;
    }
    .problem:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(720px 380px at 14% 8%, rgba(22,163,74,.10), transparent 62%),
        radial-gradient(620px 360px at 88% 20%, rgba(34,197,94,.08), transparent 58%);
      pointer-events:none;
    }
    .problem .wrap{
      position:relative;
      z-index:1;
    }
    .problem-grid{
      display:grid;
      grid-template-columns: 1.04fr .86fr;
      gap: 34px;
      align-items:center;
    }
    .problem .kicker{
      color: rgba(15,17,19,.62);
    }
    .problem .kicker .dot{
      background: rgba(15,17,19,.85);
      box-shadow: 0 0 0 6px rgba(15,17,19,.08);
    }
    .problem h2{
      margin: 0 0 14px;
      max-width: 760px;
      font-size: clamp(30px, 3.35vw, 48px);
      line-height: 1.06;
      letter-spacing: -.03em;
      color:#0B1516;
    }
    .problem-lead,
    .problem-note{
      margin: 0;
      max-width: 66ch;
      color: rgba(15,17,19,.72);
      font-size: 16px;
      line-height: 1.72;
    }
    .problem-note{
      margin-top: 14px;
      padding-left: 16px;
      border-left: 3px solid rgba(22,163,74,.55);
      color: rgba(15,17,19,.66);
    }
    .problem-visual{
      margin:0;
      border-radius: 26px;
      overflow:hidden;
      border: 1px solid rgba(15,17,19,.10);
      background:#fff;
      box-shadow: 0 24px 70px rgba(0,0,0,.13);
    }
    .problem-visual img{
      display:block;
      width:100%;
      height:100%;
      min-height: 390px;
      object-fit: cover;
      object-position: center;
    }
    .problem-cards{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-top: 26px;
    }
    .problem-card{
      min-height: 190px;
      padding: 18px 18px 20px;
      border-radius: 22px;
      border: 1px solid rgba(15,17,19,.14);
      background: linear-gradient(180deg, #0B3D2E 0%, #07241B 100%);
      box-shadow: 0 20px 52px rgba(0,0,0,.18);
      color:#fff;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    @media (hover:hover){
      .problem-card:hover{
        transform: translateY(-2px);
        border-color: rgba(22,163,74,.45);
        box-shadow: 0 24px 64px rgba(0,0,0,.22);
      }
    }
    .problem-icon{
      width: 58px;
      height: 58px;
      display:grid;
      place-items:center;
      border-radius: 17px;
      background: rgba(0,0,0,.22);
      border: 1px solid rgba(255,255,255,.14);
      margin-bottom: 14px;
      box-shadow: inset 0 0 0 1px rgba(22,163,74,.10);
    }
    .problem-icon img{
      width: 32px;
      height: 32px;
      object-fit: contain;
      display:block;
    }
    .problem-card h3{
      margin: 0 0 8px;
      color: rgba(255,255,255,.96);
      font-size: 16px;
      line-height: 1.2;
      letter-spacing: -.01em;
    }
    .problem-card p{
      margin:0;
      color: rgba(255,255,255,.78);
      font-size: 13.8px;
      line-height: 1.55;
    }
    @media (max-width: 1020px){
      .problem-grid{ grid-template-columns: 1fr; }
      .problem-visual img{ min-height: 340px; }
      .problem-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px){
      .problem{ padding: 62px 0 74px; }
      .problem-grid{ gap: 22px; }
      .problem h2{ font-size: 29px; }
      .problem-lead,
      .problem-note{ font-size: 14.8px; line-height: 1.62; }
      .problem-visual{ border-radius: 22px; }
      .problem-visual img{ min-height: 260px; }
      .problem-cards{ grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
      .problem-card{ min-height: unset; padding: 16px; border-radius: 18px; }
      .problem-icon{ width: 56px; height: 56px; margin-bottom: 12px; }
    }


    /* =========================================================
       BLOCO 04 — SOLUÇÃO / POSICIONAMENTO (oferta WebProsper)
       ========================================================= */
    .solution{
      padding: 92px 0 98px;
      background:
        radial-gradient(920px 520px at 12% 8%, rgba(22,163,74,.28), transparent 62%),
        radial-gradient(820px 480px at 90% 12%, rgba(34,197,94,.18), transparent 58%),
        linear-gradient(180deg, #0b1114 0%, #07100c 100%);
      border-top: 1px solid rgba(255,255,255,.10);
      position: relative;
      overflow:hidden;
    }
    .solution:before{
      content:"";
      position:absolute;
      inset:-30px;
      background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.05) 0 1px, transparent 2px) 0 0/18px 18px;
      opacity:.10;
      pointer-events:none;
    }
    .solution .wrap{
      position:relative;
      z-index:1;
    }
    .solution-grid{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 28px;
      align-items: stretch;
    }
    .solution-head{
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height: 100%;
      padding: 6px 0;
    }
    .solution .kicker{
      color: rgba(232,236,239,.74);
    }
    .solution .kicker .dot{
      background: rgba(255,255,255,.92) !important;
      box-shadow: 0 0 0 6px rgba(255,255,255,.10) !important;
    }
    .solution h2{
      margin: 0 0 14px;
      max-width: 780px;
      font-size: clamp(30px, 3.35vw, 48px);
      line-height: 1.06;
      letter-spacing: -.03em;
      color: rgba(255,255,255,.96);
    }
    .solution-lead,
    .solution-close{
      margin:0;
      max-width: 68ch;
      color: rgba(232,236,239,.74);
      font-size: 16px;
      line-height: 1.72;
    }
    .solution-close{
      margin-top: 16px;
      padding: 16px 18px;
      border-radius: 18px;
      border: 1px solid rgba(34,197,94,.22);
      background: rgba(22,163,74,.10);
      color: rgba(255,255,255,.84);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
    }
    .solution-close strong{ color:#fff; }
    .solution-offers{
      display:grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .solution-offer{
      display:flex;
      gap: 16px;
      align-items:flex-start;
      min-height: 190px;
      padding: 22px;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
      box-shadow: 0 22px 64px rgba(0,0,0,.30);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }
    @media (hover:hover){
      .solution-offer:hover{
        transform: translateY(-2px);
        border-color: rgba(34,197,94,.36);
        background: linear-gradient(180deg, rgba(22,163,74,.14), rgba(255,255,255,.035));
      }
    }
    .solution-icon{
      width: 62px;
      height: 62px;
      display:grid;
      place-items:center;
      flex: 0 0 62px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.28);
      box-shadow: inset 0 0 0 1px rgba(22,163,74,.10);
    }
    .solution-icon img{
      display:block;
      width: 34px;
      height: 34px;
      object-fit:contain;
    }
    .solution-offer h3{
      margin: 2px 0 8px;
      color: rgba(255,255,255,.96);
      font-size: 19px;
      line-height: 1.18;
      letter-spacing: -.02em;
    }
    .solution-offer p{
      margin:0;
      color: rgba(232,236,239,.73);
      font-size: 14.5px;
      line-height: 1.58;
    }
    @media (max-width: 980px){
      .solution-grid{ grid-template-columns: 1fr; }
      .solution-head{ min-height: unset; }
    }
    @media (max-width: 560px){
      .solution{ padding: 70px 0 78px; }
      .solution h2{ font-size: 29px; }
      .solution-lead,
      .solution-close{ font-size: 14.8px; line-height: 1.62; }
      .solution-offer{
        flex-direction: column;
        min-height: unset;
        padding: 18px;
        border-radius: 20px;
      }
      .solution-icon{ width: 58px; height: 58px; flex-basis: 58px; }
      .solution-offer h3{ font-size: 17px; }
    }

    /* =========================================================
       BLOCO 05 — PARA QUEM É
       ========================================================= */
    .audience{
      padding: 86px 0 94px;
      background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
      border-top: 1px solid rgba(15,17,19,.10);
      color:#0B1516;
      position:relative;
      overflow:hidden;
    }
    .audience:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(700px 360px at 14% 0%, rgba(22,163,74,.08), transparent 62%),
        radial-gradient(680px 360px at 92% 8%, rgba(34,197,94,.06), transparent 58%);
      pointer-events:none;
    }
    .audience .wrap{
      position:relative;
      z-index:1;
    }
    .audience .sec-head{ margin-bottom: 30px; }
    .audience .kicker{ color: rgba(15,17,19,.62); }
    .audience .kicker .dot{
      background: rgba(15,17,19,.85) !important;
      box-shadow: 0 0 0 6px rgba(15,17,19,.08) !important;
    }
    .audience .sec-head h2{ color:#0B1516; }
    .audience .sec-head .lead{ color: rgba(15,17,19,.72); }
    .audience-grid{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }
    .audience-card{
      min-height: 220px;
      padding: 18px 18px 20px;
      border-radius: 22px;
      border: 1px solid rgba(15,17,19,.14);
      background: linear-gradient(180deg, #0B3D2E 0%, #07241B 100%);
      box-shadow: 0 20px 52px rgba(0,0,0,.18);
      color:#fff;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    @media (hover:hover){
      .audience-card:hover{
        transform: translateY(-2px);
        border-color: rgba(22,163,74,.45);
        box-shadow: 0 24px 64px rgba(0,0,0,.22);
      }
    }
    .audience-icon{
      width: 58px;
      height: 58px;
      display:grid;
      place-items:center;
      border-radius: 17px;
      background: rgba(0,0,0,.22);
      border: 1px solid rgba(255,255,255,.14);
      margin-bottom: 14px;
      box-shadow: inset 0 0 0 1px rgba(22,163,74,.10);
    }
    .audience-icon img{
      display:block;
      width: 32px;
      height: 32px;
      object-fit:contain;
    }
    .audience-card h3{
      margin: 0 0 8px;
      color: rgba(255,255,255,.96);
      font-size: 16px;
      line-height: 1.22;
      letter-spacing: -.01em;
    }
    .audience-card p{
      margin:0;
      color: rgba(255,255,255,.78);
      font-size: 13.8px;
      line-height: 1.55;
    }
    @media (max-width: 1020px){
      .audience-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px){
      .audience{ padding: 62px 0 76px; }
      .audience .sec-head{ text-align:left; margin-bottom: 22px; }
      .audience .sec-head h2{ font-size: 28px; line-height:1.10; }
      .audience .sec-head .lead{ font-size: 14.8px; line-height:1.62; }
      .audience-grid{ grid-template-columns: 1fr; gap: 12px; }
      .audience-card{ min-height: unset; padding: 16px; border-radius: 18px; }
      .audience-icon{ width: 56px; height: 56px; margin-bottom: 12px; }
    }
/* =========================================================
       BLOCO 03 — PORTFÓLIO NAVEGÁVEL
       ========================================================= */
    .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 18px; }
    .sec-head{ text-align:center; max-width: 820px; margin: 0 auto 26px; }
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      font-size:12px; letter-spacing:.14em; text-transform:uppercase;
      color: rgba(232,236,239,.72);
      margin-bottom: 12px;
    }
    
    /* Alinha o "ponto" das seções tipo CREDENCIAIS (evita desalinhamento) */
    .section-kicker{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      line-height: 1;
    }
    .section-kicker .dot{
      flex: 0 0 auto;
    }
.dot{
      width:7px; height:7px; border-radius: 999px;
      background: rgba(255,255,255,.85);
      box-shadow: 0 0 0 6px rgba(255,255,255,.08);
      display:inline-block;
          vertical-align: middle;
    }
    .sec-head h2{
      margin: 0 0 10px;
      font-size: clamp(26px, 3vw, 42px);
      line-height: 1.08;
      font-weight: 950;
      letter-spacing: -.35px;
    }
    .sec-head .lead{
      margin: 0 auto;
      color: rgba(232,236,239,.72);
      font-size: 15px;
      line-height: 1.65;
      max-width: 70ch;
    }

    .portfolio{
      padding: 26px 0 84px;
      background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
      border-top: 1px solid rgba(15,17,19,.10);
    }

    
    /* === PORTFÓLIO (light section) — ajustes de cor (sem mexer em layout) === */
    .portfolio .kicker{ color: rgba(15,17,19,.68); }
    .portfolio .dot{
      background: rgba(15,17,19,.85);
      box-shadow: 0 0 0 6px rgba(15,17,19,.08);
    }
    .portfolio .sec-head h2{ color: #0B1516; }
    .portfolio .sec-head .lead{ color: rgba(15,17,19,.72); }
    .portfolio .p-hint{ color: rgba(15,17,19,.62); }
    .portfolio .p-hint strong{ color: rgba(15,17,19,.78); }
.portfolio-grid{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      margin-top: 28px;
    }

    @media (min-width: 1101px){
      .portfolio-grid{ grid-template-columns: repeat(6, 1fr); }
      .portfolio-grid .p-card{ grid-column: span 2; } /* 3 por linha */
      color: rgba(232,236,239,.96);
    }

    .p-card{
      border-radius: 20px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
      position: relative;
      cursor: pointer;
      user-select: none;
      text-decoration:none;
      color: inherit;
      outline: none;
      box-shadow: 0 16px 44px rgba(0,0,0,.28);
    }

    @media (hover:hover){
      .p-card:hover{
        transform: translateY(-2px);
        border-color: rgba(22,163,74,.35);
        background: linear-gradient(180deg, rgba(22,163,74,.10), rgba(255,255,255,0));
      }
    }
    .p-card:focus-visible{
      border-color: rgba(34,197,94,.55);
      box-shadow: 0 0 0 4px rgba(34,197,94,.18), 0 16px 44px rgba(0,0,0,.28);
    }

    .p-thumb{
      width:100%;
      aspect-ratio: 16/10;
      background:
        radial-gradient(1200px 420px at 50% 10%, rgba(0,0,0,.06), transparent 60%),
        radial-gradient(700px 380px at 20% 80%, rgba(0,0,0,.04), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,246,244,.92));
      border-bottom: 1px solid rgba(15,17,19,.06);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -18px 40px rgba(0,0,0,.03);
      display:block;
      object-fit: contain;
      padding: 18px 18px 16px;
    }

    .p-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 14px 14px 15px;
      border-top: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.40));
    }

    .p-name{
      font-weight: 950;
      letter-spacing: -.15px;
      font-size: 14.5px;
    }

    .p-tag{
      font-size: 12px;
      color: rgba(232,236,239,.86);
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 999px;
      padding: 6px 10px;
      background: rgba(255,255,255,.06);
      white-space: nowrap;
    }

    .p-hint{
      text-align:center;
      margin: 16px 0 0;
      color: rgba(232,236,239,.60);
      font-size: 13px;
      line-height: 1.5;
    }
    .p-hint strong{ color: rgba(232,236,239,.78); }

    @media (max-width: 520px){
      .wrap{ padding: 0 14px; }
      .portfolio{ padding: 18px 0 72px; }
      .portfolio-grid{ grid-template-columns: 1fr; }
      .p-thumb{ aspect-ratio: 16/11; }
    }

/* =========================================================
       BLOCO 05 — PROCESSO (timeline mais visual)
       ========================================================= */
    .process{
      padding: 92px 0 102px;
      border-top: 1px solid var(--stroke2);
      /* fundo mais "cheio" (estilo da versão roxa: sem card por cima) */
      background:
        radial-gradient(980px 560px at 14% 12%, rgba(22,163,74,.32), transparent 60%),
        radial-gradient(980px 560px at 86% 0%, rgba(34,197,94,.22), transparent 62%),
        linear-gradient(180deg, rgba(6,36,24,.96), rgba(4,18,12,.98));
      position:relative;
      overflow:hidden;
    }

    .process:before{
      content:"";
      position:absolute; inset:-40px;
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.05) 0 1px, transparent 2px) 0 0/18px 18px;
      opacity:.12;
      pointer-events:none;
    }

    .process-head{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 22px;
      align-items:start;
      position:relative;
      z-index:1;
      margin-bottom: 34px;
    }

    /* Ajuste: ponto do kicker "PROCESSO" (fica branco, não escurece no verde) */
    .process .kicker .dot{
      background: rgba(255,255,255,.92);
      box-shadow: 0 0 0 6px rgba(255,255,255,.10);
    }

    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      font-size:12px; letter-spacing:.14em; text-transform:uppercase;
      color: rgba(232,236,239,.74);
      margin-bottom: 14px;
      font-weight: 900;
    }
    .dot{
      width:7px; height:7px; border-radius: 999px;
      background: rgba(255,255,255,.86);
      box-shadow: 0 0 0 6px rgba(255,255,255,.08);
      display:inline-block;
    }

    .process-title{
      margin: 0;
      font-size: clamp(36px, 4.2vw, 64px);
      line-height: 1.02;
      font-weight: 1000;
      letter-spacing: -.8px;
    }
    .process-title .hi{
      color: var(--green2);
      text-shadow: 0 10px 40px rgba(34,197,94,.18);
    }

    .process-desc{
      margin: 34px 0 0;
      color: var(--muted);
      font-size: 15.5px;
      line-height: 1.85;
      max-width: 58ch;
      justify-self:end;
    }
    .timeline{
      position:relative;
      z-index:1;
      /* remove o "card" para ficar tela cheia como a versão roxa */
      border-radius: 0;
      border: none;
      background: transparent;
      box-shadow: none;
      padding: 0;
      overflow: visible;
    }

    /* linha central (igual à print) */
    .timeline:before{
      content:"";
      position:absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      background: rgba(255,255,255,.14);
      transform: translateX(-50%);
      border-radius: 2px;
    }
    .timeline:after{ display:none; }

    .tl-grid{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px 14px;
      padding: 34px 22px 34px;
    }

    /* guias de referência (estilo da print) — poucas linhas, traço mais “premium” */
    .tl-edge{
      position:absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: rgba(255,255,255,.18);
      border-radius: 2px;
      opacity: .75;
      pointer-events:none;
      z-index: 1;
    }
    .tl-edge.left{ left: 0; }
    .tl-edge.right{ right: 0; }

    .tl-guide{
      position:absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.22) 0px,
        rgba(255,255,255,.22) 10px,
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 22px
      );
      border-radius: 2px;
      opacity: .9;
      pointer-events:none;
      z-index: 1;
    }
    /* 3 linhas pontilhadas (em vez de 5) */
    .tl-guide.g1{ left: 24%; }
    .tl-guide.g2{ left: 40%; }
    .tl-guide.g3{ left: 82%; }

.tl-item{
      position:relative;
      display:flex;
      align-items:center;
      gap: 12px;
      padding: 18px 22px;
      border-radius: 18px;
      background: linear-gradient(90deg, rgba(22,163,74,.22), rgba(0,0,0,.18));
      border: 1px solid rgba(22,163,74,.22);
      box-shadow: 0 18px 50px rgba(0,0,0,.28);
      min-height: 58px;
    }

    .tl-item .n{
      width: 34px; height: 34px;
      border-radius: 12px;
      display:grid; place-items:center;
      font-weight: 1000;
      background: rgba(0,0,0,.28);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(232,236,239,.92);
      flex-shrink:0;
      box-shadow: inset 0 0 0 1px rgba(22,163,74,.14);
    }

    .tl-item .t{
      font-weight: 1000;
      letter-spacing: -.15px;
      font-size: 15px;
    }

    /* linha pontilhada vertical atrás de cada pill (como na print) */
    .tl-item:before{
      content:"";
      position:absolute;
      left: 50%;
      top: -26px;
      height: calc(100% + 52px);
      width: 0;
      border-left: 2px dashed rgba(255,255,255,.22);
      transform: translateX(-50%);
      pointer-events:none;
      display:none;
      opacity:.9;
    }

    /* Stagger layout (pills em posições diferentes) */
    .tl-item:nth-child(1){ grid-column: 1 / span 5; }
    .tl-item:nth-child(2){ grid-column: 3 / span 7; }
    .tl-item:nth-child(3){ grid-column: 5 / span 6; }
    .tl-item:nth-child(4){ grid-column: 5 / span 7; }
    .tl-item:nth-child(5){ grid-column: 8 / span 5; }

    /* Ajustes finos para não “brigar” com a linha central */
    .tl-item:nth-child(3),
    .tl-item:nth-child(4){
      background: linear-gradient(90deg, rgba(22,163,74,.18), rgba(0,0,0,.18));
      border-color: rgba(255,255,255,.12);
    }

    .tl-foot{
      position:relative;
      z-index:2;
      margin-top: 18px;
      color: rgba(232,236,239,.62);
      font-size: 13px;
      line-height: 1.6;
      padding: 0 6px;
    }

    /* Tablet */
    @media (max-width: 980px){
      .process-head{ grid-template-columns: 1fr; }
      .process-desc{ margin: 10px 0 0; justify-self:start; }

      .tl-grid{ grid-template-columns: repeat(6, 1fr); }
      .timeline:before{ left: 50%; }

      .tl-item:nth-child(1){ grid-column: 1 / span 4; }
      .tl-item:nth-child(2){ grid-column: 2 / span 5; }
      .tl-item:nth-child(3){ grid-column: 1 / span 5; }
      .tl-item:nth-child(4){ grid-column: 2 / span 5; }
      .tl-item:nth-child(5){ grid-column: 3 / span 4; }
    }

    /* Mobile */
    @media (max-width: 520px){
      .process{ padding: 74px 0 86px; }
      .wrap{ padding: 0 14px; }

      .timeline{ padding: 20px 14px 22px; border-radius: 22px; }
      .timeline:before{ display:none; }
      .tl-grid{ grid-template-columns: 1fr; gap: 12px; }
      .tl-item{ grid-column: 1 / -1 !important; }
      .tl-item:before{ left: 18px; transform:none; top:-16px; height: calc(100% + 32px); opacity:.55;  display:block;}
    }

    /* =================== BLOCO 06 | Credenciais (99Freelas) =================== */
    .credenciais{background: radial-gradient(1200px 600px at 10% 0%, rgba(22,163,74,.10), transparent 55%), var(--bg); padding: 78px 0;}
    .cred-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap: 22px; align-items: start;}
    .cred-card{background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: var(--shadow);}
    .cred-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 14px;}
    .badge-99{display:inline-flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);}
    .badge-99 .pill{
  font-weight:700;
  letter-spacing:.02em;
  font-size:12px;
  padding:6px 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: rgba(16,185,129,.18);
  border: 1px solid rgba(22,163,74,.35);
  color: var(--text);
}
    .stars{display:flex; align-items:center; gap:6px; font-weight:800;}
    .stars .score{font-size: 22px;}
    .stars .meta{font-size: 12px; color: var(--muted); font-weight:600;}
    .stats{display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px;}
    .stat{border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); padding: 14px;}
    .stat .n{font-size: 20px; font-weight:900; letter-spacing: -.02em;}
    .stat .l{font-size: 12px; color: var(--muted); font-weight:600; margin-top: 4px;}
    .reviews{display:grid; gap: 12px; margin-top: 14px;}
    .review{padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);}
    .review .t{font-weight:800; font-size: 13px; margin-bottom: 6px;}
    .review .b{color: var(--muted); font-size: 13px; line-height: 1.55;}
    .print99{width:100%; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); overflow:hidden; background:#0b0f12;}
    .print99 img{width:100%; height:auto; display:block; opacity: .95;}
    .hint-line{margin-top: 10px; font-size: 12px; color: var(--muted);}
    @media (max-width: 980px){
      .cred-grid{grid-template-columns: 1fr;}
      .stats{grid-template-columns: 1fr;}
    }

    
  /* === BLOCO 07 | SOBRE (cards alinhados à foto) ===================== */
  .about .container{max-width: var(--max); margin: 0 auto; padding: 0 18px;}
  @media (max-width: 520px){ .about .container{ padding: 0 14px; } }
  .about{
    padding: 92px 0;
    background: radial-gradient(900px 460px at 22% 55%, rgba(20,177,105,.14), transparent 60%),
                radial-gradient(900px 460px at 78% 35%, rgba(15,88,62,.20), transparent 60%),
                linear-gradient(180deg, #070c0c 0%, #060a0a 100%);
  }
  .about .section-top{ margin-bottom: 22px; }

  .about figure{margin:0;}
  .about-grid{
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    gap: 28px;
    align-items: stretch;
  }

  .about-photo{
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  height: 100%;
  min-height: 0;
  align-self: stretch;
  display: flex;
}
  .about-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
  flex: 1;
}

  .about-side{
    border-radius: 26px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .about-side h2{
    font-size: clamp(26px, 2.2vw, 34px);
    line-height: 1.12;
    margin: 0 0 10px;
    letter-spacing: -.02em;
  }
  .about-lead{
    margin: 0;
    color: rgba(255,255,255,.78);
    max-width: 58ch;
  }

  .about-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
  }
  .about-tag{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(20,177,105,.10);
    border: 1px solid rgba(20,177,105,.22);
    color: rgba(240,255,248,.92);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .01em;
  }
  .about-tag .dot{
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(20,177,105,.16);
  }

  .about-cards{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
    flex: 1; /* ocupa o miolo para acompanhar a altura da foto */
  }
  .about-card{
    flex: 1; /* 1 bloco por ponto, distribuindo pela altura */
    display: flex;
    gap: 14px;
    padding: 16px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .ac-ico{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: radial-gradient(120% 120% at 30% 30%, rgba(20,177,105,.28), rgba(20,177,105,.08));
    border: 1px solid rgba(20,177,105,.22);
    flex: 0 0 auto;
    box-shadow: 0 12px 26px rgba(0,0,0,.35);
  }
  .ac-ico img{ width: 26px; height: 26px; display:block; }

  .ac-txt h3{
    margin: 2px 0 6px;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -.01em;
  }
  .ac-txt p{
    margin: 0;
    color: rgba(255,255,255,.76);
    line-height: 1.55;
  }

  .about-foot{
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.07);
    color: rgba(255,255,255,.74);
  }

  @media (max-width: 980px){
    .about-grid{ grid-template-columns: 1fr; }
    .about-photo{ min-height: 420px; height: auto; }
    .about-photo img{ height: auto; }
    .about-side{ height: auto; }
    .about-cards{ flex: initial; }
    .about-card{ flex: initial; }
  }


.faq{ padding: 96px 0 112px; }
.faq .sec-head{ text-align:center; margin-bottom: 28px; }
.faq-grid{
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

/* Card */
.faq-item{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transform: translateY(0);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease, background .25s ease;
}

/* Hover (desktop) */
@media (hover:hover){
  .faq-item:hover{
    transform: translateY(-1px);
    box-shadow: 0 22px 52px rgba(0,0,0,.38);
    border-color: rgba(255,255,255,.16);
  }
}

/* Question row */
.faq-question{
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  user-select: none;

  border: 0;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
}

.faq-q{ display:block; }

/* Icon bubble + rotation (same “feel” do bloco referência) */
.faq-icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.18);

  transition: transform .35s ease, background .25s ease, border-color .25s ease;
}

.faq-icon svg{
  width: 18px;
  height: 18px;
  opacity: .95;
  display:block;
  transition: transform .35s ease;
}

.faq-icon svg path{ stroke: #ffffff !important; }

/* Divider inside card */
.faq-divider{
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.10) 25%, rgba(255,255,255,.10) 75%, transparent 100%);
}

/* Answer animation (max-height + opacity, controlado via JS) */
.faq-answer{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s ease, opacity .25s ease;
}

.faq-body{
  padding: 0 22px 18px;
  color: rgba(255,255,255,.76);
  line-height: 1.55;
  font-size: 15px;
}

.faq-body p{ margin: 0; }

/* Active */
.faq-item.active{
  border-color: rgba(40,204,113,.35);
  background: linear-gradient(180deg, rgba(40,204,113,.08), rgba(255,255,255,.035));
  box-shadow: 0 22px 56px rgba(0,0,0,.40);
}

.faq-item.active .faq-answer{ opacity: 1; }

.faq-item.active .faq-icon{
  background: radial-gradient(120% 120% at 30% 30%, rgba(40,204,113,.32), rgba(40,204,113,.10));
  border-color: rgba(40,204,113,.38);
  transform: rotate(180deg);
}

/* Acessibilidade */
.faq-question:focus-visible{
  outline: 2px solid rgba(40,204,113,.55);
  outline-offset: 3px;
  border-radius: 14px;
}

@media (prefers-reduced-motion: reduce){
  .faq-item,
  .faq-icon,
  .faq-icon svg,
  .faq-answer{
    transition: none !important;
  }
}

/* BLOCO 09 — CONTRATAR NO 99 */
.hire{
  padding: 84px 0;
  background:
    radial-gradient(900px 500px at 14% 15%, rgba(34,197,94,.18), transparent 60%),
    radial-gradient(900px 500px at 86% 85%, rgba(34,197,94,.12), transparent 60%);
}
.hire-grid{
  display:grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 28px;
  align-items: start;
}
.hire .kicker{
  display:flex; align-items:center; gap:10px;
  letter-spacing:.18em;
  font-size:12px;
  color: rgba(255,255,255,.68);
}
.hire .dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(8,164,220,.95);
  box-shadow: 0 0 0 6px rgba(8,164,220,.16);
}

/* Label "CONTRATAR NO 99" no mesmo estilo do "SOBRE" (pill) + azul 99 */
.hire .pill.pill-cta99{
  background: rgba(8,164,220,.12);
  border: 1px solid rgba(8,164,220,.24);
  color: rgba(255,255,255,.92);
  box-shadow: none;
  align-self: flex-start;
  width: fit-content;
}
.hire .pill.pill-cta99 .dot{
  background: rgba(8,164,220,.95) !important;
  box-shadow: 0 0 0 4px rgba(8,164,220,.18) !important;
}
.hire h2{
  margin: 14px 0 10px;
  font-size: clamp(30px, 4vw, 44px);
  line-height:1.08;
}
.hire .lead{
  margin: 0 0 22px;
  color: rgba(255,255,255,.76);
  max-width: 62ch;
}
.hire-steps{
  margin: 0;
  padding: 0 0 0 18px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.hire-steps li{
  color: rgba(255,255,255,.78);
}
.hire-steps strong{ color:#fff; font-weight: 800; }
.chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  margin: 0 8px;
  font-weight: 800;
  letter-spacing: .02em;
}
.copy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.copy-btn:hover{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.35);
  transform: translateY(-1px);
}
.hire-cta{
  margin-top: 22px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hire-note{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.74);
}
.hire-card{
  position: sticky;
  top: 88px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 18px;
  overflow: hidden;
}
.badge-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.28);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
}
.badge.ghost{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.72);
  font-weight: 800;
}
.hire-mini{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.mini{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 12px 12px 10px;
}
.mini-num{
  font-size: 26px;
  font-weight: 1000;
  line-height: 1;
}
.mini-lbl{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.68);
}
.hire-shot{
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
}
.hire-small{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}


/* RODAPÉ */
.site-footer{
  padding: 46px 0 28px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.28));
}
.footer-top{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
}
.footer-brand{ min-width: 0; }
.footer-logo{ width: 180px; height: auto; opacity: .95; }
.footer-desc{
  margin: 10px 0 0;
  color: rgba(255,255,255,.70);
  max-width: 60ch;
  line-height: 1.45;
}
.footer-nav{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  align-content: start;
}
.footer-nav a{
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-weight: 600;
}
.footer-nav a:hover{ color: #fff; text-decoration: underline; }

.footer-note{
  margin: 18px 0 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.58);
}

.footer-bottom{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  text-align: center;
}
.footer-copy{
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.68);
}
@media (max-width: 980px){
  .hire-grid{ grid-template-columns: 1fr; }
  .hire-card{ position: relative; top: auto; }
  .footer-grid{ grid-template-columns: 1fr; }
}
@media (min-width: 980px){
  .about-grid{align-items: stretch;}
}

.about-tags{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 14px}


    /* Credenciais (bloco 06) — card direito sem print */
    .cred-right-head{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      margin-bottom:14px;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      font-weight:800;
      font-size:13px;
      letter-spacing:.2px;
      color: rgba(255,255,255,.92);
      background: rgba(16,185,129,.12);
      border: 1px solid rgba(16,185,129,.22);
      box-shadow: 0 10px 24px rgba(0,0,0,.22);
    }
    .pill.subtle{
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.12);
      color: rgba(255,255,255,.82);
      font-weight:700;
    }
    .cred-right-title{
      margin: 0 0 12px;
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: -.2px;
    }
    .cred-benefits{
      list-style:none;
      padding:0;
      margin: 0 0 16px;
      display:flex;
      flex-direction:column;
      gap: 12px;
    }
    .cred-benefits li{
      display:flex;
      gap: 10px;
      align-items:flex-start;
      color: rgba(255,255,255,.86);
      line-height: 1.45;
    }
    .cred-benefits li strong{
      color: rgba(255,255,255,.94);
      font-weight: 800;
    }
    .mini-ico{
      width:26px;
      height:26px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background: rgba(16,185,129,.10);
      border: 1px solid rgba(16,185,129,.22);
      color: rgba(255,255,255,.92);
      font-weight: 900;
      flex: 0 0 26px;
      margin-top: 1px;
    }
    .cred-footnote{
      margin: 14px 0 0;
      color: rgba(255,255,255,.66);
      font-size: 13px;
      line-height: 1.4;
    }
    @media (max-width: 980px){
      .cred-right-title{ font-size: 18px; }
    }


/* --- CREDENCIAIS (v2) --- */
.cred-single{
  max-width: 980px;
  margin: 0 auto;
  padding: 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}
.cred-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom: 18px;
}
.cred-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.25);
  color:#E9FFF1;
  font-weight:800;
  letter-spacing:.2px;
}
.cred-score{ text-align:right; }
.cred-score-value{
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.5px;
}
.cred-score-meta{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.70);
}
.cred-reviews{
  display:grid;
  gap:14px;
}


@media (min-width: 981px){
  .cred-reviews{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .review-card{ min-height: 160px; }
}

.review-card{
  padding: 18px 18px;
  border-radius: 22px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-direction: column;
}

.review-quote{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.2px;
}
.review-project{
  margin: 0;
  margin-top: auto; /* fixa a descrição no rodapé do card */
  font-size: 14px;
  color: rgba(255,255,255,.72);
}

@media (max-width: 720px){
  .cred-single{ padding: 18px; border-radius: 22px; }
  .cred-score{ text-align:left; }
  .cred-score-value{ font-size: 38px; }
  .review-quote{ font-size: 16px; }
}

/* ==== BLOCO 09 (v2) — CTA perfil 99 ==== */
.hire-grid.v2{ align-items: stretch; }
.hire-left{ display:flex; flex-direction:column; }
.hire-left .h2{ margin-top: 10px; }
.hire-left .lead{ max-width: 58ch; }
.hire-bullets{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding: 0;
  margin: 18px 0 22px;
}
.hire-bullets li{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  color: rgba(255,255,255,.86);
  line-height: 1.35;
}
.hire-bullets b{ color: rgba(255,255,255,.96); font-weight: 900; }
.hire-bullets .bicon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.28);
  color: rgba(255,255,255,.95);
  flex: 0 0 auto;
  margin-top: 1px;
}
.hire-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.btn-99{
  justify-content: flex-start;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(8,164,220,.95), rgba(8,164,220,.78));
  border: 1px solid rgba(8,164,220,.55);
  color: rgba(255,255,255,.98);
  font-weight: 1000;
  text-decoration:none;
  box-shadow: 0 14px 34px rgba(8,164,220,.18);
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}
.btn-99 img{ height: 22px; width:auto; display:block; }

/* btn-99 layout (texto + logo à direita) */
.btn-99-text{ display:inline-block; }
.btn-99 .logo99{ height:22px; width:auto; display:block; margin-left:auto; opacity:.98; }
@media (max-width: 860px){
  .btn-99{ justify-content:center; }
  .btn-99 .logo99{ margin-left:10px; }
}
.btn-99:hover{
  background: linear-gradient(180deg, rgba(8,164,220,1), rgba(8,164,220,.82)); transform: translateY(-1px); filter: brightness(1.04); border-color: rgba(8,164,220,.75); }
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  text-decoration:none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn-ghost:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }

.hire-note{
  margin-top: auto;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.80);
}

.hire-card.v2{
  height: 100%;
  display:flex;
  flex-direction:column;
}
.hire-card-top{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.02em;
}
.pill.green{
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.28);
}

.hire-score{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hire-score .score{
  font-size: 54px;
  font-weight: 1100;
  line-height: 1;
}
.hire-score .score-title{
  font-weight: 1000;
  color: rgba(255,255,255,.92);
}
.hire-score .score-sub{
  margin-top: 4px;
  color: rgba(255,255,255,.72);
  max-width: 42ch;
  line-height: 1.35;
}
.hire-proof{
  display:grid;
  gap: 12px;
  padding-top: 16px;
}
.proof-item{
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.proof-title{
  font-weight: 1000;
  color: rgba(255,255,255,.92);
}
.proof-sub{
  margin-top: 4px;
  color: rgba(255,255,255,.74);
  line-height: 1.35;
}
.hire-smallprint{
  margin-top: auto;
  padding-top: 14px;
  color: rgba(255,255,255,.65);
  font-size: 13px;
}

/* mobile */
@media (max-width: 860px){
  .btn-99{ width: 100%; justify-content:center; }
  .btn-ghost{ width: 100%; }
  .hire-actions{ gap: 10px; }
}


    /* =========================================================
       BLOCO 02.1 — CARROSSEL INFINITO (FERRAMENTAS)
       ========================================================= */
    .sr-only{
      position:absolute!important;
      width:1px;height:1px;
      padding:0;margin:-1px;
      overflow:hidden;clip:rect(0,0,0,0);
      white-space:nowrap;border:0;
    }

    .tool-marquee{
      padding: 10px 0;
      border-top: 1px solid rgba(15,17,19,.10);
      border-bottom: 1px solid rgba(15,17,19,.10);
      background: linear-gradient(180deg, rgba(255,255,255,1), rgba(247,248,250,1));

    }
    .tool-marquee__mask{
      position:relative;
      overflow:hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
              mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }
    .tool-marquee__track{
      display:flex;
      width:max-content;
      will-change: transform;
      animation: tool-marquee 30s linear infinite;
    }
    .tool-marquee__track:hover{ animation-play-state: paused; }

    .tool-marquee__group{
      display:flex;
      align-items:center;
      gap: 14px;
      padding: 12px 0;
          padding-right: 14px;
    }
    .tool-marquee__item{
      flex: 0 0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 10px 14px;
      border: 1px solid rgba(15,17,19,.10);
      background: rgba(255,255,255,.92);
      border-radius: 14px;
      box-shadow: 0 10px 24px rgba(0,0,0,.10);
      transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;

    }
    .tool-marquee__item img{
      height: 34px;
      width:auto;
      display:block;
      opacity: 1;
      filter: none;
      transition: opacity .18s ease, filter .18s ease;
      user-select:none;
      -webkit-user-drag:none;

    }
    .tool-marquee__item:hover{
      transform: translateY(-1px);
      border-color: rgba(22,163,74,.35);
      background: rgba(22,163,74,.06);
      box-shadow: 0 12px 26px rgba(0,0,0,.12);
    }
    .tool-marquee__item:hover img{
      opacity: 1;
      filter: none;
    }

    @keyframes tool-marquee{
      from{ transform: translateX(0); }
      to{ transform: translateX(-50%); }
    }

    @media (max-width: 560px){
      .tool-marquee__group{ gap: 10px;         padding-right: 10px;
      }
      .tool-marquee__item{ padding: 9px 12px; border-radius: 13px; }
      .tool-marquee__item img{ height: 28px; }
      .tool-marquee__track{ animation-duration: 24s; }
    }

    
/* =========================================================
   AJUSTE — CARROSSEL COM FERRAMENTAS DE WHATSAPP/AUTOMAÇÃO
   - usado quando a ferramenta entra como texto/badge, não apenas imagem
   ========================================================= */
.tool-marquee__item--text{
  min-width: 126px;
  min-height: 56px;
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: 15px;
  color: #0B1516;
  background: rgba(255,255,255,.94);
}
.tool-marquee__item--text span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
}
.tool-marquee__item--text span::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--green2);
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}
@media (max-width: 560px){
  .tool-marquee__item--text{
    min-width: 112px;
    min-height: 46px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce){
      .tool-marquee__mask{
        -webkit-mask-image:none;
                mask-image:none;
        overflow-x:auto;
      }
      .tool-marquee__track{
        animation:none;
      }
      .tool-marquee__group{
        padding: 10px 10px;
      }
      .tool-marquee__item{
        scroll-snap-align:start;
      }
    }

.portfolio .p-meta{background:linear-gradient(180deg,rgba(11,61,46,.92),rgba(7,36,27,.92))!important;color:#fff!important;}
.portfolio .p-name{color:#fff!important;}
.portfolio .p-tag{color:rgba(255,255,255,.92)!important;border-color:rgba(255,255,255,.24)!important;background:rgba(255,255,255,.10)!important;}

/* =========================================================
   AJUSTE DE CORES — BLOCO 04 (DIFERENCIAIS) + BLOCO FAQ EM FUNDO CLARO
   (somente cores | sem alterar estrutura)
   ========================================================= */

/* BLOCO 04 — DIFERENCIAIS (authority) em fundo claro */
.authority{
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
  border-top: 1px solid rgba(15,17,19,.10) !important;
}
.authority .kicker{ color: rgba(15,17,19,.62) !important; }
.authority .kicker .dot,
.authority .dot{
  background: rgba(15,17,19,.85) !important;
  box-shadow: 0 0 0 6px rgba(15,17,19,.08) !important;
}
.authority .sec-head h2,
.authority h2{ color: #0B1516 !important; }
.authority .sec-head .lead{ color: rgba(15,17,19,.72) !important; }

/* Cards continuam premium/escuros dentro da seção clara */
.authority .auth-card{
  background: linear-gradient(180deg, rgba(11,61,46,.94), rgba(7,36,27,.94)) !important;
  border-color: rgba(15,17,19,.16) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.22) !important;
}
.authority .auth-title{ color: rgba(255,255,255,.96) !important; }
.authority .auth-text{ color: rgba(255,255,255,.76) !important; }
.authority .auth-icon{
  background: rgba(0,0,0,.26) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(22,163,74,.14) !important;
}
.authority .auth-icon svg{ color: rgba(255,255,255,.92) !important; }

/* BLOCO FAQ em fundo claro */
.faq{
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
  border-top: 1px solid rgba(15,17,19,.10) !important;
}
.faq .kicker{ color: rgba(15,17,19,.62) !important; }
.faq .kicker .dot,
.faq .dot{
  background: rgba(15,17,19,.85) !important;
  box-shadow: 0 0 0 6px rgba(15,17,19,.08) !important;
}
.faq .sec-head h2{ color: #0B1516 !important; }
.faq .sec-head .lead{ color: rgba(15,17,19,.72) !important; }

.faq .faq-item{
  background: rgba(255,255,255,.98) !important;
  border-color: rgba(15,17,19,.12) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.10) !important;
}
.faq .faq-item summary{
  color: #0B1516 !important;
}
.faq .faq-item summary svg{
  opacity: .70 !important;
  color: #ffffff !important;
}
.faq .faq-body{
  color: rgba(15,17,19,.74) !important;
}
.faq .faq-item[open]{
  border-color: rgba(22,163,74,.28) !important;
  background: linear-gradient(180deg, rgba(22,163,74,.08), rgba(255,255,255,.98)) !important;
}


/* ===================== CORES v3 (apenas cores, sem mexer em estrutura) ===================== */
:root{
  --light-bg: #ffffff;
  --light-surface: #f6f7f9;
  --light-text: #0b1516;
  --light-muted: #4b5563;
  --light-border: rgba(15, 23, 42, .12);
}

/* BLOCO 06 | Credenciais (claro por fora, cards seguem dark) */
.section.credenciais{
  background: linear-gradient(180deg, var(--light-bg) 0%, var(--light-surface) 100%) !important;
  color: var(--light-text) !important;
}
.section.credenciais .section-kicker,
.section.credenciais .section-title{
  color: var(--light-text) !important;
}
.section.credenciais .section-subtitle{
  color: var(--light-muted) !important;
}

/* BLOCO 07 | Sobre (claro por fora, mantendo card/painel dark) */
.about{
  background: linear-gradient(180deg, var(--light-bg) 0%, var(--light-surface) 100%) !important;
  color: var(--light-text) !important;
}
.about h2{ color: var(--light-text) !important; }
.about .muted{ color: var(--light-muted) !important; }
.about .pill{
  background: rgba(11, 21, 22, .04) !important;
  border-color: rgba(11, 21, 22, .10) !important;
  color: var(--light-text) !important;
}


/* BLOCO 06 — CREDENCIAIS (ajuste de contraste em fundo claro) */
.credenciais{
  background: linear-gradient(180deg, var(--light-bg) 0%, var(--light-surface) 100%) !important;
  border-top: 1px solid rgba(15,17,19,.10) !important;
}
.credenciais .section-kicker{ color: rgba(15,17,19,.62) !important; }
.credenciais .section-kicker .dot{
  background: rgba(15,17,19,.85) !important;
  box-shadow: 0 0 0 6px rgba(15,17,19,.08) !important;
}
.credenciais .section-title,
.credenciais h2{ color: var(--light-text) !important; }
.credenciais .section-subtitle{ color: rgba(15,17,19,.72) !important; }

.credenciais .cred-single{
  background: #ffffff !important;
  border-color: rgba(15,17,19,.12) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.12) !important;
}
.credenciais .cred-score-value{ color: var(--light-text) !important; }
.credenciais .cred-score-meta{ color: rgba(15,17,19,.56) !important; }

.credenciais .review-card{
  background: #eef1f4 !important;
  border-color: rgba(15,17,19,.10) !important;
}
.credenciais .review-quote{ color: #0B1516 !important; }
.credenciais .review-project{ color: rgba(15,17,19,.72) !important; }

/* BLOCO 07 — SOBRE (seção clara por fora, conteúdo com contraste) */
.about .about-photo{
  box-shadow: 0 26px 70px rgba(0,0,0,.12) !important;
  border-color: rgba(15,17,19,.10) !important;
  background: #ffffff !important;
}
.about .about-side{
  background: #ffffff !important;
  border-color: rgba(15,17,19,.12) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.12) !important;
}
.about .about-lead{ color: rgba(15,17,19,.72) !important; }
.about .about-foot{
  border-top-color: rgba(15,17,19,.10) !important;
  color: rgba(15,17,19,.70) !important;
}
.about .about-tag{
  background: #eef1f4 !important;
  border-color: rgba(15,17,19,.10) !important;
  color: rgba(15,17,19,.75) !important;
}
.about .about-tag .dot{
  background: rgba(22,163,74,.90) !important;
  box-shadow: 0 0 0 6px rgba(22,163,74,.14) !important;
}
.about .about-card{
  background: #eef1f4 !important;
  border-color: rgba(15,17,19,.10) !important;
}
.about .about-card h3{ color: var(--light-text) !important; }
.about .about-card p{ color: rgba(15,17,19,.72) !important; }
.about .ac-ico{
  background: rgba(22,163,74,.12) !important;
  border-color: rgba(22,163,74,.20) !important;
  color: rgba(22,163,74,.95) !important;
}
.about .ac-ico svg{
  stroke: rgba(22,163,74,.95) !important;
}


/* Transição suave do claro -> escuro antes do bloco final */
.hire{
  position: relative;
}
.hire::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 140px;
  background: linear-gradient(180deg, var(--light-surface) 0%, rgba(11, 17, 20, 0) 100%);
  pointer-events: none;
}
.hire > .container{
  position: relative;
  z-index: 1;
}


/* =========================================================
   AJUSTE FINO — CONTRASTE VERDE (CREDENCIAIS + SOBRE)
   (sem mexer em estrutura/layout)
   ========================================================= */
.credenciais .review-card{
  background: linear-gradient(180deg, #0B3D2E 0%, #07241B 100%) !important;
  border-color: rgba(11,61,46,.40) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
}
.credenciais .review-quote{ color: rgba(255,255,255,.94) !important; }
.credenciais .review-project{ color: rgba(255,255,255,.78) !important; }

.about .about-tag{
  background: linear-gradient(180deg, #0B3D2E 0%, #07241B 100%) !important;
  border-color: rgba(11,61,46,.40) !important;
  color: rgba(255,255,255,.92) !important;
}
.about .about-card{
  background: linear-gradient(180deg, #0B3D2E 0%, #07241B 100%) !important;
  border-color: rgba(11,61,46,.40) !important;
}
.about .about-card h3{ color: rgba(255,255,255,.96) !important; }
.about .about-card p{ color: rgba(255,255,255,.82) !important; }
.about .ac-ico{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}


/* =========================================================
   AJUSTE — FAQ VERDE (cards) + TEXTO BRANCO
   (override final | sem mexer em estrutura)
   ========================================================= */
.faq .faq-item{
  background: linear-gradient(180deg, rgba(11,61,46,.94), rgba(7,36,27,.94)) !important;
  border-color: rgba(15,17,19,.16) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.18) !important;
}
.faq .faq-item summary{
  color: rgba(255,255,255,.96) !important;
}
.faq .faq-item summary svg{
  opacity: .92 !important;
}
.faq .faq-body{
  color: rgba(255,255,255,.82) !important;
}
.faq .faq-body p{ color: inherit !important; }

.faq .faq-item[open]{
  border-color: rgba(34,197,94,.45) !important;
  background: linear-gradient(180deg, rgba(22,163,74,.22), rgba(7,36,27,.94)) !important;
}


/* === PADRÃO DOS "PONTOS" (kicker/labels) ===
   Unifica o dot dos rótulos: SOBRE / CREDENCIAIS / PROCESSO / DIFERENCIAIS / PORTFÓLIO
   (sem mexer em estrutura, só cor) */
.kicker .dot,
.sec-head .dot,
.section-label .dot,
.section-pill .dot,
.badge .dot,
.tag .dot,
.pill .dot{
  background: rgba(15, 17, 19, .85) !important;
  box-shadow: 0 0 0 6px rgba(15, 17, 19, .10) !important;
}

/* FIX — ponto do kicker "PROCESSO" precisa ser branco (seção escura)
   Esse override vem DEPOIS do padrão acima, para vencer o !important. */
.process .kicker .dot{
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 0 0 6px rgba(255,255,255,.10) !important;
}

/* Se algum dot estiver dentro de seção escura e precisar contraste, ele pode ser sobrescrito pela seção.
   Mas por padrão, mantemos uniforme para os rótulos. */


/* =========================================================
   AJUSTE PONTUAL — MENU "SOBRE" EM PRETO (pedido do usuário)
   ========================================================= */
.ma-nav a[href="#sobre"],
.ma-drawer a[href="#sobre"]{
  color: #ffffff !important;
}
.ma-nav a[href="#sobre"]:hover{
  color: #ffffff !important;
}


/* === AJUSTE: label "SOBRE" da seção Sobre (não o menu) em preto === */
.about .kicker{ color: rgba(15,17,19,.78) !important; }
.about .kicker .dot{
  background: rgba(15,17,19,.85) !important;
  box-shadow: 0 0 0 6px rgba(15,17,19,.08) !important;
}


/* FIX — ponto do título "CONTRATAR NO 99" (bloco Hire) no azul do CTA */
.hire .kicker .dot,
.hire .section-kicker .dot{
  background: var(--blue99) !important;
  box-shadow: 0 0 0 6px rgba(8,164,220,.16) !important;
}


/* =========================================================
   FIX — LINHAS PONTILHADAS DO PROCESSO (não passar por cima dos textos)
   Objetivo: manter a linha "atrás" e impedir que apareça dentro dos pills,
   igual ao modelo que você mandou.
   ========================================================= */
.process .timeline .tl-item{
  /* fundo opaco (sem alpha) para "tampar" a linha pontilhada por baixo */
  background: linear-gradient(180deg, #0f3b2a, #0b2c20) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.process .timeline .tl-item:before{
  /* linha pontilhada fica atrás do conteúdo */
  z-index: 0;
  opacity: .75;
}
.process .timeline .tl-item > *{
  position: relative;
  z-index: 1;
}


    /* Force FAQ chevron white (override) */
    .faq-item summary svg,
    .faq .faq-item summary svg{
      color: #ffffff !important;
    }
    .faq-item summary svg path,
    .faq .faq-item summary svg path{
      stroke: #ffffff !important;
    }

/* =========================================================
   MOBILE REWORK — BLOCO 04 (DIFERENCIAIS)
   (somente mobile | desktop fica intocado)
   ========================================================= */
@media (max-width: 560px){
  /* título e lead mais “limpos” e com respiro real */
  .authority{ padding: 46px 0 62px !important; }
  .authority .sec-head{ text-align:left !important; margin-bottom: 18px !important; }
  .authority .kicker{ justify-content:flex-start !important; margin-bottom: 10px !important; }
  .authority h2{
    font-size: 28px !important;
    line-height: 1.10 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 10px !important;
  }
  .authority .lead{
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  /* cards: stack (ícone grande em cima, depois título e texto) */
  .authority .auth-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 18px !important;
  }

  .authority .auth-card{
    display:block !important;
    padding: 16px 16px 18px !important;
    border-radius: 18px !important;
    min-height: unset !important;
  }

  .authority .auth-icon{
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
    margin: 0 0 12px 0 !important;
  }
  .authority .auth-icon img{
    width: 30px !important;
    height: 30px !important;
  }

  /* título “até o fim” (100% da largura) + texto embaixo */
  .authority .auth-body{ width: 100% !important; }
  .authority .auth-title{
    font-size: 15.5px !important;
    line-height: 1.25 !important;
    margin: 0 0 6px 0 !important;
    max-width: none !important;
  }
  .authority .auth-text{
    font-size: 13.8px !important;
    line-height: 1.55 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* =========================================================
   MOBILE FIX — PROCESSO (remover linhas/GUIAS no mobile)
   (somente mobile | desktop/tablet continuam iguais)
   ========================================================= */
@media (max-width: 720px){
  /* remove as linhas verticais laterais e guias pontilhadas */
  .process .tl-edge,
  .process .tl-guide{ display:none !important; }

  /* remove linha central (timeline) no mobile */
  .process .timeline:before{ display:none !important; }

  /* remove a linha pontilhada atrás de cada pill no mobile */
  .process .timeline .tl-item:before{ display:none !important; }
}


/* =========================================================
   SCROLL REVEAL (poucas animações — clean)
   - usado só em seções-chave (portfólio, diferenciais, processo, credenciais, sobre, contratar)
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(0px);
  transition:
    opacity 520ms cubic-bezier(.2,.7,.2,1),
    transform 620ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.reveal-scale{
  transform: translate3d(0, 10px, 0) scale(.985);
  transition:
    opacity 520ms cubic-bezier(.2,.7,.2,1),
    transform 680ms cubic-bezier(.2,.7,.2,1);
}
.reveal.reveal-left{ transform: translate3d(-16px, 0, 0); }
.reveal.reveal-right{ transform: translate3d(16px, 0, 0); }

.reveal.is-in{
  opacity: 1;
  transform: none;
}

.reveal{ transition-delay: var(--d, 0ms); }

@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================================================
   RODADA 5 — DIFERENCIAIS (6 cards)
   Mantém a seção clara + cards verdes, agora em 3 colunas no desktop.
   ========================================================= */
.authority .auth-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.authority .auth-card{
  min-height: 232px !important;
  padding: 20px 18px 22px !important;
}
.authority .auth-icon img{
  width: 34px !important;
  height: 34px !important;
  object-fit: contain;
}
.authority .auth-title{
  font-size: 16px !important;
  line-height: 1.22 !important;
  margin-bottom: 8px !important;
}
.authority .auth-text{
  max-width: none !important;
  font-size: 14px !important;
  line-height: 1.56 !important;
}
@media (max-width: 980px){
  .authority .auth-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .authority .auth-card{ min-height: 220px !important; }
}
@media (max-width: 560px){
  .authority .auth-grid{ grid-template-columns: 1fr !important; }
  .authority .auth-card{ min-height: unset !important; }
}


/* =========================================================
   RODADA 6 — PORTFÓLIO REORGANIZADO
   - separa projetos em destaque dos exemplos complementares
   - adiciona descrição curta por card
   ========================================================= */
.portfolio{
  padding: 86px 0 92px !important;
}
.portfolio .portfolio-head{
  max-width: 940px !important;
  margin-bottom: 34px !important;
}
.portfolio-icon{
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(11,61,46,.96), rgba(7,36,27,.96));
  border: 1px solid rgba(15,17,19,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
}
.portfolio-icon img{
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}
.portfolio .sec-head h2{
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.portfolio-group{
  margin-top: 34px;
}
.portfolio-group + .portfolio-group{
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid rgba(15,17,19,.10);
}
.portfolio-subhead{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
}
.portfolio-label{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(22,163,74,.10);
  border: 1px solid rgba(22,163,74,.22);
  color: rgba(15,17,19,.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.portfolio-subhead h3{
  margin: 0;
  color: #0B1516;
  font-size: clamp(21px, 2.1vw, 30px);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.portfolio-subhead p{
  margin: 0;
  color: rgba(15,17,19,.66);
  font-size: 14.5px;
  line-height: 1.62;
}
.portfolio .portfolio-grid{
  margin-top: 0 !important;
}
.portfolio .p-card{
  background: #ffffff !important;
  border-color: rgba(15,17,19,.12) !important;
  box-shadow: 0 20px 54px rgba(0,0,0,.13) !important;
}
.portfolio .p-meta{
  display: block !important;
  padding: 16px 16px 17px !important;
  min-height: 118px;
}
.portfolio .p-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.portfolio .p-name{
  font-size: 15px !important;
  line-height: 1.2;
}
.portfolio .p-desc{
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 13.7px;
  line-height: 1.48;
}
.portfolio .p-hint{
  margin-top: 24px !important;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.16);
  color: rgba(15,17,19,.68) !important;
}
@media (max-width: 980px){
  .portfolio-subhead{
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }
}
@media (max-width: 560px){
  .portfolio{
    padding: 64px 0 74px !important;
  }
  .portfolio .portfolio-head{
    text-align: left !important;
    margin-bottom: 26px !important;
  }
  .portfolio-icon{
    margin-left: 0;
    width: 64px;
    height: 64px;
    border-radius: 20px;
  }
  .portfolio-icon img{
    width: 34px;
    height: 34px;
  }
  .portfolio .sec-head h2{
    font-size: 28px !important;
    line-height: 1.10 !important;
  }
  .portfolio .sec-head .lead{
    font-size: 14.8px !important;
    line-height: 1.62 !important;
  }
  .portfolio-group{
    margin-top: 26px;
  }
  .portfolio-group + .portfolio-group{
    margin-top: 32px;
    padding-top: 28px;
  }
  .portfolio-subhead h3{
    font-size: 22px;
  }
  .portfolio-subhead p{
    font-size: 14px;
  }
  .portfolio .p-meta{
    min-height: unset;
    padding: 15px !important;
  }
  .portfolio .p-topline{
    align-items:flex-start;
  }
  .portfolio .p-tag{
    flex: 0 0 auto;
  }
}


/* =========================================================
   AJUSTE — PORTFÓLIO COM 6 DEMOS + 1 DESTAQUE INSTITUCIONAL
   ========================================================= */
.portfolio-grid--single{
  grid-template-columns: 1fr !important;
  max-width: 100%;
}
@media (min-width: 1101px){
  .portfolio-grid--single .p-card{
    grid-column: 1 / -1 !important;
  }
  .portfolio .p-card--wide{
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    align-items: stretch;
  }
  .portfolio .p-card--wide .p-thumb{
    height: 100%;
    min-height: 310px;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid rgba(15,17,19,.08);
  }
  .portfolio .p-card--wide .p-meta{
    min-height: 310px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 30px !important;
  }
  .portfolio .p-card--wide .p-name{
    font-size: 21px !important;
  }
  .portfolio .p-card--wide .p-desc{
    font-size: 15.2px;
    line-height: 1.58;
    max-width: 44ch;
  }
}
@media (max-width: 1100px){
  .portfolio-grid--single{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 560px){
  .portfolio .p-card--wide .p-name{
    font-size: 15px !important;
  }
}


/* =========================================================
   RODADA 7 — PROCESSO + CREDIBILIDADE
   - preserva o gráfico/timeline atual
   - adiciona descrição por etapa e reforço de prova/99Freelas
   ========================================================= */
.process .tl-item{
  align-items:flex-start !important;
  gap: 14px !important;
  min-height: 122px !important;
  padding: 18px 20px !important;
}
.process .tl-icon{
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display:grid;
  place-items:center;
  flex: 0 0 46px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.12);
}
.process .tl-icon img{
  width: 27px;
  height: 27px;
  display:block;
  object-fit:contain;
}
.process .tl-body{
  min-width:0;
  position:relative;
  z-index:1;
}
.process .tl-title-row{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 7px;
}
.process .tl-desc{
  margin:0;
  color: rgba(232,236,239,.70);
  font-size: 13.2px;
  line-height: 1.42;
  max-width: 44ch;
}
.process .tl-item .t{
  line-height: 1.18;
}
@media (max-width: 980px){
  .process .tl-item{
    min-height: 130px !important;
  }
}
@media (max-width: 720px){
  .process .tl-item{
    min-height: unset !important;
    padding: 16px !important;
  }
  .process .tl-icon{
    width: 44px;
    height: 44px;
    flex-basis:44px;
  }
  .process .tl-title-row{
    align-items:flex-start;
  }
  .process .tl-desc{
    font-size: 13.4px;
    line-height: 1.48;
    max-width:none;
  }
}
@media (max-width: 430px){
  .process .tl-item{
    flex-direction:column;
    gap: 12px !important;
  }
}

/* Credibilidade reorganizada */
.credibility{
  padding: 86px 0 92px !important;
  background:
    radial-gradient(720px 360px at 14% 0%, rgba(22,163,74,.09), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
}
.credibility .credibility-head{
  max-width: 920px;
  margin-bottom: 30px;
}
.credibility-icon{
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  border-radius: 22px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, rgba(11,61,46,.96), rgba(7,36,27,.96));
  border: 1px solid rgba(15,17,19,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
}
.credibility-icon img{
  width: 38px;
  height: 38px;
  display:block;
  object-fit:contain;
}
.credibility .section-title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.credibility .section-subtitle{
  margin: 0 auto;
  max-width: 74ch;
  color: rgba(15,17,19,.72) !important;
  font-size: 15.5px;
  line-height: 1.68;
}
.credibility-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr .95fr;
  gap: 16px;
  margin: 28px auto 20px;
  max-width: 1080px;
}
.credibility-score-card,
.credibility-mini-card{
  min-height: 190px;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(15,17,19,.14);
  background: linear-gradient(180deg, #0B3D2E 0%, #07241B 100%);
  color:#fff;
  box-shadow: 0 20px 54px rgba(0,0,0,.16);
}
.credibility-score-card{
  display:flex;
  align-items:center;
  gap: 18px;
}
.credibility-score-card .cred-score-value{
  font-size: clamp(54px, 7vw, 86px);
  color:#fff !important;
  letter-spacing: -.06em;
  flex: 0 0 auto;
}
.credibility-score-card h3,
.credibility-mini-card h3{
  margin: 0 0 8px;
  color: rgba(255,255,255,.96);
  font-size: 17px;
  line-height:1.2;
}
.credibility-score-card p,
.credibility-mini-card p{
  margin:0;
  color: rgba(255,255,255,.76);
  font-size: 13.8px;
  line-height:1.55;
}
.credibility-mini-icon{
  width: 58px;
  height: 58px;
  display:grid;
  place-items:center;
  border-radius: 17px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px rgba(22,163,74,.10);
}
.credibility-mini-icon img{
  width: 32px;
  height: 32px;
  display:block;
  object-fit:contain;
}
.credibility .cred-single{
  max-width: 1080px !important;
  padding: 20px !important;
}
.credibility .cred-reviews{
  margin-top:0;
}
.credibility .review-card{
  min-height: 146px !important;
}
.credibility-close{
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.16);
  color: rgba(15,17,19,.70);
  font-size: 14px;
  line-height: 1.55;
  text-align:center;
}
@media (max-width: 980px){
  .credibility-grid{
    grid-template-columns: 1fr;
  }
  .credibility-score-card,
  .credibility-mini-card{
    min-height: unset;
  }
}
@media (max-width: 560px){
  .credibility{
    padding: 64px 0 76px !important;
  }
  .credibility .credibility-head{
    text-align:left !important;
    margin-bottom: 24px;
  }
  .credibility-icon{
    margin-left:0;
    width:64px;
    height:64px;
    border-radius:20px;
  }
  .credibility-icon img{
    width:34px;
    height:34px;
  }
  .credibility .section-title{
    font-size: 28px;
    line-height:1.10;
  }
  .credibility .section-subtitle{
    font-size: 14.8px;
    line-height:1.62;
  }
  .credibility-score-card{
    flex-direction:column;
    align-items:flex-start;
    gap: 8px;
  }
  .credibility-score-card .cred-score-value{
    font-size: 58px;
  }
  .credibility .cred-single{
    padding: 16px !important;
    border-radius: 22px !important;
  }
}


/* =========================================================
   RODADA 8 — SOBRE + FAQ + CTA FINAL + RODAPÉ
   - atualiza narrativa final
   - mantém accordion e estrutura técnica existentes
   ========================================================= */

/* Sobre refinado */
.about .section-top{
  max-width: 840px;
}
.about .section-top .muted{
  max-width: 68ch;
  line-height: 1.65;
}
.about .about-grid{
  display: grid !important;
  grid-template-columns: .92fr 1.08fr !important;
  gap: 28px !important;
  align-items: stretch !important;
}
.about .about-photo{
  min-height: 520px !important;
}
.about .about-photo img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display:block !important;
}
.about .about-side h2{
  color: #0B1516 !important;
}
.about .about-lead{
  font-size: 15.5px !important;
  line-height: 1.68 !important;
}
.about .ac-ico img{
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
}
@media (max-width: 980px){
  .about .about-grid{
    grid-template-columns: 1fr !important;
  }
  .about .about-photo{
    min-height: 430px !important;
  }
}
@media (max-width: 560px){
  .about{
    padding: 64px 0 74px !important;
  }
  .about .section-top{
    margin-bottom: 20px !important;
  }
  .about .section-top h2{
    font-size: 28px !important;
    line-height: 1.10 !important;
  }
  .about .section-top .muted{
    font-size: 14.8px !important;
    line-height: 1.62 !important;
  }
  .about .about-photo{
    min-height: 340px !important;
    border-radius: 22px !important;
  }
  .about .about-side{
    padding: 20px !important;
    border-radius: 22px !important;
  }
  .about .about-side h2{
    font-size: 23px !important;
  }
  .about .about-card{
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* FAQ refinado */
.faq .faq-head-icon{
  width: 66px;
  height: 66px;
  margin: 0 auto 16px;
  display:grid;
  place-items:center;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(11,61,46,.96), rgba(7,36,27,.96));
  border: 1px solid rgba(15,17,19,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
}
.faq .faq-head-icon img{
  width: 36px;
  height: 36px;
  display:block;
  object-fit:contain;
}
.faq .faq-grid{
  max-width: 1040px !important;
}
.faq .faq-question{
  color: rgba(255,255,255,.96) !important;
}
.faq .faq-body{
  color: rgba(255,255,255,.82) !important;
}
@media (max-width: 560px){
  .faq{
    padding: 64px 0 76px !important;
  }
  .faq .sec-head{
    text-align:left !important;
  }
  .faq .faq-head-icon{
    margin-left: 0;
    width:64px;
    height:64px;
    border-radius:20px;
  }
  .faq .sec-head h2{
    font-size: 28px !important;
    line-height: 1.10 !important;
  }
  .faq .sec-head .lead{
    font-size: 14.8px !important;
    line-height:1.62 !important;
  }
  .faq-question{
    padding: 16px !important;
    font-size: 15px !important;
  }
  .faq-body{
    padding: 0 16px 16px !important;
    font-size: 14.2px !important;
  }
}

/* CTA final refinado */
.hire .hire-left .h2{
  font-size: clamp(30px, 4vw, 46px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.03em;
}
.hire .hire-note-final{
  margin: 0 0 22px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(34,197,94,.18);
  background: rgba(34,197,94,.08);
  color: rgba(255,255,255,.78);
  max-width: 64ch;
  line-height: 1.55;
}
.hire-final-icon{
  width: 74px;
  height: 74px;
  display:grid;
  place-items:center;
  border-radius: 24px;
  background: rgba(8,164,220,.12);
  border: 1px solid rgba(8,164,220,.26);
  box-shadow: 0 18px 44px rgba(8,164,220,.10);
  margin-bottom: 18px;
}
.hire-final-icon img{
  width: 42px;
  height: 42px;
  object-fit: contain;
  display:block;
}
.hire .hire-score{
  align-items:center;
}
.hire .hire-score .score-sub{
  max-width: 46ch;
}
@media (max-width: 560px){
  .hire{
    padding: 70px 0 76px !important;
  }
  .hire .hire-left .h2{
    font-size: 30px !important;
  }
  .hire .lead{
    font-size: 15px !important;
    line-height: 1.62 !important;
  }
  .hire .hire-note-final{
    font-size: 14.3px !important;
  }
  .hire .hire-score{
    flex-direction: column;
    align-items:flex-start;
  }
  .hire-final-icon{
    width: 68px;
    height: 68px;
  }
}

/* Rodapé refinado */
.site-footer .footer-desc{
  max-width: 64ch;
}
.site-footer .footer-note{
  line-height: 1.45;
}
@media (max-width: 760px){
  .footer-top{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  .footer-nav{
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   RODADA 9 — REVISÃO RESPONSIVA + LIMPEZA FINAL
   - overrides finais para mobile/tablet
   - evita overflow horizontal
   - padroniza botões, espaçamentos e leitura
   ========================================================= */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg,
video{
  max-width:100%;
}
a,
button{
  -webkit-tap-highlight-color: transparent;
}
section[id]{
  scroll-margin-top: 92px;
}
.btn,
.btn-99,
.btn-ghost{
  min-height: 48px;
}
.ma-nav a:focus-visible,
.ma-drawer a:focus-visible,
.btn:focus-visible,
.btn-99:focus-visible,
.btn-ghost:focus-visible,
.faq-question:focus-visible{
  outline: 3px solid rgba(34,197,94,.45);
  outline-offset: 3px;
}
@media (max-width: 1100px) and (min-width: 901px){
  .ma-nav{
    gap: 6px;
  }
  .ma-nav a{
    font-size: 11.4px;
    padding: 9px 10px;
    letter-spacing: .065em;
  }
}
@media (max-width: 760px){
  section[id]{
    scroll-margin-top: 78px;
  }
  .wrap,
  .container,
  .about .container{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .ma-topbar-inner{
    padding: 10px 14px;
  }
  .ma-logo-img{
    height: 29px !important;
  }
  .hero{
    padding-top: 92px !important;
    padding-bottom: 30px !important;
  }
  .hero__grid{
    border-radius: 22px !important;
  }
  .hero__content{
    padding: 28px 18px 22px !important;
  }
  h1{
    font-size: 32px !important;
    line-height: 1.05 !important;
    letter-spacing: -.03em !important;
  }
  .hero p{
    font-size: 15.2px !important;
    line-height: 1.58 !important;
  }
  .hero__ctas{
    flex-direction: column;
    align-items: stretch;
  }
  .hero__ctas .btn{
    width: 100%;
    white-space: normal;
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero__visual{
    padding: 0 18px 24px !important;
  }
  .hero__mock{
    max-height: 360px;
    object-fit: cover;
    object-position: center;
  }
  .tool-marquee{
    padding: 6px 0 !important;
  }
  .tool-marquee__item{
    box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
  }
  .problem,
  .solution,
  .audience,
  .authority,
  .portfolio,
  .process,
  .credibility,
  .about,
  .faq,
  .hire{
    overflow-x: clip;
  }
  .problem .kicker,
  .solution .kicker,
  .audience .kicker,
  .authority .kicker,
  .portfolio .kicker,
  .credibility .section-kicker,
  .about .kicker,
  .faq .kicker,
  .hire .kicker{
    font-size: 11px !important;
    letter-spacing: .12em !important;
  }
  .solution-offer,
  .audience-card,
  .problem-card,
  .auth-card,
  .credibility-mini-card,
  .credibility-score-card,
  .about-card,
  .faq-item,
  .hire-card{
    border-radius: 18px !important;
  }
  .portfolio .p-thumb{
    padding: 14px !important;
  }
  .portfolio .p-topline{
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .portfolio .p-tag{
    width: fit-content;
  }
  .process-title{
    font-size: 34px !important;
    line-height: 1.05 !important;
  }
  .process-desc{
    font-size: 14.8px !important;
    line-height: 1.65 !important;
  }
  .timeline{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .tl-grid{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .credibility-grid{
    margin-top: 22px !important;
  }
  .about .about-photo{
    min-height: 320px !important;
  }
  .about .about-photo img{
    object-position: center top !important;
  }
  .faq-icon{
    width: 32px !important;
    height: 32px !important;
  }
  .hire-actions{
    width: 100%;
  }
  .hire-actions .btn-99,
  .hire-actions .btn-ghost{
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .footer-logo{
    width: 160px !important;
  }
}
@media (max-width: 430px){
  h1{
    font-size: 30px !important;
  }
  .hero__eyebrow{
    font-size: 10.4px !important;
    letter-spacing: .09em !important;
  }
  .hero__proof{
    font-size: 11.8px !important;
    padding: 7px 10px !important;
  }
  .problem h2,
  .solution h2,
  .audience .sec-head h2,
  .authority h2,
  .portfolio .sec-head h2,
  .credibility .section-title,
  .about .section-top h2,
  .faq .sec-head h2,
  .hire .hire-left .h2{
    font-size: 27px !important;
    line-height: 1.10 !important;
  }
  .solution-close,
  .hire-note-final,
  .credibility-close{
    padding: 14px !important;
  }
  .credibility-score-card .cred-score-value,
  .hire-score .score{
    font-size: 50px !important;
  }
  .about .about-side{
    padding: 18px !important;
  }
  .footer-desc,
  .footer-note,
  .footer-copy{
    font-size: 13px !important;
  }
}



/* =========================================================
   RODADA 10 — HERO CENTRALIZADO SEM FOTO
   - inspirado em hero de agência premium: texto no centro, fundo escuro, grid sutil e CTAs fortes
   - remove a imagem decorativa do topo e deixa a prova visual para o portfólio/carrossel
   ========================================================= */
.hero{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background:
    radial-gradient(860px 480px at 82% 18%, rgba(34,197,94,.16), transparent 62%),
    radial-gradient(740px 420px at 18% 12%, rgba(8,164,220,.10), transparent 60%),
    linear-gradient(180deg, #071014 0%, #070b0d 100%) !important;
}
.hero > .wrap{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.hero__grid{
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 690px;
  padding: 148px 18px 96px !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(760px 480px at 78% 8%, rgba(22,163,74,.22), transparent 66%),
    radial-gradient(640px 420px at 22% 20%, rgba(8,164,220,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)) !important;
  background-size: 32px 32px, 32px 32px, auto, auto, auto !important;
  box-shadow: none !important;
}
.hero__grid:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(7,11,13,.95) 0%, rgba(7,11,13,.52) 50%, rgba(22,163,74,.22) 100%),
    radial-gradient(720px 460px at 50% 38%, rgba(255,255,255,.045), transparent 68%);
  pointer-events:none;
  opacity:1 !important;
}
.hero__grid:after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height: 180px;
  background: linear-gradient(180deg, rgba(7,11,13,0), rgba(7,11,13,.86));
  pointer-events:none;
}
.hero__content{
  position:relative;
  z-index:1;
  width:100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 !important;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero__eyebrow{
  justify-content:center;
  margin-bottom: 18px !important;
  color: rgba(232,236,239,.68) !important;
}
.hero__eyebrow .dot{
  background: rgba(34,197,94,.95) !important;
  box-shadow: 0 0 0 6px rgba(34,197,94,.16) !important;
}
.hero h1{
  max-width: 980px;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom: 20px !important;
  font-size: clamp(44px, 5.25vw, 76px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}
.hero__highlight{
  color: var(--green2);
  text-shadow: 0 12px 42px rgba(34,197,94,.22);
}
.hero p{
  max-width: 760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom: 28px !important;
  color: rgba(232,236,239,.74) !important;
  font-size: 18px !important;
  line-height: 1.62 !important;
  text-wrap: balance;
}
.hero__ctas{
  justify-content:center !important;
  align-items:center !important;
  gap: 14px !important;
}
.hero__proofs{
  justify-content:center !important;
  max-width: 100% !important;
  margin-top: 24px !important;
  gap: 10px !important;
}
.hero__proof{
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.13) !important;
  color: rgba(232,236,239,.82) !important;
  box-shadow: none !important;
}
.hero__visual{
  display:none !important;
}
@media (max-width: 980px){
  .hero__grid{
    min-height: 620px;
    padding-top: 128px !important;
    padding-bottom: 82px !important;
  }
  .hero h1{
    max-width: 780px;
    font-size: clamp(38px, 8vw, 60px) !important;
  }
  .hero p{
    font-size: 16.4px !important;
  }
}
@media (max-width: 760px){
  .hero__grid{
    min-height: auto;
    padding: 112px 14px 66px !important;
  }
  .hero__content{
    text-align:center !important;
    align-items:center !important;
  }
  .hero h1{
    font-size: 34px !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
  }
  .hero p{
    font-size: 15.4px !important;
    line-height: 1.58 !important;
  }
  .hero__ctas{
    width:100%;
    max-width: 420px;
    flex-direction: column;
    align-items: stretch !important;
  }
  .hero__ctas .btn{
    width:100%;
  }
  .hero__proofs{
    max-width: 420px !important;
  }
  .hero__proof{
    width:100%;
    text-align:center !important;
    justify-content:center !important;
    white-space: normal !important;
  }
}
@media (max-width: 430px){
  .hero h1{
    font-size: 31px !important;
  }
  .hero__eyebrow{
    justify-content:center !important;
    max-width: 320px;
    line-height: 1.35;
  }
}

/* WP_IMG_PROTECT_CSS */
/* Protecao leve de imagens (nao impede 100%: print/DevTools) */
img{
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}



/* =========================================================
   RODADA 11 — HEADER RETRÁTIL + LOGO CENTRAL NO HERO
   - no desktop, o menu aparece ao passar o mouse no topo
   - no mobile, o header continua visível para não esconder o botão de menu
   ========================================================= */
.ma-logo{
  text-decoration:none;
  color:#fff;
}
.ma-logo-mark-img{
  height: 40px !important;
  width: auto !important;
}
.ma-logo-word{
  font-weight: 950;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -.035em;
  color: rgba(242,247,250,.96);
  text-shadow: 0 10px 24px rgba(0,0,0,.28);
}

.ma-header-hover-zone{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  z-index: calc(var(--ma-z) - 1);
  background: transparent;
}

@media (hover:hover) and (min-width: 901px){
  .ma-topbar{
    transform: translateY(calc(-100% - 8px));
    opacity: 0;
    pointer-events: none;
    background: rgba(7,10,12,.86) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.32);
    transition: transform .30s cubic-bezier(.2,.7,.2,1), opacity .22s ease, background .22s ease;
  }
  .ma-header-hover-zone:hover + .ma-topbar,
  .ma-topbar:hover,
  .ma-topbar:focus-within{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .ma-topbar-inner{
    max-width: 1360px !important;
    min-height: 74px;
    padding: 12px 22px !important;
  }
  .ma-nav{
    gap: 14px !important;
  }
  .ma-nav a{
    font-size: 12.2px !important;
    letter-spacing: .085em !important;
  }
}

@media (hover:none), (max-width: 900px){
  .ma-header-hover-zone{ display:none; }
  .ma-topbar{
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
}

.hero-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 16px;
  margin: 0 auto 82px;
  color:#fff;
  text-decoration:none;
  user-select:none;
  filter: drop-shadow(0 22px 42px rgba(0,0,0,.38));
}
.hero-brand__mark{
  width: 92px;
  height: auto;
  display:block;
}
.hero-brand__text{
  font-size: clamp(38px, 4.3vw, 64px);
  line-height: .92;
  font-weight: 1000;
  letter-spacing: -.055em;
  color: #fff;
}
.hero__grid{
  min-height: 760px !important;
  padding-top: 62px !important;
  padding-bottom: 92px !important;
  align-items: flex-start !important;
}
.hero h1{
  max-width: 1040px !important;
}

@media (max-width: 980px){
  .hero__grid{
    min-height: 690px !important;
    padding-top: 92px !important;
    padding-bottom: 76px !important;
  }
  .hero-brand{
    margin-bottom: 58px;
  }
  .hero-brand__mark{ width: 74px; }
}

@media (max-width: 760px){
  .ma-logo-mark-img{ height: 32px !important; }
  .ma-logo-word{ font-size: 18px; }
  .hero__grid{
    min-height: auto !important;
    padding-top: 118px !important;
    padding-bottom: 66px !important;
  }
  .hero-brand{
    gap: 10px;
    margin-bottom: 34px;
  }
  .hero-brand__mark{ width: 54px; }
  .hero-brand__text{ font-size: 30px; }
}

@media (max-width: 430px){
  .hero-brand__mark{ width: 48px; }
  .hero-brand__text{ font-size: 27px; }
  .hero-brand{ margin-bottom: 28px; }
}


/* =========================================================
   RODADA 12 — HERO MAIS COMPACTO + CARROSSEL NA PRIMEIRA DOBRA
   - reduz a altura do topo para o carrossel aparecer mais cedo
   - preserva o foco StoryBrand: logo, headline, subheadline e CTAs
   ========================================================= */
@media (min-width: 981px){
  .hero__grid{
    min-height: 650px !important;
    padding-top: 46px !important;
    padding-bottom: 58px !important;
  }
  .hero-brand{
    margin-bottom: 54px !important;
  }
  .hero h1{
    margin-bottom: 18px !important;
  }
  .hero p{
    margin-bottom: 24px !important;
  }
}

@media (min-width: 761px) and (max-width: 980px){
  .hero__grid{
    min-height: 620px !important;
    padding-top: 74px !important;
    padding-bottom: 58px !important;
  }
  .hero-brand{
    margin-bottom: 44px !important;
  }
}

@media (max-width: 760px){
  .hero__grid{
    padding-top: 104px !important;
    padding-bottom: 52px !important;
  }
  .hero-brand{
    margin-bottom: 28px !important;
  }
}


/* =========================================================
   RODADA 13 — REPOSICIONAMENTO DO HERO/HEADER ESTILO ADAPT
   - logo mais alto
   - bloco de texto com mais respiro
   - CTAs mais baixos, como referência enviada
   - carrossel continua aparecendo na primeira dobra
   ========================================================= */
@media (min-width: 981px){
  .hero__grid{
    min-height: 690px !important;
    padding-top: 54px !important;
    padding-bottom: 64px !important;
    align-items: flex-start !important;
  }

  .hero__content{
    max-width: 1060px !important;
  }

  .hero-brand{
    margin-bottom: 76px !important;
  }

  .hero h1{
    max-width: 1040px !important;
    margin-bottom: 22px !important;
  }

  .hero p{
    margin-bottom: 46px !important;
  }

  .hero__ctas{
    margin-top: 0 !important;
  }
}

@media (min-width: 761px) and (max-width: 980px){
  .hero__grid{
    min-height: 650px !important;
    padding-top: 78px !important;
    padding-bottom: 60px !important;
  }

  .hero-brand{
    margin-bottom: 54px !important;
  }

  .hero p{
    margin-bottom: 34px !important;
  }
}

@media (max-width: 760px){
  .hero__grid{
    padding-top: 104px !important;
    padding-bottom: 54px !important;
  }

  .hero-brand{
    margin-bottom: 34px !important;
  }

  .hero p{
    margin-bottom: 26px !important;
  }
}



/* =========================================================
/* =========================================================
   RODADA 14 — MICROPROVA HUMANA NO HERO
   - reforça confiança para o público do 99Freelas sem voltar com foto no topo
   ========================================================= */
.hero .hero__subtitle{
  margin-bottom: 14px !important;
}
.hero__trust{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 9px;
  margin: 0 0 34px !important;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.028);
  color: rgba(232,236,239,.68) !important;
  font-size: 13.4px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  max-width: none !important;
  width: fit-content;
  white-space: nowrap;
  text-wrap: unset;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.hero__trust:before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--blue99);
  box-shadow: 0 0 0 0 rgba(8,164,220,.48), 0 0 14px rgba(8,164,220,.55);
  animation: heroTrustPulse 1.85s ease-out infinite;
}
@keyframes heroTrustPulse{
  0%{
    box-shadow: 0 0 0 0 rgba(8,164,220,.50), 0 0 10px rgba(8,164,220,.52);
  }
  70%{
    box-shadow: 0 0 0 12px rgba(8,164,220,0), 0 0 20px rgba(8,164,220,.34);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(8,164,220,0), 0 0 10px rgba(8,164,220,.36);
  }
}
@media (max-width: 760px){
  .hero .hero__subtitle{
    margin-bottom: 12px !important;
  }
  .hero__trust{
    max-width: 420px !important;
    margin-bottom: 26px !important;
    padding: 8px 12px;
    font-size: 12.6px !important;
    white-space: normal;
    text-wrap: balance;
  }
}


/* =========================================================
   RODADA 15 — TEXTO ROTATIVO NO HERO
   - troca apenas o complemento verde da headline
   - animação discreta para prender atenção sem virar ruído
   ========================================================= */
.hero__rotator{
  display: inline-block;
  transition: opacity .26s ease, transform .26s ease;
  will-change: opacity, transform;
}
.hero__rotator.is-changing{
  opacity: 0;
  transform: translateY(8px);
}
@media (prefers-reduced-motion: reduce){
  .hero__rotator{
    transition: none !important;
  }
}


/* =========================================================
   RODADA 16 — MOBILE HERO MAIS ALTO
   - aumenta o bloco principal no mobile
   - mantém o carrossel encostado na parte de baixo da primeira dobra
   ========================================================= */
@media (max-width: 760px){
  .ma-topbar-inner{
    min-height: 96px !important;
    padding: 16px 22px !important;
  }

  .ma-logo-mark-img{
    height: 58px !important;
  }

  .ma-logo-word{
    font-size: 22px !important;
  }

  .ma-burger{
    width: 72px !important;
    height: 72px !important;
    border-radius: 22px !important;
  }

  .ma-burger img{
    width: 30px !important;
    height: 30px !important;
  }

  .hero__grid{
    min-height: calc(100svh - 88px) !important;
    padding: 132px 22px 76px !important;
    justify-content: center !important;
  }

  .hero-brand{
    gap: 12px !important;
    margin-bottom: 42px !important;
  }

  .hero-brand__mark{
    width: 68px !important;
  }

  .hero-brand__text{
    font-size: 38px !important;
  }

  .hero h1{
    font-size: 42px !important;
    line-height: 1.04 !important;
    margin-bottom: 26px !important;
  }

  .hero p.hero__subtitle{
    font-size: 19px !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
  }

  .hero__trust{
    font-size: 15.4px !important;
    line-height: 1.5 !important;
    padding: 16px 20px !important;
    margin-bottom: 38px !important;
    border-radius: 999px !important;
  }

  .hero__trust:before{
    width: 10px !important;
    height: 10px !important;
  }

  .hero__ctas{
    max-width: 100% !important;
    gap: 16px !important;
  }

  .hero__ctas .btn{
    min-height: 76px !important;
    font-size: 19px !important;
    border-radius: 999px !important;
  }

  .tool-marquee{
    padding: 8px 0 !important;
  }

  .tool-marquee__group{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .tool-marquee__item{
    padding: 12px 18px !important;
    border-radius: 18px !important;
  }

  .tool-marquee__item img{
    height: 34px !important;
  }
}

@media (max-width: 430px){
  .hero__grid{
    min-height: calc(100svh - 84px) !important;
    padding: 126px 22px 72px !important;
  }

  .hero-brand{
    margin-bottom: 38px !important;
  }

  .hero-brand__mark{
    width: 62px !important;
  }

  .hero-brand__text{
    font-size: 34px !important;
  }

  .hero h1{
    font-size: 39px !important;
  }
}



/* =========================================================
   RODADA 17 — FRASES ROTATIVAS COM TAMANHO MAIS PARECIDO
   - evita salto visual quando o texto verde troca
   ========================================================= */
.hero__rotator{
  min-width: min(100%, 12.6em);
}
@media (max-width: 760px){
  .hero__rotator{
    min-width: auto;
  }
}



/* =========================================================
   AJUSTE — REMOÇÃO DE ÍCONES SOLICITADA
   - FAQ sem ícone superior
   - Credibilidade sem ícone superior
   - Card final sem ícone 99Freelas abaixo do selo
   ========================================================= */
.credibility .credibility-head{ margin-top: 0 !important; }
.faq .sec-head{ padding-top: 0 !important; }
.hire .hire-card-top{ margin-bottom: 22px !important; }
.hire .hire-score{ padding-top: 0 !important; }


/* =========================================================
   AJUSTE — REMOÇÃO DO ÍCONE SUPERIOR DO PORTFÓLIO
   ========================================================= */
.portfolio .portfolio-icon,
.portfolio-icon{
  display:none !important;
}
.portfolio .portfolio-head{
  margin-top: 0 !important;
}



/* =========================================================
   RODADA 18 — PROBLEMA | CARDS HORIZONTAIS 2x2
   - usa melhor o espaço no desktop
   - ícone à esquerda + texto à direita
   - mantém cantos arredondados e visual premium
   ========================================================= */
.problem .problem-cards{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 26px !important;
  margin-top: 30px !important;
}

.problem .problem-card{
  min-height: 138px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 18px 22px 18px 18px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #0B3D2E 0%, #07241B 100%) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.16) !important;
}

.problem .problem-icon{
  width: 106px !important;
  height: 106px !important;
  flex: 0 0 106px !important;
  margin: 0 !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 12px 30px rgba(0,0,0,.18) !important;
  position: relative;
}

.problem .problem-icon::after{
  content:"";
  position:absolute;
  top: 10px;
  right: -10px;
  width: 1px;
  height: calc(100% - 20px);
  background: rgba(255,255,255,.18);
}

.problem .problem-icon img{
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
}

.problem .problem-card-content{
  min-width: 0;
  padding-left: 2px;
}

.problem .problem-card h3{
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}

.problem .problem-card p{
  margin: 0 !important;
  font-size: 15.2px !important;
  line-height: 1.52 !important;
  color: rgba(255,255,255,.78) !important;
}

/* Tablet: mantém 2 colunas, mas reduz um pouco para não apertar */
@media (max-width: 1020px){
  .problem .problem-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .problem .problem-card{
    min-height: 132px !important;
    padding: 16px !important;
    gap: 16px !important;
  }

  .problem .problem-icon{
    width: 86px !important;
    height: 86px !important;
    flex-basis: 86px !important;
    border-radius: 24px !important;
  }

  .problem .problem-icon img{
    width: 48px !important;
    height: 48px !important;
  }

  .problem .problem-card h3{
    font-size: 16.6px !important;
  }

  .problem .problem-card p{
    font-size: 14.2px !important;
  }
}

/* Mobile: card horizontal compacto; se ficar muito apertado, empilha só no mobile menor */
@media (max-width: 700px){
  .problem .problem-cards{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .problem .problem-card{
    min-height: 124px !important;
    padding: 14px !important;
    gap: 14px !important;
    border-radius: 20px !important;
  }

  .problem .problem-icon{
    width: 78px !important;
    height: 78px !important;
    flex-basis: 78px !important;
    border-radius: 22px !important;
  }

  .problem .problem-icon::after{
    right: -8px;
  }

  .problem .problem-icon img{
    width: 44px !important;
    height: 44px !important;
  }

  .problem .problem-card h3{
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }

  .problem .problem-card p{
    font-size: 13.8px !important;
    line-height: 1.48 !important;
  }
}

@media (max-width: 380px){
  .problem .problem-card{
    align-items: flex-start !important;
  }

  .problem .problem-icon{
    width: 66px !important;
    height: 66px !important;
    flex-basis: 66px !important;
    border-radius: 18px !important;
  }

  .problem .problem-icon img{
    width: 36px !important;
    height: 36px !important;
  }
}


/* =========================================================
   RODADA 19 — SOLUÇÃO | ÍCONES ATUALIZADOS
   - troca os ícones de Landing Page e Site Institucional
   - aplica caixa de ícone no mesmo modelo do bloco Problema
   ========================================================= */
.solution .solution-offer{
  align-items: flex-start !important;
  gap: 22px !important;
}

.solution .solution-icon{
  width: 106px !important;
  height: 106px !important;
  flex: 0 0 106px !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 12px 30px rgba(0,0,0,.18) !important;
  position: relative;
}

.solution .solution-icon::after{
  content:"";
  position:absolute;
  top: 10px;
  right: -11px;
  width: 1px;
  height: calc(100% - 20px);
  background: rgba(255,255,255,.18);
}

.solution .solution-icon img{
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
}

.solution .solution-offer h3{
  margin-top: 4px !important;
}

@media (max-width: 1020px){
  .solution .solution-icon{
    width: 86px !important;
    height: 86px !important;
    flex-basis: 86px !important;
    border-radius: 24px !important;
  }

  .solution .solution-icon img{
    width: 48px !important;
    height: 48px !important;
  }
}

@media (max-width: 560px){
  .solution .solution-offer{
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .solution .solution-icon{
    width: 78px !important;
    height: 78px !important;
    flex: 0 0 78px !important;
    border-radius: 22px !important;
  }

  .solution .solution-icon::after{
    right: -8px;
  }

  .solution .solution-icon img{
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 380px){
  .solution .solution-icon{
    width: 66px !important;
    height: 66px !important;
    flex-basis: 66px !important;
    border-radius: 18px !important;
  }

  .solution .solution-icon img{
    width: 36px !important;
    height: 36px !important;
  }
}


/* =========================================================
   RODADA 20 — SOLUÇÃO | CARDS MAIS COMPACTOS
   - reduz a altura dos blocos da solução
   - mantém proporção semelhante aos cards horizontais do bloco Problema
   ========================================================= */
.solution .solution-offers{
  gap: 16px !important;
  align-content: center !important;
}

.solution .solution-offer{
  min-height: 138px !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 18px 22px 18px 18px !important;
  border-radius: 22px !important;
}

.solution .solution-offer h3{
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.solution .solution-offer p{
  font-size: 15.2px !important;
  line-height: 1.52 !important;
}

@media (max-width: 1020px){
  .solution .solution-offer{
    min-height: 132px !important;
    padding: 16px !important;
    gap: 16px !important;
  }

  .solution .solution-offer h3{
    font-size: 16.6px !important;
  }

  .solution .solution-offer p{
    font-size: 14.2px !important;
  }
}

@media (max-width: 560px){
  .solution .solution-offer{
    min-height: 124px !important;
    padding: 14px !important;
    gap: 14px !important;
    border-radius: 20px !important;
  }

  .solution .solution-offer h3{
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }

  .solution .solution-offer p{
    font-size: 13.8px !important;
    line-height: 1.48 !important;
  }
}

@media (max-width: 380px){
  .solution .solution-offer{
    align-items: flex-start !important;
  }
}




/* Nota opcional de WhatsApp/automação no bloco Solução */
.solution-auto-note{
  margin-top: 2px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(34,197,94,.22);
  background: rgba(22,163,74,.10);
  color: rgba(255,255,255,.78);
  font-size: 14.2px;
  line-height: 1.55;
}
@media (max-width: 560px){
  .solution-auto-note{
    font-size: 13.7px;
    line-height: 1.52;
    border-radius: 16px;
  }
}

/* =========================================================
   RODADA 21 — PARA QUEM É | CARDS HORIZONTAIS 2x2
   - aplica o mesmo modelo visual dos cards de dor
   - ícones atualizados + melhor aproveitamento de espaço
   ========================================================= */
.audience .audience-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 26px !important;
  margin-top: 30px !important;
}

.audience .audience-card{
  min-height: 138px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 18px 22px 18px 18px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #0B3D2E 0%, #07241B 100%) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.16) !important;
}

.audience .audience-icon{
  width: 106px !important;
  height: 106px !important;
  flex: 0 0 106px !important;
  margin: 0 !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 12px 30px rgba(0,0,0,.18) !important;
  position: relative;
}

.audience .audience-icon::after{
  content:"";
  position:absolute;
  top: 10px;
  right: -10px;
  width: 1px;
  height: calc(100% - 20px);
  background: rgba(255,255,255,.18);
}

.audience .audience-icon img{
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
}

.audience .audience-card-content{
  min-width: 0;
  padding-left: 2px;
}

.audience .audience-card h3{
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}

.audience .audience-card p{
  margin: 0 !important;
  font-size: 15.2px !important;
  line-height: 1.52 !important;
  color: rgba(255,255,255,.78) !important;
}

@media (max-width: 1020px){
  .audience .audience-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .audience .audience-card{
    min-height: 132px !important;
    padding: 16px !important;
    gap: 16px !important;
  }

  .audience .audience-icon{
    width: 86px !important;
    height: 86px !important;
    flex-basis: 86px !important;
    border-radius: 24px !important;
  }

  .audience .audience-icon img{
    width: 48px !important;
    height: 48px !important;
  }

  .audience .audience-card h3{
    font-size: 16.6px !important;
  }

  .audience .audience-card p{
    font-size: 14.2px !important;
  }
}

@media (max-width: 700px){
  .audience .audience-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .audience .audience-card{
    min-height: 124px !important;
    padding: 14px !important;
    gap: 14px !important;
    border-radius: 20px !important;
  }

  .audience .audience-icon{
    width: 78px !important;
    height: 78px !important;
    flex-basis: 78px !important;
    border-radius: 22px !important;
  }

  .audience .audience-icon::after{
    right: -8px;
  }

  .audience .audience-icon img{
    width: 44px !important;
    height: 44px !important;
  }

  .audience .audience-card h3{
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }

  .audience .audience-card p{
    font-size: 13.8px !important;
    line-height: 1.48 !important;
  }
}

@media (max-width: 380px){
  .audience .audience-card{
    align-items: flex-start !important;
  }

  .audience .audience-icon{
    width: 66px !important;
    height: 66px !important;
    flex-basis: 66px !important;
    border-radius: 18px !important;
  }

  .audience .audience-icon img{
    width: 36px !important;
    height: 36px !important;
  }
}

/* =========================================================
   RODADA 22 — DIFERENCIAIS | 3 PILARES
   - reduz 6 cards para 3 pilares principais
   - mantém ícones atuais como placeholder
   - diminui texto e melhora escaneabilidade
   ========================================================= */
.authority .auth-grid.auth-grid--pillars{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin-top: 34px !important;
}

.authority .auth-grid--pillars .auth-card{
  min-height: 300px !important;
  padding: 26px 24px 24px !important;
  border-radius: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg, #0B3D2E 0%, #07241B 100%) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.18) !important;
}

.authority .auth-grid--pillars .auth-icon{
  width: 76px !important;
  height: 76px !important;
  border-radius: 24px !important;
  margin: 0 0 18px 0 !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 14px 34px rgba(0,0,0,.18) !important;
}

.authority .auth-grid--pillars .auth-icon img{
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
}

.authority .auth-pill-label{
  display: inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.70);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.authority .auth-grid--pillars .auth-title{
  font-size: 26px !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  margin: 0 0 12px !important;
}

.authority .auth-grid--pillars .auth-text{
  font-size: 15.2px !important;
  line-height: 1.58 !important;
  color: rgba(255,255,255,.78) !important;
  margin: 0 !important;
  max-width: none !important;
}

.authority .auth-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
}

.authority .auth-tags span{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.76);
  font-size: 12.2px;
  font-weight: 850;
  line-height: 1.15;
}

@media (max-width: 980px){
  .authority .auth-grid.auth-grid--pillars{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .authority .auth-grid--pillars .auth-card{
    min-height: unset !important;
    flex-direction: row !important;
    gap: 18px !important;
    padding: 20px !important;
    border-radius: 24px !important;
  }

  .authority .auth-grid--pillars .auth-icon{
    flex: 0 0 78px !important;
    width: 78px !important;
    height: 78px !important;
    margin: 0 !important;
  }

  .authority .auth-tags{
    margin-top: 14px;
    padding-top: 0;
  }
}

@media (max-width: 560px){
  .authority .auth-grid.auth-grid--pillars{
    margin-top: 20px !important;
    gap: 12px !important;
  }

  .authority .auth-grid--pillars .auth-card{
    flex-direction: column !important;
    padding: 18px !important;
    border-radius: 20px !important;
  }

  .authority .auth-grid--pillars .auth-icon{
    width: 68px !important;
    height: 68px !important;
    flex-basis: 68px !important;
    border-radius: 20px !important;
    margin-bottom: 0 !important;
  }

  .authority .auth-grid--pillars .auth-icon img{
    width: 38px !important;
    height: 38px !important;
  }

  .authority .auth-pill-label{
    font-size: 10.5px;
    margin-bottom: 8px;
  }

  .authority .auth-grid--pillars .auth-title{
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }

  .authority .auth-grid--pillars .auth-text{
    font-size: 14.2px !important;
    line-height: 1.52 !important;
  }

  .authority .auth-tags{
    gap: 7px;
    margin-top: 12px;
  }

  .authority .auth-tags span{
    font-size: 11.8px;
    min-height: 28px;
    padding: 7px 9px;
  }
}


/* =========================================================
   RODADA 23 — DIFERENCIAIS | FUNIL DE 3 PILARES
   - funil visual: cards horizontais com larguras decrescentes
   - ícone à esquerda + texto à direita no mesmo padrão dos blocos atuais
   ========================================================= */
.authority .auth-funnel{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  margin-top: 34px;
}

.authority .auth-funnel::before{
  content:"";
  position:absolute;
  top: 34px;
  bottom: 34px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(22,163,74,0), rgba(22,163,74,.28), rgba(22,163,74,0));
  pointer-events:none;
}

.authority .auth-funnel-card{
  position: relative;
  z-index: 1;
  min-height: 148px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 28px 20px 22px;
  border-radius: 28px;
  background:
    radial-gradient(560px 240px at 18% 0%, rgba(34,197,94,.14), transparent 62%),
    linear-gradient(180deg, #0B3D2E 0%, #07241B 100%) !important;
  border: 1px solid rgba(15,17,19,.14);
  color: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.17);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

@media (hover:hover){
  .authority .auth-funnel-card:hover{
    transform: translateY(-2px);
    border-color: rgba(22,163,74,.42);
    box-shadow: 0 28px 78px rgba(0,0,0,.20);
  }
}

.authority .auth-funnel-card--wide{
  width: 100%;
}

.authority .auth-funnel-card--mid{
  width: 82%;
}

.authority .auth-funnel-card--narrow{
  width: 64%;
}

.authority .auth-funnel-icon{
  width: 106px;
  height: 106px;
  flex: 0 0 106px;
  display:grid;
  place-items:center;
  margin: 0;
  border-radius: 30px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 12px 30px rgba(0,0,0,.18);
  position: relative;
}

.authority .auth-funnel-icon::after{
  content:"";
  position:absolute;
  top: 10px;
  right: -12px;
  width: 1px;
  height: calc(100% - 20px);
  background: rgba(255,255,255,.18);
}

.authority .auth-funnel-icon img{
  width: 58px;
  height: 58px;
  object-fit: contain;
  display:block;
}

.authority .auth-funnel-body{
  min-width: 0;
  padding-left: 4px;
}

.authority .auth-funnel-label{
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.68);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.authority .auth-funnel-body h3{
  margin: 0 0 7px;
  color: rgba(255,255,255,.97);
  font-size: 28px;
  line-height: 1.06;
  letter-spacing: -.04em;
}

.authority .auth-funnel-body p{
  margin: 0;
  max-width: 64ch;
  color: rgba(255,255,255,.78);
  font-size: 15.4px;
  line-height: 1.54;
}

.authority .auth-funnel-card--narrow .auth-funnel-body p{
  max-width: 46ch;
}

@media (max-width: 1020px){
  .authority .auth-funnel{
    gap: 16px;
  }

  .authority .auth-funnel::before{
    display:none;
  }

  .authority .auth-funnel-card,
  .authority .auth-funnel-card--wide,
  .authority .auth-funnel-card--mid,
  .authority .auth-funnel-card--narrow{
    width: 100%;
  }

  .authority .auth-funnel-card{
    min-height: 132px;
    padding: 16px;
    gap: 16px;
    border-radius: 24px;
  }

  .authority .auth-funnel-icon{
    width: 86px;
    height: 86px;
    flex-basis: 86px;
    border-radius: 24px;
  }

  .authority .auth-funnel-icon img{
    width: 48px;
    height: 48px;
  }

  .authority .auth-funnel-body h3{
    font-size: 24px;
  }

  .authority .auth-funnel-body p{
    max-width: none;
    font-size: 14.4px;
  }
}

@media (max-width: 700px){
  .authority .auth-funnel{
    margin-top: 22px;
    gap: 12px;
  }

  .authority .auth-funnel-card{
    min-height: 124px;
    padding: 14px;
    gap: 14px;
    border-radius: 20px;
  }

  .authority .auth-funnel-icon{
    width: 78px;
    height: 78px;
    flex-basis: 78px;
    border-radius: 22px;
  }

  .authority .auth-funnel-icon::after{
    right: -8px;
  }

  .authority .auth-funnel-icon img{
    width: 44px;
    height: 44px;
  }

  .authority .auth-funnel-label{
    font-size: 10.4px;
    margin-bottom: 7px;
  }

  .authority .auth-funnel-body h3{
    font-size: 21px;
    margin-bottom: 6px;
  }

  .authority .auth-funnel-body p{
    font-size: 13.8px;
    line-height: 1.48;
  }
}

@media (max-width: 380px){
  .authority .auth-funnel-card{
    align-items: flex-start;
  }

  .authority .auth-funnel-icon{
    width: 66px;
    height: 66px;
    flex-basis: 66px;
    border-radius: 18px;
  }

  .authority .auth-funnel-icon img{
    width: 36px;
    height: 36px;
  }
}


/* =========================================================
   RODADA 24 — DIFERENCIAIS | FUNIL MAIS PROPORCIONAL
   - reduz largura geral, altura dos cards e peso visual
   - mantém formato de funil + ícone à esquerda
   ========================================================= */
.authority .auth-funnel{
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 22px !important;
}

.authority .auth-funnel::before{
  top: 28px !important;
  bottom: 28px !important;
}

.authority .auth-funnel-card{
  min-height: 128px !important;
  padding: 16px 24px 16px 18px !important;
  gap: 18px !important;
  border-radius: 24px !important;
}

.authority .auth-funnel-card--wide{
  width: 92% !important;
}

.authority .auth-funnel-card--mid{
  width: 76% !important;
}

.authority .auth-funnel-card--narrow{
  width: 60% !important;
}

.authority .auth-funnel-icon{
  width: 92px !important;
  height: 92px !important;
  flex-basis: 92px !important;
  border-radius: 26px !important;
}

.authority .auth-funnel-icon img{
  width: 50px !important;
  height: 50px !important;
}

.authority .auth-funnel-label{
  font-size: 10.6px !important;
  padding: 5px 9px !important;
  margin-bottom: 7px !important;
}

.authority .auth-funnel-body h3{
  font-size: 25px !important;
  margin-bottom: 6px !important;
}

.authority .auth-funnel-body p{
  font-size: 14.6px !important;
  line-height: 1.48 !important;
  max-width: 58ch !important;
}

.authority .auth-funnel-card--narrow .auth-funnel-body p{
  max-width: 44ch !important;
}

@media (max-width: 1020px){
  .authority .auth-funnel{
    max-width: none !important;
  }

  .authority .auth-funnel-card,
  .authority .auth-funnel-card--wide,
  .authority .auth-funnel-card--mid,
  .authority .auth-funnel-card--narrow{
    width: 100% !important;
  }
}

@media (max-width: 700px){
  .authority .auth-funnel-card{
    min-height: 116px !important;
    padding: 13px !important;
    gap: 13px !important;
  }

  .authority .auth-funnel-icon{
    width: 74px !important;
    height: 74px !important;
    flex-basis: 74px !important;
  }

  .authority .auth-funnel-icon img{
    width: 42px !important;
    height: 42px !important;
  }

  .authority .auth-funnel-body h3{
    font-size: 20px !important;
  }

  .authority .auth-funnel-body p{
    font-size: 13.6px !important;
  }
}


/* =========================================================
   RODADA 25 — DIFERENCIAIS | FUNIL COM IMAGEM À DIREITA
   - reduz o funil para ocupar só a coluna esquerda
   - imagem do mockup preenche a coluna direita
   - mantém mobile em coluna única
   ========================================================= */
.authority .auth-showcase{
  max-width: 1160px;
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1fr);
  gap: 34px;
  align-items: center;
}

.authority .auth-showcase .auth-funnel{
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 !important;
  gap: 16px !important;
  align-items: center !important;
  justify-self: center;
}

.authority .auth-showcase .auth-funnel::before{
  top: 24px !important;
  bottom: 24px !important;
}

.authority .auth-showcase .auth-funnel-card{
  min-height: 112px !important;
  padding: 13px 18px 13px 14px !important;
  gap: 14px !important;
  border-radius: 22px !important;
}

.authority .auth-showcase .auth-funnel-card--wide{
  width: 100% !important;
}

.authority .auth-showcase .auth-funnel-card--mid{
  width: 86% !important;
}

.authority .auth-showcase .auth-funnel-card--narrow{
  width: 72% !important;
}

.authority .auth-showcase .auth-funnel-icon{
  width: 76px !important;
  height: 76px !important;
  flex-basis: 76px !important;
  border-radius: 22px !important;
}

.authority .auth-showcase .auth-funnel-icon::after{
  right: -8px !important;
}

.authority .auth-showcase .auth-funnel-icon img{
  width: 42px !important;
  height: 42px !important;
}

.authority .auth-showcase .auth-funnel-label{
  font-size: 10px !important;
  padding: 5px 8px !important;
  margin-bottom: 6px !important;
}

.authority .auth-showcase .auth-funnel-body h3{
  font-size: 22px !important;
  margin-bottom: 5px !important;
}

.authority .auth-showcase .auth-funnel-body p{
  font-size: 13.6px !important;
  line-height: 1.45 !important;
  max-width: 40ch !important;
}

.authority .auth-showcase .auth-funnel-card--narrow .auth-funnel-body p{
  max-width: 34ch !important;
}

.authority .auth-showcase-visual{
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(15,17,19,.12);
  background: linear-gradient(180deg, #ffffff, #eef1f4);
  box-shadow: 0 26px 76px rgba(0,0,0,.17);
  position: relative;
}

.authority .auth-showcase-visual::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
  pointer-events:none;
}

.authority .auth-showcase-visual img{
  display:block;
  width:100%;
  aspect-ratio: 1 / 1;
  height:auto;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1020px){
  .authority .auth-showcase{
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 26px;
  }

  .authority .auth-showcase .auth-funnel{
    max-width: none !important;
    justify-self: stretch;
  }

  .authority .auth-showcase .auth-funnel-card,
  .authority .auth-showcase .auth-funnel-card--wide,
  .authority .auth-showcase .auth-funnel-card--mid,
  .authority .auth-showcase .auth-funnel-card--narrow{
    width: 100% !important;
  }

  .authority .auth-showcase-visual{
    max-width: 640px;
    justify-self: center;
    border-radius: 24px;
  }
}

@media (max-width: 700px){
  .authority .auth-showcase{
    gap: 18px;
    margin-top: 22px;
  }

  .authority .auth-showcase .auth-funnel-card{
    min-height: 116px !important;
    padding: 13px !important;
    gap: 13px !important;
  }

  .authority .auth-showcase .auth-funnel-icon{
    width: 74px !important;
    height: 74px !important;
    flex-basis: 74px !important;
  }

  .authority .auth-showcase .auth-funnel-icon img{
    width: 42px !important;
    height: 42px !important;
  }

  .authority .auth-showcase .auth-funnel-body h3{
    font-size: 20px !important;
  }

  .authority .auth-showcase .auth-funnel-body p{
    font-size: 13.6px !important;
    max-width: none !important;
  }

  .authority .auth-showcase-visual{
    border-radius: 20px;
  }
}


/* =========================================================
   RODADA 26 — DIFERENCIAIS | FUNIL NUMERADO
   - remove "Pilar 01/02/03"
   - troca os ícones por números grandes
   - mantém a caixa lateral e o divisor visual
   ========================================================= */
.authority .auth-showcase .auth-funnel-label{
  display: none !important;
}

.authority .auth-showcase .auth-funnel-numberbox{
  background:
    radial-gradient(120% 120% at 30% 24%, rgba(34,197,94,.20), rgba(255,255,255,.035) 58%) !important;
  border-color: rgba(255,255,255,.16) !important;
}

.authority .auth-showcase .auth-funnel-number{
  display: block;
  color: rgba(255,255,255,.96);
  font-size: 40px;
  line-height: .92;
  font-weight: 1000;
  letter-spacing: -.08em;
  text-shadow: 0 14px 34px rgba(0,0,0,.34);
}

.authority .auth-showcase .auth-funnel-body h3{
  margin-top: 0 !important;
}

@media (max-width: 700px){
  .authority .auth-showcase .auth-funnel-number{
    font-size: 34px;
  }
}

@media (max-width: 380px){
  .authority .auth-showcase .auth-funnel-number{
    font-size: 30px;
  }
}


/* =========================================================
   RODADA 27 — DIFERENCIAIS | IMAGEM MAIS PROPORCIONAL
   - reduz o peso visual da imagem à direita no desktop
   - mantém o funil como protagonista da seção
   ========================================================= */
@media (min-width: 1021px){
  .authority .auth-showcase{
    max-width: 1080px !important;
    grid-template-columns: minmax(0, 560px) minmax(340px, 470px) !important;
    gap: 36px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .authority .auth-showcase-visual{
    max-width: 470px !important;
    justify-self: center !important;
    border-radius: 26px !important;
  }
}

@media (min-width: 1280px){
  .authority .auth-showcase-visual{
    max-width: 455px !important;
  }
}


/* =========================================================
   RODADA 29 — PROCESSO | COPY DIRETA + NÚMEROS NO LUGAR DOS ÍCONES
   - remove ícones das etapas
   - usa número grande na caixa lateral
   - mantém estrutura visual/timeline original
   ========================================================= */
.process .tl-numberbox{
  background:
    radial-gradient(120% 120% at 30% 24%, rgba(34,197,94,.20), rgba(255,255,255,.035) 58%) !important;
  border-color: rgba(255,255,255,.16) !important;
}

.process .tl-numberbox span{
  display:block;
  color: rgba(255,255,255,.96);
  font-size: 25px;
  line-height: .92;
  font-weight: 1000;
  letter-spacing: -.08em;
  text-shadow: 0 12px 30px rgba(0,0,0,.34);
}

.process .tl-title-row .n{
  display:none !important;
}

.process .tl-title-row{
  gap: 0 !important;
}

@media (max-width: 720px){
  .process .tl-numberbox span{
    font-size: 24px;
  }
}

@media (max-width: 430px){
  .process .tl-numberbox span{
    font-size: 23px;
  }
}


/* =========================================================
   RODADA 30 — PROCESSO | FIX DEFINITIVO DOS NÚMEROS
   - substitui os ícones por números grandes
   - mantém a mesma caixa lateral do layout atual
   ========================================================= */
.process .tl-icon.tl-numberbox{
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px !important;
  background:
    radial-gradient(120% 120% at 30% 24%, rgba(34,197,94,.22), rgba(255,255,255,.04) 58%) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 0 0 1px rgba(34,197,94,.14),
    0 10px 24px rgba(0,0,0,.18) !important;
}

.process .tl-icon.tl-numberbox span{
  display: block !important;
  color: rgba(255,255,255,.96) !important;
  font-size: 25px !important;
  line-height: .92 !important;
  font-weight: 1000 !important;
  letter-spacing: -.08em !important;
  text-shadow: 0 12px 30px rgba(0,0,0,.34) !important;
}

.process .tl-title-row .n{
  display: none !important;
}

.process .tl-title-row{
  gap: 0 !important;
}

@media (max-width: 720px){
  .process .tl-icon.tl-numberbox{
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }

  .process .tl-icon.tl-numberbox span{
    font-size: 24px !important;
  }
}


/* =========================================================
   RODADA 31 — PROCESSO | NÚMEROS GRANDES NO MODELO DOS CARDS HORIZONTAIS
   - todos os cards do processo seguem o modelo: caixa grande à esquerda + texto à direita
   - número ganha mais presença visual
   - mantém a timeline e o stagger original
   ========================================================= */
.process .tl-item{
  min-height: 138px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 18px 22px 18px 18px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(34,197,94,.10), transparent 62%),
    linear-gradient(180deg, #0B3D2E 0%, #07241B 100%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.20) !important;
}

.process .tl-icon.tl-numberbox{
  width: 106px !important;
  height: 106px !important;
  flex: 0 0 106px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 30px !important;
  background:
    radial-gradient(120% 120% at 30% 24%, rgba(34,197,94,.28), rgba(255,255,255,.045) 62%) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 12px 30px rgba(0,0,0,.18) !important;
  position: relative !important;
}

.process .tl-icon.tl-numberbox::after{
  content:"" !important;
  position:absolute !important;
  top: 10px !important;
  right: -10px !important;
  width: 1px !important;
  height: calc(100% - 20px) !important;
  background: rgba(255,255,255,.18) !important;
}

.process .tl-icon.tl-numberbox span{
  display: block !important;
  color: #ffffff !important;
  font-size: 48px !important;
  line-height: .90 !important;
  font-weight: 1000 !important;
  letter-spacing: -.09em !important;
  text-shadow: 0 14px 34px rgba(0,0,0,.38) !important;
}

.process .tl-body{
  min-width: 0 !important;
  padding-left: 2px !important;
}

.process .tl-title-row{
  margin: 0 0 8px !important;
  gap: 0 !important;
}

.process .tl-title-row .n{
  display:none !important;
}

.process .tl-item .t{
  font-size: 18px !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}

.process .tl-desc{
  max-width: 44ch !important;
  font-size: 15.2px !important;
  line-height: 1.52 !important;
  color: rgba(255,255,255,.78) !important;
}

/* Tablet */
@media (max-width: 1020px){
  .process .tl-item{
    min-height: 132px !important;
    padding: 16px !important;
    gap: 16px !important;
  }

  .process .tl-icon.tl-numberbox{
    width: 86px !important;
    height: 86px !important;
    flex-basis: 86px !important;
    border-radius: 24px !important;
  }

  .process .tl-icon.tl-numberbox span{
    font-size: 40px !important;
  }

  .process .tl-item .t{
    font-size: 16.8px !important;
  }

  .process .tl-desc{
    font-size: 14.2px !important;
  }
}

/* Mobile */
@media (max-width: 700px){
  .process .tl-item{
    min-height: 124px !important;
    padding: 14px !important;
    gap: 14px !important;
    border-radius: 20px !important;
  }

  .process .tl-icon.tl-numberbox{
    width: 78px !important;
    height: 78px !important;
    flex: 0 0 78px !important;
    border-radius: 22px !important;
  }

  .process .tl-icon.tl-numberbox::after{
    right: -8px !important;
  }

  .process .tl-icon.tl-numberbox span{
    font-size: 35px !important;
  }

  .process .tl-item .t{
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }

  .process .tl-desc{
    font-size: 13.8px !important;
    line-height: 1.48 !important;
    max-width: none !important;
  }
}

@media (max-width: 380px){
  .process .tl-item{
    align-items: flex-start !important;
  }

  .process .tl-icon.tl-numberbox{
    width: 66px !important;
    height: 66px !important;
    flex-basis: 66px !important;
    border-radius: 18px !important;
  }

  .process .tl-icon.tl-numberbox span{
    font-size: 30px !important;
  }
}


/* =========================================================
   RODADA 32 — PROCESSO | BLOCO MAIS COMPACTO
   - reduz a altura total da seção
   - diminui cards, caixa numérica, espaçamentos e fonte
   - mantém a lógica visual: timeline + cards horizontais + números em destaque
   ========================================================= */
@media (min-width: 981px){
  .process{
    padding: 54px 0 62px !important;
  }

  .process-head{
    margin-bottom: 18px !important;
    gap: 18px !important;
  }

  .process-title{
    font-size: clamp(38px, 3.55vw, 54px) !important;
    line-height: 1.02 !important;
  }

  .process-desc{
    margin-top: 22px !important;
    font-size: 14.2px !important;
    line-height: 1.62 !important;
    max-width: 54ch !important;
  }

  .process .tl-grid{
    gap: 10px 12px !important;
    padding: 20px 22px 18px !important;
  }

  .process .tl-item{
    min-height: 92px !important;
    gap: 13px !important;
    padding: 12px 16px 12px 14px !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.20) !important;
  }

  .process .tl-icon.tl-numberbox{
    width: 70px !important;
    height: 70px !important;
    flex: 0 0 70px !important;
    border-radius: 22px !important;
  }

  .process .tl-icon.tl-numberbox::after{
    top: 8px !important;
    right: -8px !important;
    height: calc(100% - 16px) !important;
  }

  .process .tl-icon.tl-numberbox span{
    font-size: 34px !important;
  }

  .process .tl-title-row{
    margin-bottom: 5px !important;
  }

  .process .tl-item .t{
    font-size: 15.8px !important;
    line-height: 1.12 !important;
  }

  .process .tl-desc{
    font-size: 12.9px !important;
    line-height: 1.36 !important;
    max-width: 40ch !important;
  }

  .process .tl-item:before{
    top: -16px !important;
    height: calc(100% + 32px) !important;
  }
}

/* notebook / telas um pouco mais baixas */
@media (min-width: 981px) and (max-height: 820px){
  .process{
    padding-top: 44px !important;
    padding-bottom: 50px !important;
  }

  .process-head{
    margin-bottom: 12px !important;
  }

  .process-title{
    font-size: clamp(36px, 3.35vw, 50px) !important;
  }

  .process-desc{
    margin-top: 18px !important;
    font-size: 13.8px !important;
    line-height: 1.56 !important;
  }

  .process .tl-grid{
    gap: 8px 12px !important;
    padding-top: 16px !important;
    padding-bottom: 14px !important;
  }

  .process .tl-item{
    min-height: 84px !important;
    padding: 10px 15px 10px 12px !important;
  }

  .process .tl-icon.tl-numberbox{
    width: 64px !important;
    height: 64px !important;
    flex-basis: 64px !important;
    border-radius: 20px !important;
  }

  .process .tl-icon.tl-numberbox span{
    font-size: 31px !important;
  }

  .process .tl-item .t{
    font-size: 15.2px !important;
  }

  .process .tl-desc{
    font-size: 12.5px !important;
    line-height: 1.32 !important;
  }
}

/* tablet */
@media (max-width: 980px){
  .process{
    padding: 64px 0 72px !important;
  }

  .process-head{
    margin-bottom: 22px !important;
  }

  .process .tl-grid{
    gap: 12px !important;
    padding: 20px 0 20px !important;
  }

  .process .tl-item{
    min-height: 104px !important;
    padding: 14px !important;
    gap: 14px !important;
  }

  .process .tl-icon.tl-numberbox{
    width: 76px !important;
    height: 76px !important;
    flex-basis: 76px !important;
    border-radius: 22px !important;
  }

  .process .tl-icon.tl-numberbox span{
    font-size: 36px !important;
  }
}

/* mobile */
@media (max-width: 700px){
  .process{
    padding: 56px 0 64px !important;
  }

  .process .tl-item{
    min-height: 104px !important;
    padding: 13px !important;
  }

  .process .tl-icon.tl-numberbox{
    width: 70px !important;
    height: 70px !important;
    flex-basis: 70px !important;
    border-radius: 20px !important;
  }

  .process .tl-icon.tl-numberbox span{
    font-size: 32px !important;
  }
}


/* =========================================================
   RODADA 33 — DIFERENCIAIS | TEXTO DO FUNIL COM MESMO PADRÃO DOS CARDS
   - iguala o tamanho dos parágrafos do funil ao padrão dos cards horizontais
   - mantém título, número, imagem e estrutura intactos
   ========================================================= */
@media (min-width: 1021px){
  .authority .auth-showcase .auth-funnel-body p,
  .authority .auth-showcase .auth-funnel-card--narrow .auth-funnel-body p{
    font-size: 15.2px !important;
    line-height: 1.52 !important;
  }
}

/* Tablet: mantém um pouco menor para não apertar */
@media (max-width: 1020px){
  .authority .auth-showcase .auth-funnel-body p,
  .authority .auth-showcase .auth-funnel-card--narrow .auth-funnel-body p{
    font-size: 14.2px !important;
    line-height: 1.52 !important;
  }
}

/* Mobile: preserva proporção e leitura */
@media (max-width: 700px){
  .authority .auth-showcase .auth-funnel-body p,
  .authority .auth-showcase .auth-funnel-card--narrow .auth-funnel-body p{
    font-size: 13.8px !important;
    line-height: 1.48 !important;
  }
}


/* =========================================================
   RODADA 34 — PROCESSO | DESCRIÇÕES COM MESMO PADRÃO DOS CARDS
   - aplica 15.2px nos textos das etapas no desktop
   - mantém tablet e mobile proporcionais
   - não altera cards, números, linhas ou estrutura
   ========================================================= */
@media (min-width: 1021px){
  .process .tl-desc{
    font-size: 15.2px !important;
    line-height: 1.52 !important;
  }
}

/* Tablet */
@media (max-width: 1020px){
  .process .tl-desc{
    font-size: 14.2px !important;
    line-height: 1.52 !important;
  }
}

/* Mobile */
@media (max-width: 700px){
  .process .tl-desc{
    font-size: 13.8px !important;
    line-height: 1.48 !important;
  }
}


/* =========================================================
   AJUSTE FINAL — SOBRE | CARDS NO MODELO HORIZONTAL PREMIUM
   - aplica o mesmo padrão visual dos cards "Para quem é"
   - caixa de ícone grande à esquerda + divisor + texto à direita
   ========================================================= */
.about .about-cards{
  gap: 16px !important;
  margin-top: 22px !important;
  flex: initial !important;
}

.about .about-card{
  flex: initial !important;
  min-height: 138px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 18px 22px 18px 18px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #0B3D2E 0%, #07241B 100%) !important;
  border: 1px solid rgba(15,17,19,.14) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.16) !important;
}

.about .ac-ico{
  width: 106px !important;
  height: 106px !important;
  flex: 0 0 106px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 12px 30px rgba(0,0,0,.18) !important;
  position: relative !important;
}

.about .ac-ico::after{
  content:"" !important;
  position:absolute !important;
  top: 10px !important;
  right: -10px !important;
  width: 1px !important;
  height: calc(100% - 20px) !important;
  background: rgba(255,255,255,.18) !important;
}

.about .ac-ico img{
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
  display: block !important;
}

.about .ac-txt{
  min-width: 0 !important;
  padding-left: 2px !important;
}

.about .ac-txt h3{
  margin: 0 0 8px !important;
  color: rgba(255,255,255,.96) !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}

.about .ac-txt p{
  margin: 0 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 15.2px !important;
  line-height: 1.52 !important;
}

/* Tablet */
@media (max-width: 1020px){
  .about .about-card{
    min-height: 132px !important;
    padding: 16px !important;
    gap: 16px !important;
  }

  .about .ac-ico{
    width: 86px !important;
    height: 86px !important;
    flex-basis: 86px !important;
    border-radius: 24px !important;
  }

  .about .ac-ico img{
    width: 48px !important;
    height: 48px !important;
  }

  .about .ac-txt h3{
    font-size: 16.6px !important;
  }

  .about .ac-txt p{
    font-size: 14.2px !important;
  }
}

/* Mobile */
@media (max-width: 700px){
  .about .about-cards{
    gap: 12px !important;
    margin-top: 18px !important;
  }

  .about .about-card{
    min-height: 124px !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 14px !important;
    gap: 14px !important;
    border-radius: 20px !important;
  }

  .about .ac-ico{
    width: 78px !important;
    height: 78px !important;
    flex: 0 0 78px !important;
    border-radius: 22px !important;
  }

  .about .ac-ico::after{
    right: -8px !important;
  }

  .about .ac-ico img{
    width: 44px !important;
    height: 44px !important;
  }

  .about .ac-txt h3{
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }

  .about .ac-txt p{
    font-size: 13.8px !important;
    line-height: 1.48 !important;
  }
}

@media (max-width: 380px){
  .about .about-card{
    align-items: flex-start !important;
  }

  .about .ac-ico{
    width: 66px !important;
    height: 66px !important;
    flex-basis: 66px !important;
    border-radius: 18px !important;
  }

  .about .ac-ico img{
    width: 36px !important;
    height: 36px !important;
  }
}


/* =========================================================
   AJUSTE FINAL — SOBRE | SEÇÃO MAIS COMPACTA + FOTO 3:2
   - usa a foto no formato real 1536x1024
   - evita corte vertical exagerado e deixa o Mac aparecer
   - reduz altura geral da seção e dos cards
   ========================================================= */
.about{
  padding: 70px 0 76px !important;
}

.about .section-top{
  margin-bottom: 18px !important;
}

.about .section-top h2{
  font-size: clamp(24px, 2vw, 32px) !important;
  line-height: 1.12 !important;
  margin-bottom: 10px !important;
}

.about .section-top .muted{
  font-size: 15px !important;
  line-height: 1.62 !important;
  max-width: 62ch !important;
}

.about .about-grid{
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

.about .about-photo{
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 2 !important;
  align-self: start !important;
  border-radius: 24px !important;
}

.about .about-photo img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.about .about-side{
  height: auto !important;
  padding: 24px !important;
  border-radius: 24px !important;
}

.about .about-side h2{
  font-size: clamp(25px, 2vw, 32px) !important;
  line-height: 1.10 !important;
  margin-bottom: 8px !important;
}

.about .about-lead{
  font-size: 15px !important;
  line-height: 1.58 !important;
  max-width: 58ch !important;
}

.about .about-tags{
  gap: 8px !important;
  margin: 12px 0 14px !important;
}

.about .about-tag{
  padding: 7px 11px !important;
  font-size: 12.2px !important;
}

.about .about-cards{
  gap: 12px !important;
  margin-top: 14px !important;
}

.about .about-card{
  min-height: 112px !important;
  padding: 14px 18px 14px 14px !important;
  gap: 14px !important;
  border-radius: 20px !important;
}

.about .ac-ico{
  width: 82px !important;
  height: 82px !important;
  flex: 0 0 82px !important;
  border-radius: 24px !important;
}

.about .ac-ico::after{
  top: 9px !important;
  right: -8px !important;
  height: calc(100% - 18px) !important;
}

.about .ac-ico img{
  width: 46px !important;
  height: 46px !important;
}

.about .ac-txt h3{
  font-size: 16.5px !important;
  line-height: 1.16 !important;
  margin-bottom: 6px !important;
}

.about .ac-txt p{
  font-size: 14.1px !important;
  line-height: 1.46 !important;
}

.about .about-foot{
  margin-top: 14px !important;
  padding-top: 14px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Tablet/mobile: mantém foto em formato real e empilha sem ficar gigante */
@media (max-width: 980px){
  .about{
    padding: 62px 0 70px !important;
  }

  .about .about-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .about .about-photo{
    max-width: 720px !important;
    width: 100% !important;
    justify-self: center !important;
    aspect-ratio: 3 / 2 !important;
  }
}

@media (max-width: 700px){
  .about{
    padding: 56px 0 64px !important;
  }

  .about .about-photo{
    border-radius: 20px !important;
  }

  .about .about-side{
    padding: 18px !important;
    border-radius: 20px !important;
  }

  .about .about-card{
    min-height: 104px !important;
    padding: 13px !important;
    gap: 13px !important;
  }

  .about .ac-ico{
    width: 74px !important;
    height: 74px !important;
    flex-basis: 74px !important;
    border-radius: 21px !important;
  }

  .about .ac-ico img{
    width: 42px !important;
    height: 42px !important;
  }

  .about .ac-txt h3{
    font-size: 15.8px !important;
  }

  .about .ac-txt p{
    font-size: 13.6px !important;
  }
}

@media (max-width: 380px){
  .about .ac-ico{
    width: 64px !important;
    height: 64px !important;
    flex-basis: 64px !important;
    border-radius: 18px !important;
  }

  .about .ac-ico img{
    width: 36px !important;
    height: 36px !important;
  }
}


/* =========================================================
   AJUSTE FINAL — SOBRE | CAMPO MAIOR E ALINHADO COM A FOTO
   - mantém foto e conteúdo lado a lado no desktop
   - aumenta o card da direita para não apertar os blocos internos
   - alinha visualmente os dois elementos na mesma linha horizontal
   ========================================================= */
@media (min-width: 981px){
  .about{
    padding: 68px 0 78px !important;
  }

  .about .section-top{
    max-width: 1180px !important;
    margin: 0 auto 22px !important;
  }

  .about .section-top h2{
    font-size: clamp(24px, 2vw, 31px) !important;
    line-height: 1.12 !important;
    margin-bottom: 8px !important;
  }

  .about .section-top .muted{
    max-width: 62ch !important;
    font-size: 14.8px !important;
    line-height: 1.6 !important;
  }

  .about .about-grid{
    max-width: 1180px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.02fr) minmax(460px, .92fr) !important;
    gap: 30px !important;
    align-items: center !important;
  }

  .about .about-photo{
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 2 !important;
    align-self: center !important;
    border-radius: 24px !important;
  }

  .about .about-photo img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  .about .about-side{
    width: 100% !important;
    min-height: 520px !important;
    height: auto !important;
    align-self: center !important;
    padding: 28px !important;
    border-radius: 26px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .about .about-side h2{
    font-size: clamp(25px, 2.15vw, 34px) !important;
    line-height: 1.10 !important;
    margin: 0 0 10px !important;
  }

  .about .about-lead{
    font-size: 15px !important;
    line-height: 1.58 !important;
    max-width: 62ch !important;
    margin: 0 !important;
  }

  .about .about-tags{
    margin: 14px 0 16px !important;
    gap: 9px !important;
  }

  .about .about-tag{
    padding: 7px 11px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  .about .about-cards{
    flex: 1 !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(112px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }

  .about .about-card{
    min-height: 112px !important;
    height: auto !important;
    flex: initial !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 15px 18px 15px 15px !important;
    border-radius: 20px !important;
    overflow: visible !important;
  }

  .about .ac-ico{
    width: 82px !important;
    height: 82px !important;
    flex: 0 0 82px !important;
    border-radius: 23px !important;
    position: relative !important;
  }

  .about .ac-ico::after{
    content:"" !important;
    position:absolute !important;
    top: 10px !important;
    right: -9px !important;
    width: 1px !important;
    height: calc(100% - 20px) !important;
    background: rgba(255,255,255,.18) !important;
  }

  .about .ac-ico img{
    width: 46px !important;
    height: 46px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .about .ac-txt{
    min-width: 0 !important;
    padding-left: 4px !important;
  }

  .about .ac-txt h3{
    font-size: 17px !important;
    line-height: 1.16 !important;
    margin: 0 0 7px !important;
  }

  .about .ac-txt p{
    font-size: 14.1px !important;
    line-height: 1.48 !important;
    margin: 0 !important;
  }

  .about .about-foot{
    margin-top: 16px !important;
    padding-top: 14px !important;
    font-size: 13.2px !important;
    line-height: 1.45 !important;
  }
}

/* Tablet: mantém empilhado para não esmagar os blocos */
@media (max-width: 980px){
  .about .about-grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .about .about-photo{
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .about .about-side{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* Mobile: evita sobreposição e mantém leitura limpa */
@media (max-width: 700px){
  .about .about-card{
    flex-direction: row !important;
    align-items: center !important;
    overflow: visible !important;
  }
}



/* =========================================================
   RODADA 36 — CTAs INTERMEDIÁRIOS
   - pontos de decisão após Solução, Para quem é, Portfólio e FAQ
   - mantém os CTAs principais: Ver projetos + Contratar no 99Freelas
   ========================================================= */
.section-cta{
  margin-top: 32px;
  padding: 22px 24px;
  border-radius: 24px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.section-cta::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(520px 220px at 14% 0%, rgba(34,197,94,.12), transparent 62%);
  opacity:.9;
}
.section-cta > *{
  position:relative;
  z-index:1;
}
.section-cta--dark{
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 20px 58px rgba(0,0,0,.22);
}
.section-cta--light{
  background: #ffffff;
  border: 1px solid rgba(15,17,19,.12);
  box-shadow: 0 20px 58px rgba(0,0,0,.10);
}
.section-cta__eyebrow{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height:1;
  font-weight: 950;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.section-cta--dark .section-cta__eyebrow{
  color: rgba(255,255,255,.70);
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.12);
}
.section-cta--light .section-cta__eyebrow{
  color: rgba(15,17,19,.68);
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.16);
}
.section-cta h3{
  margin:0 0 6px;
  font-size: clamp(20px, 2vw, 28px);
  line-height:1.12;
  letter-spacing:-.025em;
}
.section-cta p{
  margin:0;
  max-width: 68ch;
  font-size: 14.8px;
  line-height:1.58;
}
.section-cta--dark h3{ color: rgba(255,255,255,.96); }
.section-cta--dark p{ color: rgba(255,255,255,.74); }
.section-cta--light h3{ color: #0B1516; }
.section-cta--light p{ color: rgba(15,17,19,.70); }
.section-cta__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap:wrap;
}
.section-cta__btn{
  min-height: 48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 950;
  line-height:1;
  white-space:nowrap;
  transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.section-cta__btn:hover{
  transform: translateY(-1px);
}
.section-cta__btn--primary{
  color:#06200f;
  background: linear-gradient(180deg, rgba(34,197,94,1), rgba(22,163,74,1));
  border: 1px solid rgba(34,197,94,.60);
  box-shadow: 0 14px 34px rgba(34,197,94,.18);
}
.section-cta__btn--primary:hover{
  filter: brightness(1.05);
  border-color: rgba(34,197,94,.78);
}
.section-cta__btn--99{
  color:#fff;
  background: linear-gradient(180deg, rgba(8,164,220,.96), rgba(8,164,220,.78));
  border: 1px solid rgba(8,164,220,.55);
  box-shadow: 0 14px 34px rgba(8,164,220,.18);
}
.section-cta__btn--99:hover{
  filter: brightness(1.05);
  border-color: rgba(8,164,220,.75);
}
.section-cta__btn--secondary{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.90);
}
.section-cta__btn--secondary:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.section-cta--light .section-cta__btn--secondary{
  color: #0B1516;
  background: rgba(15,17,19,.045);
  border-color: rgba(15,17,19,.12);
}
.section-cta--light .section-cta__btn--secondary:hover{
  background: rgba(15,17,19,.07);
  border-color: rgba(15,17,19,.18);
}
.section-cta__btn:focus-visible{
  outline: 3px solid rgba(34,197,94,.45);
  outline-offset: 3px;
}
@media (max-width: 860px){
  .section-cta{
    grid-template-columns: 1fr;
    align-items:start;
    margin-top: 24px;
    padding: 20px;
    border-radius: 22px;
  }
  .section-cta__actions{
    width:100%;
    justify-content:stretch;
  }
  .section-cta__btn{
    flex: 1 1 160px;
  }
}
@media (max-width: 520px){
  .section-cta{
    padding: 18px;
    border-radius: 20px;
  }
  .section-cta h3{
    font-size: 21px;
  }
  .section-cta p{
    font-size: 14.2px;
  }
  .section-cta__actions{
    flex-direction:column;
  }
  .section-cta__btn{
    width:100%;
  }
}



/* =========================================================
   AJUSTE FINAL — MICRO CTA NO BLOCO SOBRE
   - CTA discreto abaixo da foto, sem competir com o card principal
   ========================================================= */
.about-photo-wrap{
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
  min-width:0;
}
.about-photo-wrap .about-photo{
  flex:1 1 auto;
}
.about-photo-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:20px;
  background:#ffffff;
  border:1px solid rgba(15,17,19,.12);
  box-shadow:0 16px 42px rgba(0,0,0,.08);
}
.about-photo-cta p{
  margin:0;
  color:rgba(15,17,19,.72);
  font-size:14px;
  line-height:1.45;
}
.about-photo-cta__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:11px 15px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(8,164,220,.96), rgba(8,164,220,.80));
  border:1px solid rgba(8,164,220,.55);
  color:#fff;
  font-weight:950;
  font-size:13.5px;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 14px 30px rgba(8,164,220,.16);
  transition:transform .15s ease, filter .15s ease, border-color .15s ease;
}
.about-photo-cta__btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  border-color:rgba(8,164,220,.72);
}
.about-photo-cta__btn:focus-visible{
  outline:3px solid rgba(8,164,220,.28);
  outline-offset:3px;
}
@media (max-width:980px){
  .about-photo-wrap{height:auto;}
}
@media (max-width:620px){
  .about-photo-cta{
    flex-direction:column;
    align-items:stretch;
    text-align:left;
    padding:14px;
    border-radius:18px;
  }
  .about-photo-cta__btn{
    width:100%;
    min-height:50px;
  }
}

/* =========================================================
   AJUSTE MOBILE — HEADER SOMENTE COM HAMBURGUER
   - remove logo + texto WebProsper apenas no menu superior mobile
   - mantém o hero/desktop intactos
   ========================================================= */
@media (max-width: 900px){
  .ma-topbar .ma-logo{
    display: none !important;
  }

  .ma-topbar-inner{
    justify-content: flex-end !important;
  }

  .ma-burger{
    margin-left: auto !important;
  }
}


/* =========================================================
   AJUSTE MOBILE — HEADER TRANSPARENTE, SOMENTE ÍCONE DO MENU
   - remove a faixa/barra visual do topo no mobile
   - mantém apenas o botão hambúrguer flutuando à direita
   - desktop permanece intacto
   ========================================================= */
@media (max-width: 900px){
  .ma-topbar{
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }

  .ma-topbar-inner{
    max-width: none !important;
    min-height: 0 !important;
    padding: 18px 24px 0 !important;
    justify-content: flex-end !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .ma-topbar .ma-logo,
  .ma-topbar .ma-nav{
    display: none !important;
  }

  .ma-burger{
    display: flex !important;
    margin-left: auto !important;
    pointer-events: auto !important;
  }
}


/* Ajuste final mobile: o botão também fica visualmente sem caixa — só as três linhas */
@media (max-width: 900px){
  .ma-burger{
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .ma-burger img{
    width: 32px !important;
    height: 32px !important;
    opacity: .95 !important;
  }
}


/* =========================================================
   AJUSTE MOBILE — CTAs INTERMEDIÁRIOS MAIS COMPACTOS
   - corrige o flex-basis alto que deixava os botões gigantes no mobile
   - usa proporção próxima dos CTAs finais do bloco "Contratar no 99Freelas"
   ========================================================= */
@media (max-width: 760px){
  .section-cta{
    padding: 20px 18px !important;
    gap: 18px !important;
  }

  .section-cta__actions{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .section-cta__btn{
    width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 58px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    font-size: 15.2px !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 430px){
  .section-cta__btn{
    min-height: 56px !important;
    font-size: 14.8px !important;
  }
}


/* =========================================================
   AJUSTE FINAL — DIFERENCIAIS | MINI FUNIL + SCROLL REVEAL
   - aplica o formato de funil também no mobile
   - mantém leitura segura sem estreitar demais os cards
   ========================================================= */
@media (max-width: 700px){
  .authority .auth-showcase .auth-funnel{
    align-items: center !important;
  }

  .authority .auth-showcase .auth-funnel-card{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .authority .auth-showcase .auth-funnel-card--wide{
    width: 100% !important;
  }

  .authority .auth-showcase .auth-funnel-card--mid{
    width: 94% !important;
  }

  .authority .auth-showcase .auth-funnel-card--narrow{
    width: 88% !important;
  }
}

@media (max-width: 380px){
  .authority .auth-showcase .auth-funnel-card--mid{
    width: 96% !important;
  }

  .authority .auth-showcase .auth-funnel-card--narrow{
    width: 92% !important;
  }
}


/* =========================================================
   AJUSTE FINAL — LOGO DO HERO NO MOBILE
   - reduz levemente o logo central para não competir com a headline
   - desktop permanece intacto
   ========================================================= */
@media (max-width: 760px){
  .hero-brand{
    gap: 10px !important;
  }

  .hero-brand__mark{
    width: 60px !important;
  }

  .hero-brand__text{
    font-size: 34px !important;
  }
}

@media (max-width: 430px){
  .hero-brand__mark{
    width: 56px !important;
  }

  .hero-brand__text{
    font-size: 31px !important;
  }
}


/* =========================================================
   FIX FINAL — CARROSSEL DE LOGOS SEM FLICKER
   - evita cálculo instável durante o loop infinito
   - força os 2 grupos duplicados a manterem a mesma largura
   - usa translate3d para suavizar a animação no Chrome
   ========================================================= */
.tool-marquee__track{
  display: flex !important;
  width: max-content !important;
  transform: translate3d(0,0,0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: tool-marquee 34s linear infinite !important;
}
.tool-marquee__group{
  flex: 0 0 auto !important;
  min-width: max-content !important;
}
.tool-marquee__item{
  flex: 0 0 auto !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tool-marquee__item img{
  max-width: none !important;
}
@keyframes tool-marquee{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}
@media (max-width: 560px){
  .tool-marquee__track{
    animation-duration: 28s !important;
  }
}


/* =========================================================
   RODADA 9 — REVISÃO FINAL MOBILE
   Objetivo: deixar a LP mais leve de ler no celular
   sem alterar identidade visual nem remover seções.
   ========================================================= */

@media (max-width: 760px){

  html,
  body{
    overflow-x: hidden !important;
  }

  .wrap,
  .container,
  .about .container{
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Header mobile mais compacto */
  .ma-topbar-inner{
    min-height: 74px !important;
    padding: 10px 16px !important;
  }

  .ma-logo-mark-img{
    height: 42px !important;
  }

  .ma-logo-word{
    font-size: 18px !important;
  }

  .ma-burger{
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
  }

  .ma-burger img{
    width: 24px !important;
    height: 24px !important;
  }

  /* Hero mais leve no mobile */
  .hero__grid{
    min-height: auto !important;
    padding: 104px 16px 52px !important;
    justify-content: center !important;
  }

  .hero-brand{
    gap: 10px !important;
    margin-bottom: 30px !important;
  }

  .hero-brand__mark{
    width: 54px !important;
  }

  .hero-brand__text{
    font-size: 30px !important;
  }

  .hero h1{
    font-size: 35px !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
    margin-bottom: 18px !important;
  }

  .hero p.hero__subtitle{
    font-size: 16.4px !important;
    line-height: 1.58 !important;
    margin-bottom: 14px !important;
  }

  .hero__trust{
    width: 100% !important;
    max-width: 420px !important;
    justify-content: center !important;
    padding: 11px 14px !important;
    margin-bottom: 24px !important;
    border-radius: 18px !important;
    font-size: 12.8px !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  .hero__ctas{
    gap: 10px !important;
    max-width: 420px !important;
  }

  .hero__ctas .btn{
    min-height: 58px !important;
    padding: 13px 16px !important;
    font-size: 15.5px !important;
  }

  .hero__proofs{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 420px !important;
    margin-top: 18px !important;
  }

  .hero__proof{
    width: auto !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 11.8px !important;
    line-height: 1.22 !important;
  }

  /* Carrossel menos pesado */
  .tool-marquee{
    padding: 6px 0 !important;
  }

  .tool-marquee__group{
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .tool-marquee__item{
    padding: 9px 12px !important;
    border-radius: 14px !important;
  }

  .tool-marquee__item img{
    height: 28px !important;
  }

  /* Espaçamento geral das seções */
  .problem,
  .audience,
  .authority,
  .portfolio,
  .credibility,
  .about,
  .faq{
    padding-top: 58px !important;
    padding-bottom: 66px !important;
  }

  .solution,
  .process,
  .hire{
    padding-top: 62px !important;
    padding-bottom: 68px !important;
  }

  .sec-head,
  .portfolio .portfolio-head,
  .credibility .credibility-head,
  .about .section-top,
  .faq .sec-head{
    text-align: left !important;
    margin-bottom: 22px !important;
  }

  .problem h2,
  .solution h2,
  .audience .sec-head h2,
  .authority h2,
  .portfolio .sec-head h2,
  .credibility .section-title,
  .about .section-top h2,
  .faq .sec-head h2,
  .hire .hire-left .h2{
    font-size: 27px !important;
    line-height: 1.10 !important;
    letter-spacing: -.025em !important;
  }

  .problem-lead,
  .problem-note,
  .solution-lead,
  .solution-close,
  .audience .lead,
  .authority .lead,
  .portfolio .lead,
  .credibility .section-subtitle,
  .about .muted,
  .faq .lead,
  .hire .lead{
    font-size: 14.5px !important;
    line-height: 1.58 !important;
  }

  /* Imagem do problema menos alta */
  .problem-visual img{
    min-height: 220px !important;
    max-height: 260px !important;
  }

  /* Cards horizontais mais compactos */
  .problem .problem-card,
  .solution .solution-offer,
  .audience .audience-card,
  .process .tl-item{
    min-height: auto !important;
    padding: 13px !important;
    gap: 12px !important;
    border-radius: 18px !important;
    align-items: center !important;
  }

  .problem .problem-icon,
  .solution .solution-icon,
  .audience .audience-icon,
  .process .tl-icon.tl-numberbox{
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    border-radius: 18px !important;
  }

  .problem .problem-icon img,
  .solution .solution-icon img,
  .audience .audience-icon img{
    width: 36px !important;
    height: 36px !important;
  }

  .process .tl-icon.tl-numberbox span{
    font-size: 30px !important;
  }

  .problem .problem-card h3,
  .solution .solution-offer h3,
  .audience .audience-card h3,
  .process .tl-item .t{
    font-size: 15.5px !important;
    line-height: 1.18 !important;
    margin-bottom: 5px !important;
  }

  .problem .problem-card p,
  .solution .solution-offer p,
  .audience .audience-card p,
  .process .tl-desc{
    font-size: 13.2px !important;
    line-height: 1.45 !important;
  }

  .process .tl-item{
    flex-direction: row !important;
  }

  .process .tl-grid{
    gap: 11px !important;
  }

  /* Diferenciais: funil + imagem mais leve */
  .authority .auth-showcase{
    gap: 16px !important;
    margin-top: 20px !important;
  }

  .authority .auth-showcase .auth-funnel{
    gap: 11px !important;
  }

  .authority .auth-showcase .auth-funnel-card{
    min-height: auto !important;
    padding: 13px !important;
    gap: 12px !important;
    border-radius: 18px !important;
  }

  .authority .auth-showcase .auth-funnel-icon{
    width: 64px !important;
    height: 64px !important;
    flex-basis: 64px !important;
    border-radius: 18px !important;
  }

  .authority .auth-showcase .auth-funnel-number{
    font-size: 30px !important;
  }

  .authority .auth-showcase .auth-funnel-body h3{
    font-size: 19px !important;
    line-height: 1.12 !important;
    margin-bottom: 5px !important;
  }

  .authority .auth-showcase .auth-funnel-body p{
    font-size: 13.2px !important;
    line-height: 1.45 !important;
  }

  .authority .auth-showcase-visual{
    border-radius: 18px !important;
  }

  .authority .auth-showcase-visual img{
    aspect-ratio: 16 / 10 !important;
    max-height: 260px !important;
    object-fit: cover !important;
  }

  /* Portfólio mais confortável */
  .portfolio-group{
    margin-top: 24px !important;
  }

  .portfolio-group + .portfolio-group{
    margin-top: 30px !important;
    padding-top: 26px !important;
  }

  .portfolio-subhead{
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .portfolio-subhead h3{
    font-size: 21px !important;
    line-height: 1.14 !important;
  }

  .portfolio-subhead p{
    font-size: 13.8px !important;
    line-height: 1.52 !important;
  }

  .portfolio .portfolio-grid{
    gap: 14px !important;
  }

  .portfolio .p-thumb{
    padding: 12px !important;
    aspect-ratio: 16 / 10 !important;
  }

  .portfolio .p-meta{
    padding: 14px !important;
  }

  .portfolio .p-desc{
    font-size: 13.1px !important;
    line-height: 1.42 !important;
  }

  /* Credibilidade mais compacta */
  .credibility-grid{
    gap: 12px !important;
    margin-top: 20px !important;
  }

  .credibility-score-card{
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .credibility-score-card .cred-score-value{
    font-size: 48px !important;
  }

  .credibility-score-card,
  .credibility-mini-card{
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .credibility .cred-single{
    padding: 14px !important;
  }

  .credibility .review-card{
    min-height: unset !important;
    padding: 14px !important;
  }

  .review-quote{
    font-size: 15.5px !important;
  }

  .review-project{
    font-size: 12.8px !important;
  }

  /* Sobre menos pesado no celular */
  .about .about-photo{
    min-height: 270px !important;
    border-radius: 20px !important;
  }

  .about .about-side{
    padding: 18px !important;
    border-radius: 20px !important;
  }

  .about .about-side h2{
    font-size: 22px !important;
  }

  .about .about-lead{
    font-size: 14.2px !important;
    line-height: 1.55 !important;
  }

  .about .about-tags{
    gap: 8px !important;
  }

  .about-tag{
    padding: 8px 11px !important;
    font-size: 12.2px !important;
  }

  .about .about-card{
    flex-direction: row !important;
    padding: 13px !important;
    gap: 12px !important;
  }

  .about .ac-ico{
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  .about .ac-txt h3{
    font-size: 15px !important;
  }

  .about .ac-txt p,
  .about-foot{
    font-size: 13.2px !important;
    line-height: 1.48 !important;
  }

  /* FAQ mais leve */
  .faq-grid{
    gap: 10px !important;
  }

  .faq-question{
    padding: 14px !important;
    font-size: 14.6px !important;
  }

  .faq-icon{
    width: 30px !important;
    height: 30px !important;
  }

  .faq-body{
    padding: 0 14px 14px !important;
    font-size: 13.6px !important;
    line-height: 1.5 !important;
  }

  /* CTA final mais direto */
  .hire-grid{
    gap: 18px !important;
  }

  .hire .hire-left .h2{
    font-size: 28px !important;
  }

  .hire .hire-note-final{
    padding: 14px !important;
    font-size: 13.8px !important;
    line-height: 1.5 !important;
    margin-bottom: 18px !important;
  }

  .hire-actions{
    gap: 10px !important;
  }

  .hire-actions .btn-99,
  .hire-actions .btn-ghost{
    min-height: 56px !important;
    font-size: 14.6px !important;
    border-radius: 16px !important;
  }

  .hire-card.v2{
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .hire .hire-score{
    flex-direction: row !important;
    align-items: center !important;
    gap: 13px !important;
  }

  .hire-score .score{
    font-size: 46px !important;
  }

  .hire-score .score-title{
    font-size: 15px !important;
  }

  .hire-score .score-sub{
    font-size: 13.1px !important;
    line-height: 1.38 !important;
  }

  .hire-proof{
    gap: 10px !important;
  }

  .proof-item{
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .proof-title{
    font-size: 14px !important;
  }

  .proof-sub,
  .hire-smallprint{
    font-size: 12.8px !important;
    line-height: 1.42 !important;
  }

  /* Rodapé */
  .site-footer{
    padding: 34px 0 24px !important;
  }

  .footer-logo{
    width: 150px !important;
  }

  .footer-desc,
  .footer-note,
  .footer-copy{
    font-size: 12.8px !important;
    line-height: 1.45 !important;
  }

  .footer-nav{
    gap: 9px !important;
  }

  .footer-nav a{
    font-size: 13px !important;
  }
}

@media (max-width: 390px){

  .hero h1{
    font-size: 31px !important;
  }

  .hero-brand__mark{
    width: 48px !important;
  }

  .hero-brand__text{
    font-size: 27px !important;
  }

  .hero__proofs{
    grid-template-columns: 1fr !important;
  }

  .problem .problem-icon,
  .solution .solution-icon,
  .audience .audience-icon,
  .process .tl-icon.tl-numberbox,
  .authority .auth-showcase .auth-funnel-icon{
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
    border-radius: 16px !important;
  }

  .process .tl-icon.tl-numberbox span,
  .authority .auth-showcase .auth-funnel-number{
    font-size: 27px !important;
  }

  .problem .problem-card,
  .solution .solution-offer,
  .audience .audience-card,
  .process .tl-item,
  .authority .auth-showcase .auth-funnel-card{
    gap: 10px !important;
  }

  .credibility-score-card,
  .hire .hire-score{
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* =========================================================
   FIX FINAL — Destaque institucional sem card quebrado no desktop
   - força o card institucional a ocupar a largura total
   - evita cache visual quando a grade antiga ainda está ativa
   ========================================================= */
.portfolio-group--institutional .portfolio-grid--single{
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: 18px !important;
}

.portfolio-group--institutional .portfolio-grid--single .p-card,
.portfolio-group--institutional .p-card--wide{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}

@media (min-width: 901px){
  .portfolio-group--institutional .p-card--wide{
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr) !important;
    align-items: stretch !important;
  }

  .portfolio-group--institutional .p-card--wide .p-thumb{
    height: 100% !important;
    min-height: 320px !important;
    aspect-ratio: auto !important;
    border-bottom: 0 !important;
    border-right: 1px solid rgba(15,17,19,.08) !important;
  }

  .portfolio-group--institutional .p-card--wide .p-meta{
    min-height: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 32px !important;
  }

  .portfolio-group--institutional .p-card--wide .p-topline{
    align-items: center !important;
    margin-bottom: 14px !important;
  }

  .portfolio-group--institutional .p-card--wide .p-name{
    font-size: 22px !important;
    line-height: 1.12 !important;
  }

  .portfolio-group--institutional .p-card--wide .p-desc{
    font-size: 15.5px !important;
    line-height: 1.62 !important;
    max-width: 46ch !important;
  }
}

@media (max-width: 900px){
  .portfolio-group--institutional .p-card--wide{
    display: block !important;
  }

  .portfolio-group--institutional .p-card--wide .p-thumb{
    min-height: unset !important;
    aspect-ratio: 16 / 10 !important;
    border-right: 0 !important;
  }

  .portfolio-group--institutional .p-card--wide .p-meta{
    min-height: unset !important;
  }
}