/*
Theme Name: Parceiro Google webTEK
Theme URI: https://parceirogoogle.com/
Author: webTEK
Author URI: https://parceirogoogle.com/
Description: Tema personalizado para o site Parceiro Google webTEK — Google Partner Premier. Design próprio com seções de serviços, blog, formulários de contato e integração com Contact Form 7.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pgwebtek
*/

    /* =============================================
       TOKENS
    ============================================= */
    :root {
      --bg:          #F5F5F7;
      --surface:     #FFFFFF;
      --surface-alt: #F5F5F7;
      --dark:        #1D1D1F;
      --dark-2:      #161618;

      --t1: #1D1D1F;
      --t2: #6E6E73;
      --t3: #86868B;
      --ti: #F5F5F7;

      --border:   rgba(0,0,0,0.07);
      --border-m: rgba(0,0,0,0.11);
      --border-s: rgba(0,0,0,0.16);

      --blue:   #4285F4;
      --red:    #EA4335;
      --yellow: #FBBC05;
      --green:  #34A853;

      --r-sm: 10px;
      --r-md: 16px;
      --r-lg: 22px;
      --r-xl: 30px;

      --max: 1120px;
      --ease: cubic-bezier(0.4, 0, 0.2, 1);
      --t-fast: 0.18s;
      --t-base: 0.30s;
    }

    /* =============================================
       RESET
    ============================================= */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--t1);
      overflow-x: hidden;
      line-height: 1.6;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }

    /* =============================================
       UTILITIES
    ============================================= */
    .wrap {
      width: 100%;
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 24px;
    }
    @media (min-width: 768px) { .wrap { padding: 0 48px; } }

    .sec { padding: 96px 0; }
    @media (min-width: 768px) { .sec { padding: 128px 0; } }

    /* Google 4-dot motif */
    .gdots {
      display: inline-grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
      flex-shrink: 0;
    }
    .gdots s {
      display: block;
      width: 5px; height: 5px;
      border-radius: 50%;
      text-decoration: none;
    }
    .gdots s:nth-child(1) { background: var(--blue); }
    .gdots s:nth-child(2) { background: var(--red); }
    .gdots s:nth-child(3) { background: var(--yellow); }
    .gdots s:nth-child(4) { background: var(--green); }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 20px;
    }

    /* Scroll reveal */
    .r {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
    }
    .r.in { opacity: 1; transform: none; }
    .r.d1 { transition-delay: 0.08s; }
    .r.d2 { transition-delay: 0.16s; }
    .r.d3 { transition-delay: 0.24s; }
    .r.d4 { transition-delay: 0.32s; }

    @media (prefers-reduced-motion: reduce) {
      .r { opacity: 1; transform: none; transition: none; }
      * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }

    /* =============================================
       BUTTONS
    ============================================= */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.01em;
      padding: 11px 22px;
      border-radius: 980px;
      transition: all var(--t-fast) var(--ease);
      white-space: nowrap;
    }

    .btn-dark {
      background: var(--dark);
      color: #fff;
    }
    .btn-dark:hover {
      background: #000;
      transform: translateY(-1px);
      box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    }

    .btn-outline {
      background: transparent;
      color: var(--t1);
      border: 1px solid var(--border-m);
    }
    .btn-outline:hover {
      background: var(--surface);
      border-color: var(--border-s);
    }

    .btn-ghost-blue {
      background: transparent;
      color: var(--blue);
      padding: 11px 0;
      font-weight: 600;
    }
    .btn-ghost-blue:hover { color: #1a6ce8; }

    .btn-wpp {
      background: #25D366;
      color: #fff;
    }
    .btn-wpp:hover {
      background: #1ec25d;
      transform: translateY(-1px);
      box-shadow: 0 8px 28px rgba(37,211,102,0.3);
    }

    .btn svg, .btn-ghost-blue svg { transition: transform var(--t-fast) var(--ease); }
    .btn:hover svg, .btn-ghost-blue:hover svg { transform: translateX(3px); }

    /* =============================================
       NAV
    ============================================= */
    .nav {
      position: fixed;
      inset: 0 0 auto;
      z-index: 900;
      height: 62px;
      display: flex;
      align-items: center;
      background: rgba(245,245,247,0.82);
      backdrop-filter: blur(24px) saturate(200%);
      -webkit-backdrop-filter: blur(24px) saturate(200%);
      border-bottom: 1px solid var(--border);
      transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
    }
    .nav.up {
      background: rgba(255,255,255,0.92);
      border-color: var(--border-m);
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 24px;
    }
    @media (min-width: 768px) { .nav-inner { padding: 0 48px; } }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.025em;
      color: var(--t1);
    }
    .nav-logo .gdots s { width: 6px; height: 6px; }

    .nav-links {
      display: none;
      align-items: center;
      gap: 40px;
    }
    @media (min-width: 960px) { .nav-links { display: flex; } }

    .nav-links a {
      font-size: 14px;
      font-weight: 500;
      color: var(--t2);
      letter-spacing: -0.01em;
      transition: color var(--t-fast) var(--ease);
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0; right: 0;
      height: 1.5px;
      background: var(--blue);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform var(--t-fast) var(--ease);
    }
    .nav-links a:hover { color: var(--t1); }
    .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

    .nav-end { display: flex; align-items: center; gap: 10px; }

    .burger {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 6px;
    }
    .burger span {
      display: block;
      width: 20px; height: 1.5px;
      background: var(--t1);
      border-radius: 2px;
      transition: var(--t-base);
    }
    @media (min-width: 960px) { .burger { display: none; } }

    .drawer {
      display: none;
      flex-direction: column;
      position: fixed;
      top: 62px; left: 0; right: 0;
      background: rgba(255,255,255,0.98);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border-m);
      padding: 20px 24px 28px;
      gap: 4px;
      z-index: 899;
    }
    .drawer.open { display: flex; }
    .drawer a {
      font-size: 17px;
      font-weight: 500;
      color: var(--t1);
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    .drawer a:last-child { border-bottom: none; margin-top: 8px; text-align: center; justify-content: center; }

    /* =============================================
       HERO
    ============================================= */
    .hero {
      min-height: 100svh;
      display: flex;
      align-items: center;
      padding: calc(62px + 80px) 0 80px;
      position: relative;
      overflow: hidden;
      background: var(--surface);
    }

    /* Grid texture */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0,0,0,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.035) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 100%);
    }

    /* Ambient color glow */
    .hero-glow {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
    }
    .hero-glow.a {
      width: 600px; height: 600px;
      background: var(--blue);
      opacity: 0.06;
      top: -15%; right: -8%;
    }
    .hero-glow.b {
      width: 350px; height: 350px;
      background: var(--red);
      opacity: 0.055;
      bottom: 5%; right: 20%;
    }
    .hero-glow.c {
      width: 280px; height: 280px;
      background: var(--green);
      opacity: 0.05;
      bottom: 0; left: -5%;
    }

    /* Large G mark — decorative */
    .hero-gmark {
      position: absolute;
      right: 7%;
      top: 50%;
      transform: translateY(-50%);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      opacity: 0.045;
      pointer-events: none;
    }
    .hero-gmark s {
      display: block;
      width: 140px; height: 140px;
      border-radius: 50%;
      text-decoration: none;
    }
    .hero-gmark s:nth-child(1) { background: var(--blue); }
    .hero-gmark s:nth-child(2) { background: var(--red); }
    .hero-gmark s:nth-child(3) { background: var(--yellow); }
    .hero-gmark s:nth-child(4) { background: var(--green); }

    .hero-inner { position: relative; z-index: 1; }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 500;
      color: var(--t2);
      background: var(--surface);
      border: 1px solid var(--border-m);
      padding: 6px 14px 6px 10px;
      border-radius: 980px;
      margin-bottom: 32px;
    }
    .hero-badge .gdots s { width: 6px; height: 6px; }

    .hero h1 {
      font-size: clamp(42px, 7.5vw, 84px);
      font-weight: 700;
      letter-spacing: -0.045em;
      line-height: 1.03;
      color: var(--t1);
      max-width: 780px;
      margin-bottom: 28px;
    }
    .hero h1 em {
      font-style: normal;
      color: var(--blue);
    }

    .hero-sub {
      font-size: clamp(17px, 2vw, 21px);
      color: var(--t2);
      max-width: 460px;
      line-height: 1.5;
      font-weight: 400;
      margin-bottom: 40px;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .hero-actions .btn { font-size: 16px; padding: 14px 28px; }

    .hero-trust {
      display: flex;
      align-items: center;
      gap: 32px;
      flex-wrap: wrap;
      margin-top: 72px;
      padding-top: 40px;
      border-top: 1px solid var(--border-m);
    }
    .htrust-item { display: flex; flex-direction: column; gap: 3px; }
    .htrust-item strong {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1;
      color: var(--t1);
    }
    .htrust-item span { font-size: 12px; color: var(--t3); font-weight: 500; }
    .htrust-sep { width: 1px; height: 38px; background: var(--border-m); }

    /* =============================================
       SERVICES
    ============================================= */
    .services { background: var(--surface); }

    .sec-head { margin-bottom: 64px; }
    .sec-head h2 {
      font-size: clamp(34px, 5vw, 56px);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.07;
      color: var(--t1);
      max-width: 640px;
    }
    .sec-head p {
      font-size: clamp(16px, 1.8vw, 19px);
      color: var(--t2);
      max-width: 520px;
      margin-top: 16px;
      line-height: 1.55;
    }

    .svc-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    @media (min-width: 640px)  { .svc-grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(4, 1fr); } }

    .svc-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 28px 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
      overflow: hidden;
      transition: border-color var(--t-base) var(--ease),
                  transform var(--t-base) var(--ease),
                  box-shadow var(--t-base) var(--ease);
    }

    /* Top accent line */
    .svc-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--ac, var(--blue));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--t-base) var(--ease);
    }
    .svc-card:hover { border-color: var(--border-s); transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,0.08); }
    .svc-card:hover::before { transform: scaleX(1); }

    .svc-card:nth-child(1) { --ac: var(--blue); }
    .svc-card:nth-child(2) { --ac: var(--red); }
    .svc-card:nth-child(3) { --ac: var(--yellow); }
    .svc-card:nth-child(4) { --ac: var(--green); }

    .svc-icon {
      width: 42px; height: 42px;
      border-radius: var(--r-sm);
      background: color-mix(in srgb, var(--ac, var(--blue)) 11%, transparent);
      display: flex; align-items: center; justify-content: center;
      color: var(--ac, var(--blue));
    }

    .svc-title {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--t1);
    }

    .svc-desc {
      font-size: 13.5px;
      color: var(--t2);
      line-height: 1.65;
      flex: 1;
    }

    .svc-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 4px;
    }
    .svc-pill {
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--t3);
      background: var(--surface);
      border: 1px solid var(--border-m);
      padding: 3px 9px;
      border-radius: 980px;
    }

    .svc-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ac, var(--blue));
      transition: gap var(--t-fast) var(--ease);
    }
    .svc-card:hover .svc-link { gap: 9px; }

    /* =============================================
       DARK ABOUT
    ============================================= */
    .about {
      background: var(--dark);
      color: var(--ti);
    }

    .about .eyebrow { color: rgba(255,255,255,0.3); }
    .about .sec-head h2 { color: var(--ti); }
    .about .sec-head p { color: rgba(255,255,255,0.5); }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 64px;
      align-items: center;
    }
    @media (min-width: 960px) { .about-grid { grid-template-columns: 1fr 1fr; } }

    .about-list { display: flex; flex-direction: column; gap: 24px; }
    .about-item { display: flex; gap: 16px; }
    .about-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      margin-top: 7px;
      flex-shrink: 0;
    }
    .about-item:nth-child(1) .about-dot { background: var(--blue); }
    .about-item:nth-child(2) .about-dot { background: var(--red); }
    .about-item:nth-child(3) .about-dot { background: var(--green); }
    .about-item:nth-child(4) .about-dot { background: var(--yellow); }

    .about-item h3 { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.88); letter-spacing: -0.01em; margin-bottom: 4px; }
    .about-item p { font-size: 13.5px; color: rgba(255,255,255,0.42); line-height: 1.65; }

    .about-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
    .about-actions .btn-dark { background: #fff; color: var(--dark); }
    .about-actions .btn-dark:hover { background: var(--bg); }
    .about-actions .btn-ghost { color: rgba(255,255,255,0.5); padding: 11px 0; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; transition: color var(--t-fast); }
    .about-actions .btn-ghost:hover { color: rgba(255,255,255,0.9); }

    /* Stats quad */
    .about-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: rgba(255,255,255,0.07);
      border-radius: var(--r-lg);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.07);
    }
    .astat {
      background: rgba(255,255,255,0.03);
      padding: 36px 32px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .astat strong {
      font-size: clamp(38px, 5vw, 56px);
      font-weight: 700;
      letter-spacing: -0.05em;
      line-height: 1;
    }
    .astat:nth-child(1) strong { color: var(--blue); }
    .astat:nth-child(2) strong { color: var(--red); }
    .astat:nth-child(3) strong { color: var(--green); }
    .astat:nth-child(4) strong { color: var(--yellow); }
    .astat span { font-size: 12px; color: rgba(255,255,255,0.35); line-height: 1.5; }

    /* =============================================
       TRAFFIC / GESTÃO
    ============================================= */
    .traffic { background: var(--bg); }

    .traffic-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 64px;
      align-items: center;
    }
    @media (min-width: 960px) { .traffic-grid { grid-template-columns: 1fr 1fr; } }

    .traffic-items { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }

    .titem {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 18px 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
    }
    .titem:hover { border-color: var(--border-s); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }

    .titem-icon {
      width: 38px; height: 38px;
      border-radius: var(--r-sm);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .titem:nth-child(1) .titem-icon { background: color-mix(in srgb, var(--blue) 11%, transparent); color: var(--blue); }
    .titem:nth-child(2) .titem-icon { background: color-mix(in srgb, var(--green) 11%, transparent); color: var(--green); }
    .titem:nth-child(3) .titem-icon { background: color-mix(in srgb, var(--yellow) 12%, transparent); color: #b5870a; }

    .titem h3 { font-size: 14px; font-weight: 600; color: var(--t1); letter-spacing: -0.01em; }
    .titem p { font-size: 12.5px; color: var(--t2); margin-top: 2px; line-height: 1.4; }

    /* Chart widget */
    .traffic-widget {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 28px;
      overflow: hidden;
    }

    .tw-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 20px;
    }

    .tw-chart {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      height: 130px;
    }

    .tw-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      height: 100%;
      justify-content: flex-end;
    }

    .tw-bar {
      width: 100%;
      border-radius: 5px 5px 0 0;
      transition: height 1.2s var(--ease);
    }
    .tw-bar.dim   { background: #E8EBF5; }
    .tw-bar.mid   { background: #C3CEED; }
    .tw-bar.peak  { background: var(--blue); }

    .tw-tick {
      font-size: 10px;
      font-weight: 500;
      color: var(--t3);
    }
    .tw-tick.blue { color: var(--blue); font-weight: 700; }

    .tw-footer {
      margin-top: 20px;
      padding-top: 18px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .tw-metric strong { font-size: 24px; font-weight: 700; letter-spacing: -0.04em; color: var(--t1); display: block; }
    .tw-metric span { font-size: 11px; color: var(--t3); font-weight: 500; }

    .tw-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      color: var(--green);
      background: color-mix(in srgb, var(--green) 10%, transparent);
      padding: 5px 11px;
      border-radius: 980px;
    }

    /* =============================================
       SPECIALISTS
    ============================================= */
    .specialists { background: var(--surface); }

    .sp-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 64px;
      align-items: center;
    }
    @media (min-width: 960px) { .sp-grid { grid-template-columns: 1fr 1fr; } }

    .sp-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .sp-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 22px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: border-color var(--t-fast) var(--ease);
    }
    .sp-card:hover { border-color: var(--border-s); }

    .sp-dot { width: 9px; height: 9px; border-radius: 50%; }
    .sp-card:nth-child(1) .sp-dot { background: var(--blue); }
    .sp-card:nth-child(2) .sp-dot { background: var(--red); }
    .sp-card:nth-child(3) .sp-dot { background: var(--yellow); }
    .sp-card:nth-child(4) .sp-dot { background: var(--green); }

    .sp-card h3 { font-size: 14px; font-weight: 600; color: var(--t1); letter-spacing: -0.01em; line-height: 1.35; }
    .sp-card p { font-size: 12.5px; color: var(--t2); line-height: 1.55; }

    /* =============================================
       TESTIMONIALS
    ============================================= */
    .testimonials { background: var(--bg); }

    .tgrid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    @media (min-width: 640px)  { .tgrid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1024px) { .tgrid { grid-template-columns: repeat(4, 1fr); } }

    .tcard {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 26px 22px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      transition: border-color var(--t-base) var(--ease),
                  transform var(--t-base) var(--ease),
                  box-shadow var(--t-base) var(--ease);
    }
    .tcard:hover { border-color: var(--border-s); transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.08); }

    .tcard blockquote {
      font-size: 13.5px;
      color: var(--t2);
      line-height: 1.7;
      flex: 1;
      padding-left: 14px;
      border-left: 2px solid var(--qc, var(--blue));
    }
    .tcard:nth-child(1) { --qc: var(--blue); }
    .tcard:nth-child(2) { --qc: var(--red); }
    .tcard:nth-child(3) { --qc: var(--yellow); }
    .tcard:nth-child(4) { --qc: var(--green); }

    .tauthor-name { font-size: 13px; font-weight: 600; color: var(--t1); letter-spacing: -0.01em; }
    .tauthor-role { font-size: 11.5px; color: var(--t3); margin-top: 2px; }

    /* =============================================
       FAQ
    ============================================= */
    .faq { background: var(--surface); }

    .faq-wrap { max-width: 700px; }

    .faq-list { display: flex; flex-direction: column; gap: 10px; }

    .fi {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      overflow: hidden;
      transition: border-color var(--t-fast) var(--ease);
    }
    .fi.open { border-color: var(--border-m); }

    .fi-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 22px;
      font-size: 14.5px;
      font-weight: 600;
      color: var(--t1);
      letter-spacing: -0.01em;
      text-align: left;
      transition: color var(--t-fast) var(--ease);
    }

    .fi-ico {
      flex-shrink: 0;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border-m);
      display: flex; align-items: center; justify-content: center;
      color: var(--t2);
      transition: background var(--t-fast) var(--ease),
                  color var(--t-fast) var(--ease),
                  transform var(--t-fast) var(--ease),
                  border-color var(--t-fast) var(--ease);
    }
    .fi.open .fi-ico {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
      transform: rotate(45deg);
    }

    .fi-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s var(--ease);
    }
    .fi.open .fi-body { max-height: 320px; }

    .fi-body-inner {
      padding: 0 22px 20px;
      font-size: 13.5px;
      color: var(--t2);
      line-height: 1.75;
    }

    /* =============================================
       BLOG
    ============================================= */
    .blog { background: var(--bg); }

    .blog-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    @media (min-width: 640px)  { .blog-grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

    .bcard {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color var(--t-base) var(--ease),
                  transform var(--t-base) var(--ease),
                  box-shadow var(--t-base) var(--ease);
    }
    .bcard:hover { border-color: var(--border-s); transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,0.09); }

    .bcard-img {
      height: 175px;
      background: var(--bg);
      overflow: hidden;
    }
    .bcard-img img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.55s var(--ease);
    }
    .bcard:hover .bcard-img img { transform: scale(1.04); }

    .bcard-body {
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .bcard-date {
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--t3);
    }

    .bcard-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--t1);
      letter-spacing: -0.02em;
      line-height: 1.35;
      flex: 1;
    }

    .bcard-excerpt {
      font-size: 13px;
      color: var(--t2);
      line-height: 1.65;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .bcard-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--blue);
      margin-top: 4px;
      transition: gap var(--t-fast) var(--ease);
    }
    .bcard:hover .bcard-link { gap: 8px; }

    .blog-foot { margin-top: 48px; text-align: center; }

    /* =============================================
       CTA FINAL
    ============================================= */
    .cta-sec {
      background: var(--dark-2);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-sec::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(66,133,244,0.11) 0%, transparent 70%);
      pointer-events: none;
    }

    .cta-sec .eyebrow { color: rgba(255,255,255,0.25); justify-content: center; }
    .cta-sec h2 { font-size: clamp(34px, 5vw, 58px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.06; color: var(--ti); max-width: 580px; margin: 0 auto; }
    .cta-sec p { font-size: clamp(16px, 1.8vw, 19px); color: rgba(255,255,255,0.48); max-width: 480px; margin: 16px auto 0; line-height: 1.55; }

    .cta-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
    .cta-actions .btn { font-size: 16px; padding: 16px 30px; }
    .cta-ghost {
      background: rgba(255,255,255,0.07);
      color: rgba(255,255,255,0.72);
      border: 1px solid rgba(255,255,255,0.1);
      font-size: 16px;
      padding: 16px 30px;
      border-radius: 980px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-weight: 500;
      transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    }
    .cta-ghost:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); }

    /* =============================================
       FOOTER
    ============================================= */
    .footer {
      background: var(--dark);
      border-top: 1px solid rgba(255,255,255,0.05);
      padding: 80px 0 36px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
    }
    @media (min-width: 768px) {
      .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
    }

    .footer-brand { display: flex; flex-direction: column; gap: 16px; }

    .footer-logo {
      display: flex; align-items: center; gap: 9px;
      font-size: 16px; font-weight: 600;
      letter-spacing: -0.025em;
      color: rgba(255,255,255,0.88);
    }
    .footer-logo .gdots s { width: 6px; height: 6px; }

    .footer-brand p { font-size: 13.5px; color: rgba(255,255,255,0.36); line-height: 1.65; max-width: 260px; }

    .footer-social { display: flex; gap: 8px; margin-top: 4px; }
    .footer-social a {
      width: 34px; height: 34px;
      border-radius: var(--r-sm);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.07);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.45);
      transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    }
    .footer-social a:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.14); }

    .footer-col h4 {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.25);
      margin-bottom: 18px;
    }
    .footer-col ul { display: flex; flex-direction: column; gap: 11px; }
    .footer-col ul li a { font-size: 13.5px; color: rgba(255,255,255,0.48); transition: color var(--t-fast); }
    .footer-col ul li a:hover { color: rgba(255,255,255,0.9); }

    .footer-bottom {
      margin-top: 64px;
      padding-top: 24px;
      border-top: 1px solid rgba(255,255,255,0.05);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.2); }
    .footer-bottom a { color: rgba(255,255,255,0.25); transition: color var(--t-fast); }
    .footer-bottom a:hover { color: rgba(255,255,255,0.6); }

    /* =============================================
       FLOAT WHATSAPP
    ============================================= */
    .wpp {
      position: fixed;
      bottom: 26px; right: 26px;
      z-index: 800;
      width: 54px; height: 54px;
      border-radius: 50%;
      background: #25D366;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 28px rgba(37,211,102,0.38);
      transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
    }
    .wpp:hover {
      transform: scale(1.08);
      box-shadow: 0 10px 36px rgba(37,211,102,0.48);
    }
    .wpp svg { width: 27px; height: 27px; color: #fff; }


    /* =============================================
       PAGE HERO (páginas internas)
    ============================================= */
    .phero {
      padding: calc(62px + 64px) 0 72px;
      background: var(--surface);
      position: relative;
      overflow: hidden;
    }
    .phero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0,0,0,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.035) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 0%, transparent 100%);
    }
    .phero-inner { position: relative; z-index: 1; }

    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--t3);
      margin-bottom: 22px;
      flex-wrap: wrap;
    }
    .breadcrumb a { color: var(--t3); transition: color var(--t-fast) var(--ease); }
    .breadcrumb a:hover { color: var(--t1); }
    .breadcrumb span.sep { color: var(--border-s); }
    .breadcrumb span.cur { color: var(--t1); font-weight: 500; }

    .phero h1 {
      font-size: clamp(36px, 6vw, 62px);
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1.06;
      color: var(--t1);
      max-width: 760px;
      margin-bottom: 18px;
    }
    .phero h1 em { font-style: normal; color: var(--blue); }

    .phero-sub {
      font-size: clamp(16px, 1.8vw, 19px);
      color: var(--t2);
      max-width: 560px;
      line-height: 1.6;
    }

    /* =============================================
       FORM
    ============================================= */
    .form-section { background: var(--bg); }

    .form-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 40px;
      max-width: 720px;
      margin: 0 auto;
    }
    @media (min-width: 640px) { .form-card { padding: 48px; } }

    .form-card-head { margin-bottom: 32px; text-align: center; }
    .form-card-head h2 {
      font-size: clamp(26px, 3.4vw, 34px);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--t1);
      margin-bottom: 10px;
    }
    .form-card-head p { font-size: 14.5px; color: var(--t2); line-height: 1.6; }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    @media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } }

    .field { display: flex; flex-direction: column; gap: 7px; }
    .field.full { grid-column: 1 / -1; }
    .field label {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--t1);
      letter-spacing: -0.01em;
    }
    .field input,
    .field select,
    .field textarea {
      font-family: inherit;
      font-size: 14.5px;
      color: var(--t1);
      background: var(--bg);
      border: 1px solid var(--border-m);
      border-radius: var(--r-sm);
      padding: 13px 16px;
      transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
      width: 100%;
    }
    .field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: none;
      border-color: var(--blue);
      background: var(--surface);
    }
    .field input::placeholder,
    .field textarea::placeholder { color: var(--t3); }

    .form-submit { margin-top: 28px; display: flex; justify-content: center; }
    .form-submit .btn { font-size: 16px; padding: 14px 34px; width: 100%; justify-content: center; }
    @media (min-width: 480px) { .form-submit .btn { width: auto; } }

    .form-note {
      text-align: center;
      font-size: 12px;
      color: var(--t3);
      margin-top: 18px;
    }

    /* =============================================
       VAGAS (trabalhe conosco)
    ============================================= */
    .vaga-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-bottom: 56px;
    }
    @media (min-width: 640px) { .vaga-grid { grid-template-columns: repeat(3, 1fr); } }

    .vaga-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 22px 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: border-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
    }
    .vaga-card:hover { border-color: var(--border-s); transform: translateY(-3px); }
    .vaga-card .vdot { width: 8px; height: 8px; border-radius: 50%; margin-bottom: 4px; }
    .vaga-card:nth-child(5n+1) .vdot { background: var(--blue); }
    .vaga-card:nth-child(5n+2) .vdot { background: var(--red); }
    .vaga-card:nth-child(5n+3) .vdot { background: var(--yellow); }
    .vaga-card:nth-child(5n+4) .vdot { background: var(--green); }
    .vaga-card:nth-child(5n+5) .vdot { background: var(--blue); }
    .vaga-card h3 { font-size: 15px; font-weight: 600; color: var(--t1); letter-spacing: -0.01em; }
    .vaga-card p { font-size: 12.5px; color: var(--t2); line-height: 1.55; }

    /* =============================================
       CONTATO INFO
    ============================================= */
    .contact-wrap {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      max-width: 1000px;
      margin: 0 auto;
      align-items: start;
    }
    @media (min-width: 900px) { .contact-wrap { grid-template-columns: 1fr 1fr; gap: 32px; } }
    .contact-wrap .form-card { max-width: none; }

    .contact-info { display: flex; flex-direction: column; gap: 18px; }
    .cinfo-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 24px;
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }
    .cinfo-icon {
      width: 42px; height: 42px;
      border-radius: var(--r-sm);
      background: color-mix(in srgb, var(--blue) 11%, transparent);
      color: var(--blue);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .cinfo-card:nth-child(2) .cinfo-icon { background: color-mix(in srgb, var(--red) 11%, transparent); color: var(--red); }
    .cinfo-card:nth-child(3) .cinfo-icon { background: color-mix(in srgb, var(--green) 11%, transparent); color: var(--green); }
    .cinfo-card h3 { font-size: 14px; font-weight: 600; color: var(--t1); margin-bottom: 3px; }
    .cinfo-card p, .cinfo-card a { font-size: 13.5px; color: var(--t2); line-height: 1.55; }
    .cinfo-card a:hover { color: var(--blue); }

    .contact-social { display: flex; gap: 8px; margin-top: 6px; }
    .contact-social a {
      width: 38px; height: 38px;
      border-radius: var(--r-sm);
      background: var(--bg);
      border: 1px solid var(--border-m);
      display: flex; align-items: center; justify-content: center;
      color: var(--t2);
      transition: all var(--t-fast) var(--ease);
    }
    .contact-social a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

    /* =============================================
       BLOG LISTING PAGE
    ============================================= */
    .blog-hero-cats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 28px;
    }
    .cat-pill {
      font-size: 12.5px;
      font-weight: 500;
      color: var(--t2);
      background: var(--surface);
      border: 1px solid var(--border-m);
      padding: 7px 15px;
      border-radius: 980px;
      transition: all var(--t-fast) var(--ease);
    }
    .cat-pill:hover { border-color: var(--blue); color: var(--blue); }
    .cat-pill .count { color: var(--t3); font-size: 11px; margin-left: 2px; }

    .load-more-wrap { text-align: center; margin-top: 40px; }

    /* Reused: sec-head + m-top helper */
    .mt-0 { margin-top: 0 !important; }

    /* =============================================
       SEC TIGHT (páginas com menos seções)
    ============================================= */
    .sec-tight { padding: 64px 0; }
    @media (min-width: 768px) { .sec-tight { padding: 80px 0; } }
    .sec-first { padding-top: 0; }

    /* =============================================
       BENEFÍCIOS (grid reaproveitando svc-card)
    ============================================= */
    .benefit-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    @media (min-width: 640px)  { .benefit-grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1024px) { .benefit-grid { grid-template-columns: repeat(4, 1fr); } }

    /* =============================================
       PROCESSO / TIMELINE
    ============================================= */
    .steps-wrap {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      counter-reset: step;
    }
    @media (min-width: 860px) { .steps-wrap { grid-template-columns: repeat(4, 1fr); } }

    .step-card {
      position: relative;
      padding: 28px 24px 24px;
      border-top: 2px solid var(--border-m);
    }
    @media (min-width: 860px) {
      .step-card { border-top: none; border-left: 2px solid var(--border-m); }
      .step-card:first-child { border-left: none; }
    }

    .step-num {
      counter-increment: step;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--blue);
      margin-bottom: 10px;
    }
    .step-num::before { content: "0" counter(step); }

    .step-card h3 { font-size: 15px; font-weight: 600; color: var(--t1); letter-spacing: -0.01em; margin-bottom: 6px; }
    .step-card p { font-size: 13px; color: var(--t2); line-height: 1.6; }

    .step-card:nth-child(1) .step-num { color: var(--blue); }
    .step-card:nth-child(2) .step-num { color: var(--red); }
    .step-card:nth-child(3) .step-num { color: #b5870a; }
    .step-card:nth-child(4) .step-num { color: var(--green); }

    /* =============================================
       NEWSLETTER STRIP
    ============================================= */
    .newsletter {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 40px 32px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
      text-align: center;
    }
    @media (min-width: 780px) {
      .newsletter { flex-direction: row; text-align: left; justify-content: space-between; padding: 40px 48px; }
    }
    .newsletter-copy h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.025em; color: var(--t1); margin-bottom: 6px; }
    .newsletter-copy p { font-size: 14px; color: var(--t2); max-width: 420px; }
    .newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; flex-shrink: 0; }
    .newsletter-form input {
      font-family: inherit;
      font-size: 14px;
      color: var(--t1);
      background: var(--bg);
      border: 1px solid var(--border-m);
      border-radius: 980px;
      padding: 12px 18px;
      width: 220px;
      max-width: 100%;
    }
    .newsletter-form input:focus { outline: none; border-color: var(--blue); }
    .newsletter-form .btn { flex-shrink: 0; }

    /* =============================================
       TRUST STRIP (números curtos, páginas internas)
    ============================================= */
    .trust-strip {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
      margin-top: 48px;
    }
    @media (min-width: 720px) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }
    .trust-item {
      background: var(--surface);
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .trust-item strong { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--t1); }
    .trust-item span { font-size: 11.5px; color: var(--t3); font-weight: 500; }



    /* =============================================
       BLOG CARD — categoria (pill)
    ============================================= */
    .bcard-cat {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      color: var(--blue);
      background: color-mix(in srgb, var(--blue) 10%, transparent);
      padding: 4px 10px;
      border-radius: 980px;
      margin-bottom: 10px;
      letter-spacing: 0.01em;
    }

    /* =============================================
       BLOG CAROUSEL (home)
    ============================================= */
    .blog-carousel-wrap { position: relative; }
    .blog-carousel-track {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 2px 2px 8px;
      margin: 0 -2px;
    }
    .blog-carousel-track::-webkit-scrollbar { display: none; }
    .blog-carousel-track > .bcard {
      flex: 0 0 280px;
      scroll-snap-align: start;
    }
    @media (min-width: 640px)  { .blog-carousel-track > .bcard { flex-basis: 320px; } }
    @media (min-width: 1024px) { .blog-carousel-track > .bcard { flex-basis: calc((100% - 40px) / 3); } }

    .car-btn {
      position: absolute;
      top: 38%;
      transform: translateY(-50%);
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border-m);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 3;
      color: var(--t1);
      box-shadow: 0 6px 18px rgba(0,0,0,0.10);
      transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
    }
    .car-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
    .car-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
    .car-prev { left: -8px; }
    .car-next { right: -8px; }
    @media (min-width: 1200px) { .car-prev { left: -22px; } .car-next { right: -22px; } }
    @media (max-width: 780px) { .car-btn { display: none; } }

    /* =============================================
       ARTIGO — página individual de post
    ============================================= */
    .post-hero {
      padding: calc(62px + 48px) 0 0;
      background: var(--surface);
    }
    .post-hero-inner { max-width: 760px; margin: 0 auto; }
    .post-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--t3);
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .post-hero h1 {
      font-size: clamp(30px, 5vw, 46px);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.12;
      color: var(--t1);
      margin-bottom: 20px;
    }
    .post-excerpt { font-size: 17px; color: var(--t2); line-height: 1.65; margin-bottom: 32px; }
    .post-cover {
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      aspect-ratio: 16/9;
      object-fit: cover;
      border-radius: var(--r-lg);
      display: block;
    }
    .post-cover-wrap { padding: 0 0 56px; background: var(--surface); }

    .article-body {
      max-width: 720px;
      margin: 0 auto;
      padding: 56px 0;
      font-size: 16.5px;
      line-height: 1.8;
      color: var(--t2);
    }
    .article-body h2 {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--t1);
      margin: 40px 0 16px;
    }
    .article-body h3 {
      font-size: 20px;
      font-weight: 650;
      letter-spacing: -0.02em;
      color: var(--t1);
      margin: 32px 0 12px;
    }
    .article-body p { margin-bottom: 20px; }
    .article-body ul, .article-body ol { margin: 0 0 20px 22px; }
    .article-body li { margin-bottom: 8px; }
    .article-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
    .article-body strong { color: var(--t1); font-weight: 650; }
    .article-body blockquote {
      border-left: 3px solid var(--blue);
      padding: 4px 0 4px 20px;
      color: var(--t1);
      font-style: italic;
      margin: 24px 0;
    }
    .article-share {
      max-width: 720px;
      margin: 0 auto 64px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 28px;
      border-top: 1px solid var(--border);
    }
    .article-share span { font-size: 12.5px; color: var(--t3); font-weight: 500; }

    .lottie-box { pointer-events: none; }
    .lottie-box svg { display: block; }

    /* Hero — pontinhos Google animados (substitui/reforça o gmark estático) */
    .lottie-hero-dots {
      position: absolute;
      right: 6%;
      top: 50%;
      transform: translateY(-50%);
      width: 340px;
      height: 340px;
      opacity: 0.85;
      z-index: 0;
    }
    @media (max-width: 960px) { .lottie-hero-dots { display: none; } }

    /* Badge dots pequenos animados (phero interno) */
    .lottie-badge-dots {
      width: 120px;
      height: 120px;
      position: absolute;
      right: 2%;
      top: 18%;
      opacity: 0.5;
      z-index: 0;
    }
    @media (max-width: 780px) { .lottie-badge-dots { display: none; } }

    /* Barras de crescimento — seção de stats/about */
    .lottie-bars {
      width: 100%;
      max-width: 230px;
      height: 190px;
      margin: 0 auto;
    }
    .lottie-bars-wrap {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--r-lg);
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Linha de tendência — CTA / seções de crescimento */
    .lottie-trend {
      width: 220px;
      height: 135px;
      opacity: 0.9;
    }
    .lottie-trend-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 28px;
    }
    .cta-sec .lottie-trend-wrap { opacity: 0.92; }

    @media (prefers-reduced-motion: reduce) {
      .lottie-box { display: none !important; }
    }

/* =============================================
   PAGINAÇÃO NATIVA DO WORDPRESS (get_previous_posts_link / get_next_posts_link)
============================================= */
.load-more-wrap a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
  background: transparent;
  border: 1px solid var(--border-m);
  border-radius: 980px;
  padding: 11px 22px;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.load-more-wrap a:hover {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, transparent);
}

/* =============================================
   COMPATIBILIDADE COM O EDITOR NATIVO DO WORDPRESS (Gutenberg)
============================================= */
.article-body img { max-width: 100%; height: auto; border-radius: var(--r-md); display: block; margin: 8px 0; }
.article-body figure { margin: 28px 0; }
.article-body figcaption { font-size: 13px; color: var(--t3); text-align: center; margin-top: 8px; }
.article-body .alignwide, .article-body .alignfull { max-width: none; }
.article-body .aligncenter { margin-left: auto; margin-right: auto; }
.article-body .alignleft { float: left; margin: 4px 20px 12px 0; }
.article-body .alignright { float: right; margin: 4px 0 12px 20px; }
.article-body iframe, .article-body video { max-width: 100%; border-radius: var(--r-md); }
.article-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.article-body table th, .article-body table td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.article-body table th { background: var(--surface); }
.article-body hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
.article-body code { background: var(--surface); padding: 2px 6px; border-radius: 5px; font-size: 0.9em; }
.article-body pre { background: #0f1115; color: #c9d1d9; padding: 16px; border-radius: var(--r-md); overflow-x: auto; }
.article-body pre code { background: none; padding: 0; color: inherit; }