/* ───────────────────────────────────────────────────────────
       BASE
       ─────────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #09090b;
      color: #fafafa;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    img, video, svg, iframe { max-width: 100%; height: auto; }
    ::selection { background: #de3d82; color: #ffffff; }

    /* Performance: blobs leves no mobile (blur 120-140px = GPU killer) */
    @media (max-width: 767px) {
      [class*="blur-"], [style*="blur("] { filter: blur(40px) !important; }
      .hero-blob { display: none !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ───── TIPOGRAFIA EDITORIAL ───── */
    .font-display { font-family: 'Bricolage Grotesque', Inter, sans-serif; font-optical-sizing: auto; font-variation-settings: "opsz" 96; }
    .font-serif-i { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
    .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

    /* Hero h1 — clampa pra não estourar viewport no mobile */
    #hero h1 {
      font-size: clamp(2.5rem, 13vw, 10rem) !important;
      word-break: break-word;
max-width: 100%;
    }
    @media (min-width: 1024px) {
      #hero h1 { font-size: clamp(4rem, 10vw, 160px) !important; }
    }

    /* CTA hero – telefone gigante quebra linha no mobile */
    #cta-final h2, footer .h-display {
      font-size: clamp(2.5rem, 10vw, 9rem);
      word-break: break-word;
    }

    .h-display {
      font-family: 'Bricolage Grotesque', Inter, sans-serif;
      font-weight: 700;
      letter-spacing: -0.045em;
      line-height: 0.92;
      font-variation-settings: "opsz" 96, "wdth" 100;
    }
    .h-display em, .h-display .serif {
      font-family: 'Instrument Serif', Georgia, serif;
      font-weight: 400;
      font-style: italic;
      letter-spacing: -0.02em;
    }

    .label-mono {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 500;
    }

    /* Header editorial de cada seção */
    .section-head {
      display: flex;
      align-items: baseline;
      gap: 1.25rem;
      padding-bottom: 1.5rem;
      margin-bottom: 2.5rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .section-head .num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.85rem;
      letter-spacing: 0.16em;
      color: rgba(255,255,255,0.40);
    }
    .section-head .label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
    }
    .section-head .line { flex: 1; height: 1px; background: rgba(255,255,255,0.08); }

    /* MVV editorial cells */
    .mvv-cell {
      padding: 2.5rem 1.75rem;
      border-right: 1px solid rgba(255,255,255,0.10);
      border-bottom: 1px solid rgba(255,255,255,0.10);
      position: relative;
      transition: background 350ms;
    }
    .mvv-cell:last-child { border-right: none; }
    @media (max-width: 767px) {
      .mvv-cell { border-right: none; }
    }
    .mvv-cell::before {
      content: '';
      position: absolute; top: 0; left: 0;
      width: 0; height: 2px;
      background: var(--c, #de3d82);
      transition: width 500ms cubic-bezier(0.16,1,0.3,1);
    }
    .mvv-cell:hover::before { width: 100%; }
    .mvv-cell:hover { background: rgba(255,255,255,0.015); }
    .mvv-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      color: var(--c, rgba(255,255,255,0.40));
      margin-bottom: 2rem;
    }
    .mvv-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 600;
      letter-spacing: -0.03em;
      font-size: 2.25rem;
      color: #fafafa;
      margin-bottom: 1rem;
      line-height: 1;
    }
    .mvv-text {
      color: #a1a1aa;
      line-height: 1.55;
      font-size: 1.05rem;
    }
    .mvv-list {
      color: #d4d4d8;
      line-height: 1.8;
      font-size: 1.05rem;
    }
    .mvv-list li { display: flex; align-items: center; gap: 0.6rem; }

    /* Marca de registro decorativa */
    .reg-mark {
      width: 22px; height: 22px;
      border: 1.5px solid currentColor;
      border-radius: 999px;
      position: relative;
      display: inline-block;
    }
    .reg-mark::before, .reg-mark::after {
      content:''; position:absolute; background: currentColor;
    }
    .reg-mark::before { left:50%; top:-4px; bottom:-4px; width:1.5px; transform: translateX(-50%); }
    .reg-mark::after  { top:50%; left:-4px; right:-4px; height:1.5px; transform: translateY(-50%); }

    /* ───────────────────────────────────────────────────────────
       GRID & NOISE OVERLAY
       ─────────────────────────────────────────────────────────── */
    .grid-pattern {
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 64px 64px;
    }
    .noise {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
      background-size: 180px 180px;
    }

    /* ───────────────────────────────────────────────────────────
       GRADIENT TEXT & BORDERS
       ─────────────────────────────────────────────────────────── */
    .text-gradient-teal {
      background: linear-gradient(135deg, #de3d82 0%, #f4c245 50%, #2355cf 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .border-gradient {
      position: relative;
      background: #0f0f12;
      border-radius: 1.25rem;
    }
    .border-gradient::before {
      content: '';
      position: absolute; inset: 0;
      padding: 1px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(222,61,130,0.55), rgba(244,194,69,0.20) 45%, rgba(35,85,207,0.55) 100%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
    }

    /* ───────────────────────────────────────────────────────────
       GLASS
       ─────────────────────────────────────────────────────────── */
    .glass {
      background: rgba(24,24,27,0.55);
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      border: 1px solid rgba(255,255,255,0.06);
    }
    .glass-strong {
      background: rgba(9,9,11,0.82);
      backdrop-filter: blur(18px) saturate(180%);
      -webkit-backdrop-filter: blur(18px) saturate(180%);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    /* ───────────────────────────────────────────────────────────
       BUTTONS
       ─────────────────────────────────────────────────────────── */
    .btn-primary {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.95rem 1.6rem;
      background: linear-gradient(135deg, #de3d82 0%, #c52968 55%, #2355cf 100%);
      color: #ffffff;
      font-weight: 600;
      border-radius: 0.85rem;
      box-shadow: 0 8px 32px -8px rgba(222,61,130,0.55), inset 0 1px 0 rgba(255,255,255,0.22);
      transition: all 300ms cubic-bezier(0.16,1,0.3,1);
      overflow: hidden;
    }
    .btn-primary::before {
      content: '';
      position: absolute; top: 0; left: -100%;
      width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30), transparent);
      transition: left 800ms;
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(222,61,130,0.65), 0 0 0 1px rgba(244,194,69,0.20), inset 0 1px 0 rgba(255,255,255,0.26); }
    .btn-primary:hover::before { left: 110%; }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.95rem 1.6rem;
      background: rgba(255,255,255,0.04);
      color: #fafafa;
      font-weight: 600;
      border-radius: 0.85rem;
      border: 1px solid rgba(255,255,255,0.12);
      transition: all 300ms cubic-bezier(0.16,1,0.3,1);
    }
    .btn-outline:hover { background: rgba(255,255,255,0.08); border-color: rgba(222,61,130,0.45); transform: translateY(-2px); }

    /* ───────────────────────────────────────────────────────────
       SECTION TAG
       ─────────────────────────────────────────────────────────── */
    /* ───────────────────────────────────────────────────────────
       SERVICE CARDS — rail horizontal editorial
       ─────────────────────────────────────────────────────────── */
    .services-rail {
      width: 100%;
    }
    .services-track {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.5rem;
      max-width: 90rem;
      margin: 0 auto;
      padding: 0 1.25rem;
    }
    @media (max-width: 1023px) {
      .services-track {
        display: flex;
        grid-template-columns: none;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 1.25rem;
        padding: 0 1.25rem 1rem;
        -webkit-overflow-scrolling: touch;
      }
      .services-track::-webkit-scrollbar { display: none; }
    }

    .svc-card {
      position: relative;
      display: flex; flex-direction: column;
      padding: 2rem 2rem 2.25rem;
      background: #0f0f12;
      border: 1px solid rgba(255,255,255,0.08);
      transition: all 400ms cubic-bezier(0.16,1,0.3,1);
      min-height: 480px;
    }
    .svc-card::before {
      content: ''; position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--accent, #de3d82);
      transform-origin: left;
      transform: scaleX(0.25);
      transition: transform 500ms cubic-bezier(0.16,1,0.3,1);
    }
    .svc-card:hover::before { transform: scaleX(1); }
    .svc-card:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-6px); }

    .svc-card-solid { border: none; }
    .svc-card-solid::before { background: #f4c245; transform: scaleX(1); }
    .svc-card-solid:hover { transform: translateY(-6px); }

    @media (max-width: 1023px) {
      .svc-card {
        flex: 0 0 85%;
        min-width: 320px;
        scroll-snap-align: start;
      }
    }

    .svc-meta {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 2rem;
    }
    .svc-icon {
      width: 56px; height: 56px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(222,61,130,0.10);
      border: 1px solid rgba(222,61,130,0.30);
      color: #ec6da4;
      margin-bottom: 1.75rem;
    }
    .svc-icon svg { width: 28px; height: 28px; }
    .svc-title {
      font-family: 'Bricolage Grotesque', Inter, sans-serif;
      font-size: 2rem;
      font-weight: 600;
      letter-spacing: -0.03em;
      color: #fafafa;
      line-height: 1.05;
      margin-bottom: 0.75rem;
    }
    .svc-desc {
      color: #a1a1aa;
      line-height: 1.55;
      margin-bottom: 1.75rem;
      max-width: 28ch;
    }
    .svc-list {
      flex: 1;
      margin-bottom: 1.5rem;
    }
    .svc-list li {
      padding: 0.7rem 0;
      border-top: 1px solid rgba(255,255,255,0.08);
      font-size: 0.95rem;
      color: #d4d4d8;
      display: flex; align-items: center; justify-content: space-between;
    }
    .svc-list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
    .svc-list li::after {
      content: '→';
      color: rgba(255,255,255,0.30);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8rem;
    }
    .svc-cta {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-weight: 600; font-size: 0.95rem;
      color: #fafafa;
      transition: gap 250ms;
    }
    .svc-cta:hover { gap: 0.85rem; }

    /* ───────────────────────────────────────────────────────────
       BENTO GRID (portfólio assimétrico + duotone)
       ─────────────────────────────────────────────────────────── */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: minmax(180px, auto);
      gap: 0.75rem;
    }
    @media (max-width: 767px) {
      .bento-grid { grid-template-columns: repeat(2, 1fr); }
    }

    .bento-item {
      position: relative;
      overflow: hidden;
      background: #0f0f12;
      cursor: pointer;
      aspect-ratio: 4 / 3;
    }
    .bento-item img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 700ms cubic-bezier(0.16,1,0.3,1),
                  filter 400ms cubic-bezier(0.16,1,0.3,1);
      /* Duotone: dessatura + tint sutil magenta/azul */
      filter: grayscale(40%) contrast(1.05) brightness(0.92);
    }
    .bento-item:hover img {
      transform: scale(1.06);
      filter: grayscale(0%) contrast(1) brightness(1);
    }

    /* Duotone overlay magenta/azul */
    .bento-item::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(222,61,130,0.35) 0%, rgba(35,85,207,0.35) 100%);
      mix-blend-mode: color;
      opacity: 0.55;
      pointer-events: none;
      transition: opacity 400ms;
      z-index: 1;
    }
    .bento-item:hover::before { opacity: 0; }

    /* Dark gradient na borda inferior + caption */
    .bento-item::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(9,9,11,0.92) 0%, rgba(9,9,11,0.20) 35%, transparent 60%);
      opacity: 0; transition: opacity 400ms;
      z-index: 2;
    }
    .bento-item:hover::after { opacity: 1; }

    .bento-item[data-label]:hover {
      box-shadow: inset 0 0 0 1px rgba(244,194,69,0.55);
    }
    .bento-item[data-label]::before {
      /* mantém o ::before do duotone */
    }
    .bento-item .caption,
    .bento-item[data-label] > .caption { display: none; }
    .bento-item::after { /* já definido */ }

    /* Caption via ::after content workaround usando span */
    .bento-item .bento-cap {
      position: absolute;
      left: 1rem; right: 1rem; bottom: 1rem;
      z-index: 3;
      display: flex; justify-content: space-between; align-items: end;
      gap: 0.5rem;
      color: #fff;
      opacity: 0; transform: translateY(8px);
      transition: all 400ms 100ms cubic-bezier(0.16,1,0.3,1);
    }
    .bento-item:hover .bento-cap { opacity: 1; transform: translateY(0); }

    /* SIZE VARIANTS */
    .bento-lg {
      grid-column: span 2;
      grid-row: span 2;
      aspect-ratio: auto;
    }
    .bento-wide {
      grid-column: span 2;
      aspect-ratio: auto;
    }
    @media (max-width: 767px) {
      .bento-lg, .bento-wide { grid-column: span 2; grid-row: auto; aspect-ratio: 4/3; }
    }

    /* ───────────────────────────────────────────────────────────
       MARQUEE (carrossel infinito)
       ─────────────────────────────────────────────────────────── */
    .marquee-wrapper {
      mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
    .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee 30s linear infinite;
      will-change: transform;
    }
    .marquee-wrapper:hover .marquee-track { animation-play-state: paused; }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    .logo-card {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200px;
      height: 100px;
      margin: 0 24px;
    }
    .logo-card img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      filter: grayscale(100%) brightness(1.9) contrast(0.85);
      opacity: 0.60;
      transition: all 350ms cubic-bezier(0.16,1,0.3,1);
    }
    .logo-card:hover img {
      filter: none;
      opacity: 1;
      transform: scale(1.06);
    }

    /* ───────────────────────────────────────────────────────────
       SCROLL REVEAL
       ─────────────────────────────────────────────────────────── */
    .reveal, .reveal-left, .reveal-right {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 800ms cubic-bezier(0.16,1,0.3,1), transform 800ms cubic-bezier(0.16,1,0.3,1);
    }
    .reveal-left  { transform: translateX(-40px); }
    .reveal-right { transform: translateX(40px); }
    .reveal.visible, .reveal-left.visible, .reveal-right.visible {
      opacity: 1; transform: translate(0,0);
    }

    /* ───────────────────────────────────────────────────────────
       FLOATING WHATSAPP
       ─────────────────────────────────────────────────────────── */
    .wa-float {
      position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
      width: 64px; height: 64px;
      border-radius: 999px;
      background: #25D366;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 10px 30px -5px rgba(37,211,102,0.55);
      transition: all 300ms;
    }
    .wa-float::before {
      content: '';
      position: absolute; inset: 0;
      border-radius: 999px;
      border: 3px solid #25D366;
      animation: pulseRing 2.5s cubic-bezier(.455, .03, .515, .955) infinite;
    }
    .wa-float:hover { transform: scale(1.08); }
    .wa-tooltip {
      position: absolute; right: 76px; top: 50%; transform: translateY(-50%);
      background: #09090b; color: #fafafa;
      padding: 0.5rem 0.9rem; border-radius: 0.6rem;
      font-size: 0.85rem; font-weight: 600;
      white-space: nowrap;
      border: 1px solid rgba(255,255,255,0.10);
      opacity: 0; pointer-events: none;
      transition: opacity 250ms;
    }
    .wa-float:hover .wa-tooltip { opacity: 1; }

    /* ───────────────────────────────────────────────────────────
       MOBILE MENU
       ─────────────────────────────────────────────────────────── */
    .mobile-menu {
      transform: translateX(100%);
      transition: transform 400ms cubic-bezier(0.16,1,0.3,1);
    }
    .mobile-menu.open { transform: translateX(0); }

    /* ───────────────────────────────────────────────────────────
       UTILITIES
       ─────────────────────────────────────────────────────────── */
    .text-balance { text-wrap: balance; }
    .no-scrollbar::-webkit-scrollbar { display: none; }