/* Fonts */
    * {
        font-family: 'Poppins', sans-serif;
    }

/* RESPONSIVO - Mobile */
    @media only screen and (max-width: 1023px) {
        /* Hero — content-driven height (sem dead space) + safe top pro navbar fixo */
        .heroSwiper { height: auto !important; min-height: 0 !important; }
        .heroSwiper .swiper-slide { height: auto !important; min-height: 0 !important; padding: 120px 0 96px !important; box-sizing: border-box; }
        .heroSwiper .swiper-slide .container { height: auto !important; align-items: flex-start !important; }
        .heroSwiper .hero-content { width: 100%; }
        /* Pagination sobe um pouco pra não colar no chrome bar */
        .heroSwiper .swiper-pagination { bottom: 24px !important; }

        /* Hero h1 mobile: limpa breaks quebrando palavras */
        .heroSwiper h1 { font-size: clamp(1.75rem, 7vw, 2.25rem) !important; }
        .heroSwiper h1 br { display: inline; }
        .heroSwiper p { font-size: 1rem !important; line-height: 1.5 !important; margin-bottom: 1.5rem !important; }
        .heroSwiper .hero-content a { font-size: 1rem !important; padding: 0.875rem 1.5rem !important; }

        /* Hero section: content-driven, sem forçar 100vh */
        section.relative.min-h-screen { min-height: 0 !important; }

        /* Services — carousel horizontal com swipe (mirror do scroll-pin desktop) */
        .section-2 { height: auto !important; padding: 56px 0 !important; overflow: hidden !important; }
        .pin-wrap { height: auto !important; display: block !important; align-items: initial !important; overflow: visible !important; width: 100% !important; }
        .cards-container {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            width: 100% !important;
            max-width: 100vw !important;
            overflow-x: auto !important;
            overflow-y: visible !important;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scroll-padding-left: 5vw;
            padding: 12px 5vw 28px !important;
            gap: 16px !important;
            transform: none !important;
            box-sizing: border-box !important;
        }
        .cards-container::-webkit-scrollbar { display: none; }
        .cards-container { scrollbar-width: none; }
        .card {
            flex-shrink: 0 !important;
            width: 80vw !important;
            max-width: 340px !important;
            margin: 0 !important;
            height: auto !important;
            min-height: 460px !important;
            scroll-snap-align: center;
        }
        .cards-container {
            perspective: 1100px;
            -webkit-perspective: 1100px;
        }
        .card {
            flex-shrink: 0 !important;
            width: 80vw !important;
            max-width: 340px !important;
            margin: 0 !important;
            height: auto !important;
            min-height: 460px !important;
            scroll-snap-align: center;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            will-change: transform, opacity, filter;
        }
        .card-inner {
            transition: transform .45s cubic-bezier(.22,.61,.36,1), filter .45s ease, box-shadow .45s ease;
            will-change: transform, filter;
        }
        /* Hint inicial: leve nudge pra sinalizar swipe (substitui wiggle) */
        @keyframes apeNudge {
            0%, 100% { transform: translateX(0); }
            55%      { transform: translateX(-22px); }
        }
        .cards-container.cf-hint { animation: apeNudge 1.4s ease-in-out 0.5s 1; }

        /* Cards mobile: fundo mais sólido pra contraste texto branco legível */
        .card-inner { background: rgba(20,20,20,0.85) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
        .card-content { padding: 20px !important; }
        .card-content h3 { font-size: 1.4rem !important; line-height: 1.3 !important; text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important; margin-bottom: 8px !important; }
        .card-content p { font-size: 0.95rem !important; opacity: 0.95 !important; }

        /* About section — stack columns */
        .section-pin { flex-direction: column; min-height: auto !important; height: auto !important; }
        #sobre .pin-left, #sobre .pin-right { width: 100% !important; padding: 32px 20px !important; }
        #sobre .pin-left { height: auto !important; position: relative !important; }
        #sobre .pin-left h2 { font-size: 1.75rem !important; line-height: 1.2 !important; }
        #sobre .pin-left p { font-size: 1.05rem !important; line-height: 1.5 !important; }
        #sobre .pin-right { gap: 20px !important; }

        /* Portfolio sticky scroll — stack on mobile, layout original, mockup um pouco mais alto */
        .portfolio-section { height: auto !important; }
        .portfolio-wrapper { position: relative !important; height: auto !important; }
        .portfolio-card { position: relative !important; transform: none !important; min-height: 75vh !important; }
        /* Mockup: mantém centralização original mas sobe ~12% pra texto respirar */
        .portfolio-card > div[style*="position:absolute"][style*="top:50%"] {
            top: 38% !important;
            transform: translate(-50%, -50%) !important;
            width: 90% !important;
            max-width: 600px !important;
        }
        .portfolio-card .portfolio-content { padding: 24px 20px !important; }
        .portfolio-content h2 { font-size: 1.75rem !important; line-height: 1.2 !important; margin-bottom: 8px !important; }
        .portfolio-content p { font-size: 0.95rem !important; line-height: 1.5 !important; }

        /* Portfolio grid overlay always visible (no hover on touch) */
        #portfolio-grid .portfolio-overlay { opacity: 1; }

        /* Mobile menu width safety */
        .mobile-menu { width: min(320px, 85vw) !important; }

        /* Footer mobile: respiro entre colunas + padding lateral */
        footer { padding: 48px 0 32px !important; }
        footer .container { padding: 0 20px !important; }
        footer .grid { gap: 32px !important; margin-bottom: 32px !important; }
        footer h3, footer h4 { margin-bottom: 12px !important; }
        footer ul li { margin-bottom: 4px; }
        footer .border-t { padding-top: 24px !important; }
    }

    /* Mobile pequeno (≤480px): mais aperto */
    @media only screen and (max-width: 480px) {
        .heroSwiper h1 { font-size: 1.625rem !important; }
        .heroSwiper p { font-size: 0.95rem !important; }
        .card-content h3 { font-size: 1.25rem !important; }
        .portfolio-content h2 { font-size: 1.5rem !important; }
        #sobre .pin-left h2 { font-size: 1.5rem !important; }
    }

/* Section Placeholders Heights */
    .section-placeholder {
        min-height: 100vh;
        border: 2px dashed #EBEBEB;
    }

/* Navbar Transitions */
    .navbar-transparent {
        background: transparent;
        transition: all 0.3s ease-in-out;
    }
    .navbar-transparent .menu-desktop {
        font-size: 0.8rem;
    }
    .navbar-scrolled {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    }
    .navbar-scrolled .menu-desktop {
        font-size: 0.8rem;
        color:#000;
    }
    .navbar-scrolled .menu-desktop svg path{
        fill:#000!important;
    }
    .navbar-transparent svg {
      color: #ffffff;
    }
    .navbar-scrolled svg {
      color: #000000;
    }
    .logo-svg {
      transition: color 0.3s ease;
    }

/* Mega Menu */
    .mega-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.3s ease;
        z-index: 40;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }

    .mega-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

/* Mega Menu Overlay */
    .mega-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 39;
    }
    .mega-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

/* Mobile Menu */
    .mobile-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 320px;
        height: 100vh;
        background: white;
        transition: left 0.3s ease;
        z-index: 999;
        overflow-y: auto;
    }

    .mobile-menu.active {
        left: 0;
    }

    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 998;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

/* Hero Animations */
    .heroCine-hidden {
        opacity: 0;
        visibility: hidden;
    }
    .heroSwiper svg{ max-width:370px; width:100%; height:auto;
        margin:0 auto!important;
    }
    /* FOUC guard: esconde slides 2+ até o Swiper inicializar */
    .heroSwiper:not(.swiper-initialized) .swiper-slide + .swiper-slide {
        visibility: hidden;
    }
    /* Hero h1 responsivo: evita overflow e quebras mid-word no text-5xl */
    .heroSwiper h1 {
        font-size: clamp(1.75rem, 3.2vw, 3rem) !important;
        line-height: 1.15 !important;
        text-wrap: balance;
        hyphens: none;
        -webkit-hyphens: none;
    }
    .heroSwiper h1 br { display: inline; }

/* Swiper Custom */
    .swiper-pagination-bullet {
        background: #EC8223!important;
        opacity: 0.5;
    }
    .swiper-pagination-bullet-active {
        background: #EC8223!important;
        opacity: 1;
    }
    .swiper-button-next,
    .swiper-button-prev {
        color: #ec8223!important;
        opacity:0.1;
    }
    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        color: white;
        opacity:1;
    }

/* Serviços - Scroll Horizontal */
    .section-2 {
        background: #000;
        height: 100vh;
        overflow: visible;
        background:url('../img/bg-login.jpg');
        background-size: cover;
    }

    .pin-wrap {
        height: 100vh;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .cards-container {
        display: flex;
        gap: 40px;
        padding-left: 40vw;
        padding-right: 30vw;
    }

    .card {
        flex-shrink: 0;
        width: 400px;
        height: 500px;
        perspective: 1200px;
    }

    .card-inner {
        width: 100%;
        height: 100%;

        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        border-radius: 20px;
        border: 1px solid rgba(255,255,255,0.25);

        box-shadow: 0 25px 60px rgba(0,0,0,0.4);
        overflow: hidden;

        transform-style: preserve-3d;
        will-change: transform;
    }

    .card-inner img {
        width: 100%;
        height: 50%;
        object-fit: cover;
        opacity: 0.9;
    }

    .card-content {
        padding: 30px;
        color: #000;
        transform: translateZ(30px);
    }

    .card-content h3 {
        color:#fff;
        font-size: 1.8rem;
        margin-bottom: 5px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.4);
        text-align: center;
        line-height: 2rem;
    }

    .card-content p {
        color:#fff;
        font-size: 0.9rem;
        opacity: 0.75;
        line-height: 1.6;
    }

/* Portfólio Stacked Cards */

    .portfolio-section {
      position: relative;
      height: 500vh; /* quantidade de cards */
      background: #000;
    }

    .portfolio-wrapper {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      background:url('../img/bg-portfolio.jpg');
    }
    .portfolio-wrapper:after {
      content: 'x';
    }

    .portfolio-wrapper .portfolio-card {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transform: translateY(100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .portfolio-wrapper .portfolio-card::after {
      content: "";
      position: absolute;
      inset: 0;
    }

    .portfolio-content {
      position: relative;
      text-align: center;
      max-width: 900px;
      padding: 2rem;
      color: #fff;
    }

    .portfolio-content h2 {
      font-size: clamp(2rem, 4vw, 3.5rem);
      margin-bottom: 1rem;
    }

    .portfolio-content span {
      color: #EC8223;
    }

    .portfolio-content p {
      font-size: 1.2rem;
      line-height: 1.6;
      color: #eee;
    }

/* Sobre */
    .section-pin {
      min-height: 200vh;
      background: #fff;
      color: #000;
      display: flex;
    }

    #sobre .pin-left,
    #sobre .pin-right {
      width: 50%;
      padding: 80px;
    }

    #sobre .pin-left {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    #sobre .pin-left h2 {
      max-width: 700px;
      opacity: 1;
      margin-bottom:30px;
    }
    #sobre .pin-left h2 span{
        color:#ec8223;
    }

    #sobre .pin-left p {
      max-width: 600px;
      font-size: 1.4rem;
      line-height: 1.6;
      opacity: 1;
    }

    #sobre .pin-right {
      display: flex;
      flex-direction: column;
      gap: 40px;
      justify-content: center;
    }

    #sobre .card-about {
      background: #ec8223;
      color: #000;
      padding: 40px;
      min-height:500px;
      transform: translateY(120px);
      opacity: 0;
      border-radius:20px;
    }

    #sobre .card-about h3{
        color: #000;
        font-size: 1.8rem;
        margin-bottom: 10px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

/* HOME CTA */
    #cta-final{
        background: url(../img/bg-home-cta.webp);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: #f9931f;
    }

/* Internals Common */
    .bg-abstract1 {
        background: url('../img/bg-abstract1.webp');
        background-position: center;
        background-size: contain;
    }
    .bg-abstract2 {
        background: url('../img/bg-abstract2.png');
        background-position: center;
        background-size: contain;
    }
    .bg-abstract3 {
        background: url('../img/bg-abstract3.jpg');
        background-position: center;
        background-size: contain;
    }

/* SWEET ALERT OVERLAY BLUR PREMIUM*/
    .swal2-container {
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      background: rgba(0, 0, 0, 0.25) !important;
    }

    /* Suaviza a transição do overlay */
    .swal2-container.swal2-backdrop-show {
      animation: fadeInOverlay 0.35s ease-out forwards;
    }

    .swal2-container.swal2-backdrop-hide {
      animation: fadeOutOverlay 0.25s ease-in forwards;
    }

    @keyframes fadeInOverlay {
      from {
        backdrop-filter: blur(0);
        background: rgba(0, 0, 0, 0);
      }
      to {
        backdrop-filter: blur(8px);
        background: rgba(0, 0, 0, 0.25);
      }
    }

    @keyframes fadeOutOverlay {
      from {
        backdrop-filter: blur(8px);
        background: rgba(0, 0, 0, 0.25);
      }
      to {
        backdrop-filter: blur(0);
        background: rgba(0, 0, 0, 0);
      }
    }

/* PORTFOLIO */
    #portfolio-grid {
      width: 100%;
      display: block;
    }

    /* Filtro */
    #portfolio-grid .portfolio-filter-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin-bottom: 32px;
    }

    #portfolio-grid .portfolio-filter-btn {
      padding: 10px 22px;
      font-size: 12px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      border: 1px solid #333;
      background: transparent;
      color: #bdbdbd;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    #portfolio-grid .portfolio-filter-btn:hover {
      border-color: #f97316;
      color: #f97316;
    }

    #portfolio-grid .portfolio-filter-btn.is-active {
      border-color: #f97316;
      color: #f97316;
    }

    /* Grid */
    #portfolio-grid .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }

    @media (max-width: 1024px) {
      #portfolio-grid .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {
      #portfolio-grid .portfolio-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Card */
    #portfolio-grid .portfolio-card {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      background: #000;
    }

    #portfolio-grid .portfolio-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s ease;
    }

    #portfolio-grid .portfolio-card:hover img {
      transform: scale(1.1);
    }

    /* Overlay */
    #portfolio-grid .portfolio-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 18px 24px;
      background: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fff;
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 2;
    }

    #portfolio-grid .portfolio-card:hover .portfolio-overlay {
      opacity: 1;
    }

/* SOBRE */
    #page-header-sobre {
        background: url(../img/bg-sobre.jpg);
        background-position-x: center;
        background-position-y: top;
    }

/* CONTATO */
    #page-header-contato {
        background: url(../img/bg-contato.jpg);
        background-position-x: center;
        background-position-y: top;
    }

/* ============================================================
   ARTICLE CONTENT STYLING — .ape-article
   ============================================================ */

    .ape-article {
      font-size: 1.125rem;
      line-height: 1.85;
      color: #374151;
    }

    /* Paragraphs */
    .ape-article p {
      margin-bottom: 1.5rem;
    }

    /* Headings */
    .ape-article h2 {
      font-size: 1.75rem;
      font-weight: 800;
      color: #111827;
      margin-top: 3rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid #fed7aa;
      line-height: 1.3;
    }

    .ape-article h3 {
      font-size: 1.35rem;
      font-weight: 700;
      color: #1f2937;
      margin-top: 2rem;
      margin-bottom: 0.75rem;
      line-height: 1.4;
    }

    .ape-article h4 {
      font-size: 1.1rem;
      font-weight: 700;
      color: #374151;
      margin-top: 1.5rem;
      margin-bottom: 0.5rem;
    }

    /* Links */
    .ape-article a {
      color: #ea580c;
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.2s;
    }
    .ape-article a:hover {
      border-bottom-color: #ea580c;
    }

    /* Bold */
    .ape-article strong {
      font-weight: 700;
      color: #111827;
    }

    /* Italic */
    .ape-article em {
      font-style: italic;
      color: #4b5563;
    }

    /* Lists */
    .ape-article ul,
    .ape-article ol {
      margin-bottom: 1.5rem;
      padding-left: 0;
      list-style: none;
    }

    .ape-article ul li {
      position: relative;
      padding-left: 1.75rem;
      margin-bottom: 0.75rem;
    }

    .ape-article ul li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.6rem;
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: linear-gradient(135deg, #f97316, #ea580c);
      transform: rotate(45deg);
    }

    .ape-article ol {
      counter-reset: article-counter;
    }

    .ape-article ol li {
      position: relative;
      padding-left: 2.25rem;
      margin-bottom: 0.75rem;
      counter-increment: article-counter;
    }

    .ape-article ol li::before {
      content: counter(article-counter);
      position: absolute;
      left: 0;
      top: 0.15rem;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      background: linear-gradient(135deg, #f97316, #ea580c);
      color: white;
      font-size: 0.75rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Blockquotes */
    .ape-article blockquote {
      margin: 2rem 0;
      padding: 1.5rem 1.5rem 1.5rem 2rem;
      border-left: 4px solid #f97316;
      background: linear-gradient(135deg, #fff7ed, #fffbeb);
      border-radius: 0 12px 12px 0;
      font-style: italic;
      color: #92400e;
    }

    .ape-article blockquote p {
      margin-bottom: 0;
    }

    /* Code */
    .ape-article code {
      font-family: 'Fira Code', 'JetBrains Mono', monospace;
      font-size: 0.875rem;
      background: #f3f4f6;
      padding: 0.15rem 0.4rem;
      border-radius: 4px;
      color: #dc2626;
    }

    .ape-article pre {
      background: #1f2937;
      color: #e5e7eb;
      padding: 1.5rem;
      border-radius: 12px;
      overflow-x: auto;
      margin: 1.5rem 0;
    }

    .ape-article pre code {
      background: none;
      color: inherit;
      padding: 0;
    }

    /* Images in content */
    .ape-article img {
      border-radius: 12px;
      margin: 2rem 0;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }

    /* Horizontal Rule */
    .ape-article hr {
      border: none;
      height: 1px;
      background: linear-gradient(90deg, transparent, #d1d5db, transparent);
      margin: 3rem 0;
    }

    /* Tables */
    .ape-article table {
      width: 100%;
      margin: 1.5rem 0;
      border-collapse: collapse;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }

    .ape-article table thead {
      background: #1f2937;
      color: white;
    }

    .ape-article table th {
      padding: 0.75rem 1rem;
      text-align: left;
      font-weight: 700;
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .ape-article table td {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid #f3f4f6;
      font-size: 0.95rem;
    }

    .ape-article table tbody tr:hover {
      background: #fff7ed;
    }

    /* First paragraph - larger intro */
    .ape-article > p:first-child {
      font-size: 1.25rem;
      line-height: 1.8;
      color: #1f2937;
    }

    /* Responsive images */
    .ape-article img {
      max-width: 100%;
      height: auto;
    }

    /* Stat highlights — auto-detect percentage/number patterns */
    .ape-article .ape-stat-highlight {
      display: inline-block;
      background: linear-gradient(135deg, #fff7ed, #ffedd5);
      padding: 0.1rem 0.5rem;
      border-radius: 6px;
      font-weight: 700;
      color: #c2410c;
    }

    /* TOC mobile toggle */
    @media (max-width: 1023px) {
      .ape-article {
        font-size: 1.05rem;
      }
      .ape-article h2 {
        font-size: 1.5rem;
      }
    }

/* ============================================================
   MOBILE FIXES Apr 26 2026 — Issues reportadas pelo Alex via WhatsApp
   1. Hambúrguer descendo pra linha 2 no mobile
   2. Conteúdo do hero coberto pelo navbar wrap
   3. Logo + menu invisíveis no scroll do blog (single)
   4. FAQ "Perguntas Frequentes" texto cinza claro em bg branco
   5. Mockup card portfolio com altura desproporcional no mobile
   6. Logos do carrossel de marcas precisam ser negativas (brancas) no fundo escuro
   ============================================================ */

/* Fix 3 — Logo SEMPRE branca no navbar (currentColor não pode virar #000 da regra .navbar-scrolled svg) */
#navbar a[href$="://"] svg,
#navbar > div > div > div.flex-1.lg\:flex-initial.flex.justify-center > a > svg,
#navbar .flex.justify-center > a > svg {
  color: #ffffff !important;
}

/* Fix 3 — Navbar scrolled no MOBILE: bg escuro sólido pra logo branca + hambúrguer aparecerem */
@media only screen and (max-width: 1023px) {
  .navbar-scrolled {
    background: rgba(10, 10, 10, 0.92) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
  }
  /* Hambúrguer sempre branco, mesmo no scrolled */
  .navbar-scrolled #mobileMenuBtn,
  .navbar-scrolled #mobileMenuBtn svg,
  .navbar-transparent #mobileMenuBtn,
  .navbar-transparent #mobileMenuBtn svg {
    color: #ffffff !important;
  }
  .navbar-scrolled #mobileMenuBtn svg path {
    stroke: #ffffff !important;
  }
}

/* Fix 1 — Mobile navbar layout: 2 colunas (logo à esquerda, hambúrguer à direita)
   O grid grid-cols-3 + 4 children fazia o botão wrappar pra row 2 quando o
   .grid-cols-3 ainda não tinha compilado no Tailwind CDN do iOS. */
@media only screen and (max-width: 1023px) {
  #navbar > .container > .grid {
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto !important;
    grid-auto-flow: column !important;
    gap: 1rem !important;
  }
  /* Logo agarra à esquerda, ocupando primeira coluna mas com size natural */
  #navbar .flex-1.lg\:flex-initial.flex.justify-center {
    justify-content: flex-start !important;
    grid-column: 1 / 2 !important;
  }
  /* Hambúrguer fica na última coluna, alinhado à direita */
  #mobileMenuBtn {
    grid-column: 3 / 4 !important;
    justify-self: end !important;
  }
  /* Logo SVG cap p/ não esticar a navbar */
  #navbar .flex.justify-center > a > svg {
    width: 88px !important;
    height: auto !important;
    max-width: 88px !important;
  }
}

/* Fix 2 — Banner hero não coberto: navbar agora é compacta (1 row), reduzir padding-top do slide */
@media only screen and (max-width: 1023px) {
  .heroSwiper .swiper-slide {
    padding: 72px 0 48px !important;
    min-height: calc(100svh - 56px) !important;
  }
  .heroSwiper { min-height: calc(100svh - 56px) !important; }
  /* Padding-top de inner pages (não-home) também reduz pq navbar é menor agora */
  body:not(.home) main > section:first-child { padding-top: 64px !important; }
}

/* Fix 4 — FAQ + qualquer section bg-white herdava color:#e5e5e5 do body (definido no fouc-guard html)
   Forçar texto escuro em sections claras */
section.bg-white,
section.bg-gray-50,
section.bg-gray-100,
section[class*="bg-white"] {
  color: #1f2937;
}
section.bg-white h1, section.bg-white h2, section.bg-white h3, section.bg-white h4,
section.bg-gray-50 h1, section.bg-gray-50 h2, section.bg-gray-50 h3, section.bg-gray-50 h4,
section.bg-gray-100 h1, section.bg-gray-100 h2, section.bg-gray-100 h3, section.bg-gray-100 h4 {
  color: #111827 !important;
}
section.bg-white .faq-toggle,
section.bg-gray-50 .faq-toggle,
section.bg-gray-100 .faq-toggle {
  color: #111827 !important;
}
section.bg-white .text-gray-600,
section.bg-gray-50 .text-gray-600,
section.bg-gray-100 .text-gray-600 {
  color: #4b5563 !important;
}

/* Fix 5 — Mockup card portfolio: altura da imagem cap no mobile */
@media only screen and (max-width: 1023px) {
  .card-inner img {
    height: 200px !important;
    max-height: 200px !important;
    object-fit: cover;
  }
  /* Card-inner: garantir que o texto não fica espremido com img menor */
  .card-inner {
    display: flex;
    flex-direction: column;
  }
  .card-inner .card-content {
    flex: 1;
  }
}

/* Fix 6 — Logos do carrossel de marcas em versão NEGATIVA (branca) sobre fundo escuro,
   igual versão web. Trocar grayscale por brightness(0) invert(1) que vira tudo branco */
.swiperLeft img,
.swiperRight img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.swiperLeft img:hover,
.swiperRight img:hover {
  opacity: 1;
}

/* Prova social — fundo escuro com gradiente pra separar das seções vizinhas (Apr 26) */
#prova-social {
    background: linear-gradient(180deg, #000 0%, #0f0f0f 18%, #141414 50%, #0f0f0f 82%, #000 100%);
    position: relative;
}
#prova-social::before,
#prova-social::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
    pointer-events: none;
}
#prova-social::before { top: 0; }
#prova-social::after  { bottom: 0; }

/* Logos: brancas com leve recolor laranja no hover (substitui grayscale-on-default) */
#prova-social .swiper-slide img {
    filter: brightness(0.9) contrast(1.05);
    opacity: 0.85;
    transition: filter .35s ease, opacity .35s ease, transform .35s ease;
}
#prova-social .swiper-slide img:hover {
    filter: brightness(1) contrast(1.1) drop-shadow(0 0 12px rgba(236,130,35,0.35));
    opacity: 1;
    transform: scale(1.04);
}