.elementor-233 .elementor-element.elementor-element-4cdaa1b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-32ed0a0 */<!-- ============================================================
     KAED — DOBRA 11: DEPOIMENTOS (Com Reskin do Trustindex)
     ============================================================ -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

<div id="kd-depoimentos" class="kd">
  <style>
    /* ============================================================
       KAED — Design System
       ============================================================ */
    .kd {
      --c1: #0d5cc4;
      --c1-cla: #3a86e0;
      --c1-esc: #0a3f86;
      --c2: #12b0e8;

      --bg: #e7ecf3;
      --bg2: #eef2f8;
      --surf: #e9eef5;
      
      --tinta: #1b2a44;
      --tinta-70: rgba(27,42,68,.72);
      --tinta-45: rgba(27,42,68,.46);
      
      --lz: #ffffff;
      --sh: #c3cdda;

      /* Neumorfismo */
      --nm:        8px 8px 20px var(--sh), -8px -8px 20px var(--lz);
      --nm-sm:     5px 5px 12px var(--sh), -5px -5px 12px var(--lz);

      --font: 'Sora', sans-serif;
      --disp: 'Sora', sans-serif;
      --ease: cubic-bezier(.22,1,.36,1);

      font-family: var(--font);
      color: var(--tinta);
      background: var(--bg2);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      line-height: 1.6;
      display: block;
    }

    .kd *, .kd *::before, .kd *::after { box-sizing: border-box; }
    
    .kd .sec { padding: clamp(76px, 10vh, 132px) clamp(22px, 7vw, 110px); }
    .kd .wrap { max-width: 1140px; margin: 0 auto; }
    
    .kd .eyebrow {
      display: inline-flex; align-items: center; gap: 9px;
      font-size: 12.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
      color: var(--c1); margin-bottom: 20px;
    }
    
    .kd .h2 {
      font-family: var(--disp); font-weight: 700;
      font-size: 32px; line-height: 1.15; letter-spacing: -1px;
      color: var(--tinta); margin: 0;
    }

    .kd .dif__head { text-align: center; max-width: 860px; margin: 0 auto 52px; }

    .kd .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
    .kd .reveal.in { opacity: 1; transform: none; }
    .kd .reveal.d1 { transition-delay: .08s } 
    .kd .reveal.d2 { transition-delay: .16s }

    /* ============================================================
       RESKIN DO TRUSTINDEX PARA NEUMORFISMO KAED
       Forçando a sobrescrita das classes nativas do plugin
       ============================================================ */
    
    /* Container principal */
    .kd .ti-widget {
      font-family: var(--font) !important;
      background: transparent !important;
    }

    /* Cartão do depoimento (Neumorfismo) */
    .kd .ti-widget .ti-review-item > .ti-inner {
      background: var(--surf) !important;
      border-radius: 26px !important;
      box-shadow: var(--nm) !important;
      border: none !important;
      padding: 30px !important;
      transition: transform 0.3s ease;
    }
    
    /* Hover sutil no cartão */
    .kd .ti-widget .ti-review-item > .ti-inner:hover {
      transform: translateY(-5px);
    }

    /* Texto do depoimento */
    .kd .ti-widget .ti-review-content {
      color: var(--tinta-70) !important;
      font-size: 14.5px !important;
      line-height: 1.6 !important;
      font-family: var(--font) !important;
    }

    /* Nome do Autor */
    .kd .ti-widget .ti-name {
      font-family: var(--disp) !important;
      font-weight: 700 !important;
      color: var(--tinta) !important;
      font-size: 16px !important;
    }

    /* Avatar da pessoa */
    .kd .ti-widget .ti-profile-img img,
    .kd .ti-widget .ti-review-header img {
      border-radius: 50% !important;
      box-shadow: var(--nm-sm) !important;
      border: 2px solid var(--surf) !important;
    }

    /* Ícone do Google (canto superior) */
    .kd .ti-widget .ti-review-header .ti-platform-icon {
      border-radius: 50% !important;
      box-shadow: var(--nm-sm) !important;
    }

    /* Setas do Carrossel (se for slider) */
    .kd .ti-widget .ti-controls .ti-next,
    .kd .ti-widget .ti-controls .ti-prev,
    .kd .ti-widget .ti-controls-line .ti-next,
    .kd .ti-widget .ti-controls-line .ti-prev {
      background: var(--surf) !important;
      border-radius: 50% !important;
      box-shadow: var(--nm-sm) !important;
      color: var(--c1) !important;
      border: none !important;
    }
    
    .kd .ti-widget .ti-controls .ti-next:hover,
    .kd .ti-widget .ti-controls .ti-prev:hover {
      background: var(--bg2) !important;
    }

    /* Dots do Carrossel */
    .kd .ti-widget .ti-dots .ti-dot {
      background: var(--sh) !important;
      box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1) !important;
    }
    .kd .ti-widget .ti-dots .ti-dot.active {
      background: var(--c1) !important;
      box-shadow: var(--nm-sm) !important;
    }

    @media(max-width: 520px){ 
      .kd .sec { padding: 64px 20px; } 
      .kd .h2 { font-size: 26px; } 
    }
  <\/style>

  <section class="sec" id="dep">
    <div class="wrap">
      <div class="dif__head">
        <span class="eyebrow reveal">Depoimentos</span>
        <h2 class="h2 reveal d1">Histórias reais de quem transformou a contabilidade em solução</h2>
      </div>
      
      <!-- Shortcode do Trustindex -->
      <div class="reveal d2" style="width: 100%;">
        [trustindex no-registration=google]
      </div>
    </div>
  </section>
</div>

<script>
(function(){
  document.addEventListener('DOMContentLoaded', function() {
    var els = document.querySelectorAll('#kd-depoimentos .reveal'); 
    if (!els.length) return;
    
    function check() { 
      var vh = window.innerHeight;
      els.forEach(function(el){ 
        if (el.classList.contains('in')) return;
        var r = el.getBoundingClientRect();
        if (r.top < vh * 0.9 && r.bottom > 0) el.classList.add('in'); 
      });
    }
    
    if ('IntersectionObserver' in window) {
      var io = new IntersectionObserver(function(es) { 
        es.forEach(function(e){
          if (e.isIntersecting){ 
            e.target.classList.add('in'); 
            io.unobserve(e.target); 
          } 
        });
      }, { threshold: .08, rootMargin: '0px 0px -8% 0px' });
      
      els.forEach(function(el){ io.observe(el); });
    }
    
    window.addEventListener('scroll', check, { passive: true }); 
    window.addEventListener('resize', check);
    
    check(); 
    setTimeout(check, 300); 
    setTimeout(check, 900);
  });
})();
</script>/* End custom CSS */