@font-face {
  font-family: "InterLocal";
  src: url("./fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterLocal";
  src: url("./fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterLocal";
  src: url("./fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterLocal";
  src: url("./fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterLocal";
  src: url("./fonts/Inter-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

html { scroll-behavior: smooth; }
    .section-pad { padding: 5rem 0; }
    @media (max-width: 768px){ .section-pad { padding: 3.25rem 0; } }

    .bg-grid {
      background-image:
        radial-gradient(rgba(167,139,250,.14) 1px, transparent 1px),
        radial-gradient(rgba(79,70,229,.12) 1px, transparent 1px);
      background-position: 0 0, 12px 12px;
      background-size: 24px 24px;
    }

    .glass {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      font-weight: 800;
      transition: .18s ease;
      user-select: none;
      white-space: nowrap;
    }
    .btn-cta{
      color: #fff;
      padding: 16px 22px;
      background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 55%, #a78bfa 120%);
      box-shadow: 0 18px 55px rgba(79,70,229,.18), 0 18px 55px rgba(124,58,237,.18);
    }
    .btn-cta:hover{ transform: translateY(-2px); filter: brightness(1.03); }
    .btn-ghost{
      color: rgba(255,255,255,.90);
      padding: 12px 14px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
    }
    .btn-ghost:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }

    .chip{
      display:inline-flex; align-items:center; gap:.5rem;
      padding: 8px 12px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 13px;
      color: rgba(255,255,255,.82);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
    }

    /* HERO (fundo otimizado: AVIF/WebP por breakpoint) */
    .hero-bg{
      position: relative;
      background-image: url("../img/ge-carvalho-hero-mobile-768.webp");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      overflow: hidden;

      min-height: 78vh;
      padding: 4.75rem 0;

      display: flex;
      align-items: center;
    }

    @supports (background-image: image-set(url("../img/ge-carvalho-hero-mobile-768.webp") 1x)){
      .hero-bg{
        background-image: image-set(
          url("../img/ge-carvalho-hero-mobile-768.avif") type("image/avif") 1x,
          url("../img/ge-carvalho-hero-mobile-768.webp") type("image/webp") 1x
        );
      }
    }

    @media (min-width: 769px){
      .hero-bg{
        background-image: url("../img/ge-carvalho-hero-desktop-768.webp");
        min-height: 92vh;
        padding: 7.25rem 0;
      }

      @supports (background-image: image-set(url("../img/ge-carvalho-hero-desktop-768.webp") 1x)){
        .hero-bg{
          background-image: image-set(
            url("../img/ge-carvalho-hero-desktop-768.avif") type("image/avif") 1x,
            url("../img/ge-carvalho-hero-desktop-768.webp") type("image/webp") 1x
          );
        }
      }
    }

    @media (min-width: 1280px){
      .hero-bg{
        background-image: url("../img/ge-carvalho-hero-desktop-1280.webp");
      }

      @supports (background-image: image-set(url("../img/ge-carvalho-hero-desktop-1280.webp") 1x)){
        .hero-bg{
          background-image: image-set(
            url("../img/ge-carvalho-hero-desktop-1280.avif") type("image/avif") 1x,
            url("../img/ge-carvalho-hero-desktop-1280.webp") type("image/webp") 1x
          );
        }
      }
    }

    @media (min-width: 1536px){
      .hero-bg{
        background-image: url("../img/ge-carvalho-hero-desktop-1920.webp");
      }

      @supports (background-image: image-set(url("../img/ge-carvalho-hero-desktop-1920.webp") 1x)){
        .hero-bg{
          background-image: image-set(
            url("../img/ge-carvalho-hero-desktop-1920.avif") type("image/avif") 1x,
            url("../img/ge-carvalho-hero-desktop-1920.webp") type("image/webp") 1x
          );
        }
      }
    }

    .hero-bg::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(
        90deg,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.28) 55%,
        rgba(0,0,0,.55) 100%
      );
    }
    .hero-bg > *{ position: relative; z-index: 1; }

    @media (max-width: 768px){
      /* ===== MOBILE: centraliza conteúdo ===== */

      /* Centralização global no mobile */
      body, main, footer { text-align: center; }

      /* Força neutralizar alinhamentos “left” que você colocou no desktop */
      main .text-left { text-align: center !important; }
      main .text-right { text-align: center !important; }

      /* Centraliza flex que estava “justify-start” no desktop */
      main .justify-start { justify-content: center !important; }

      /* Centraliza itens de flex que estavam “items-start” */
      main .items-start { align-items: center !important; }
      main .items-end { align-items: center !important; }

      /* Hero: você travou o container à esquerda (mr-auto/ml-0). No mobile volta a centralizar */
      .hero-bg .max-w-6xl{
        margin-left: auto !important;
        margin-right: auto !important;
      }

      /* Listas: quando centraliza texto, bullet some ou fica torto. Aqui fica aceitável */
      main ul.list-disc{
        list-style-position: inside;
        padding-left: 0 !important;
      }
      main ul.list-disc li{
        text-align: center;
      }
    }

    .faq-bg{
      position: relative;
      background-image: url("../img/ge-carvalho-hero-mobile-768.webp");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      overflow: hidden;
    }

    @supports (background-image: image-set(url("../img/ge-carvalho-hero-mobile-768.webp") 1x)){
      .faq-bg{
        background-image: image-set(
          url("../img/ge-carvalho-hero-mobile-768.avif") type("image/avif") 1x,
          url("../img/ge-carvalho-hero-mobile-768.webp") type("image/webp") 1x
        );
      }
    }

    @media (min-width: 769px){
      .faq-bg{
        background-image: url("../img/ge-carvalho-hero-desktop-768.webp");
      }

      @supports (background-image: image-set(url("../img/ge-carvalho-hero-desktop-768.webp") 1x)){
        .faq-bg{
          background-image: image-set(
            url("../img/ge-carvalho-hero-desktop-768.avif") type("image/avif") 1x,
            url("../img/ge-carvalho-hero-desktop-768.webp") type("image/webp") 1x
          );
        }
      }
    }

    @media (min-width: 1280px){
      .faq-bg{
        background-image: url("../img/ge-carvalho-hero-desktop-1280.webp");
      }

      @supports (background-image: image-set(url("../img/ge-carvalho-hero-desktop-1280.webp") 1x)){
        .faq-bg{
          background-image: image-set(
            url("../img/ge-carvalho-hero-desktop-1280.avif") type("image/avif") 1x,
            url("../img/ge-carvalho-hero-desktop-1280.webp") type("image/webp") 1x
          );
        }
      }
    }

    @media (min-width: 1536px){
      .faq-bg{
        background-image: url("../img/ge-carvalho-hero-desktop-1920.webp");
      }

      @supports (background-image: image-set(url("../img/ge-carvalho-hero-desktop-1920.webp") 1x)){
        .faq-bg{
          background-image: image-set(
            url("../img/ge-carvalho-hero-desktop-1920.avif") type("image/avif") 1x,
            url("../img/ge-carvalho-hero-desktop-1920.webp") type("image/webp") 1x
          );
        }
      }
    }
    .faq-bg::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(9,0,18,.92) 0%, rgba(15,0,31,.86) 60%, rgba(9,0,18,.92) 100%);
    }
    .faq-bg > *{ position: relative; z-index: 1; }

    /* Modal */
    .modal-hidden { display:none; }
    .modal-open { overflow:hidden; }

    .modal-backdrop{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.72);
      z-index: 95;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 18px;
    }
    .modal-card{
      width: min(920px, 100%);
      border-radius: 22px;
      overflow:hidden;
      background: rgba(15,0,31,.92);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 18px 60px rgba(0,0,0,.55);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    /* Case modal maior (sem mexer no lead modal) */
    #caseModal .modal-card{
      width: min(1120px, 100%);
    }

    /* ===== Zoom estático no print do modal (scroll + botões) ===== */
    .case-zoom{
      --z: 1;
      position: relative;
      overflow: auto;
      border-radius: 16px;
      background: rgba(0,0,0,.25);
      cursor: zoom-in;
      height: 74vh;
      -webkit-overflow-scrolling: touch;
    }
    .case-zoom[data-zoomed="true"]{ cursor: zoom-out; }

    @media (max-width: 768px){
      .case-zoom{ height: 62vh; }
    }

    #caseModalImg{
      width: calc(100% * var(--z));
      height: auto;
      max-width: none;
      display: block;
    }

    /* Timeline tabs */
    .how-tab{
      flex: 0 0 auto;
      padding: 12px 16px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.82);
      font-weight: 900;
      font-size: 13px;
      letter-spacing: .2px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
      transition: .18s ease;
    }
    .how-tab:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.09);
      border-color: rgba(255,255,255,.18);
    }
    .how-tab:focus-visible{
      outline: none;
      box-shadow: 0 0 0 3px rgba(167,139,250,.28), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .how-tab-active{
      color:#fff;
      border-color: rgba(255,255,255,.22);
      background: linear-gradient(90deg,#4f46e5 0%,#7c3aed 55%,#a78bfa 120%);
      box-shadow: 0 18px 55px rgba(124,58,237,.22);
    }

    /* ===== Header hide/show no scroll ===== */
    #header{
      will-change: transform;
      transition: transform .28s ease;
      transform: translateY(0);
    }
    #header.header-hidden{
      transform: translateY(-110%);
    }

    /* ===== Revel / animações por seção ===== */
    .reveal-anim{
      opacity: 0;
      transform: var(--from, translateY(18px));
      filter: blur(2px);
      transition:
        opacity .72s cubic-bezier(.2,1,.2,1),
        transform .72s cubic-bezier(.2,1,.2,1),
        filter .72s cubic-bezier(.2,1,.2,1);
      transition-delay: var(--d, 0ms);
      will-change: transform, opacity, filter;
    }
    .reveal-anim.is-inview{
      opacity: 1;
      transform: translate3d(0,0,0) rotate(0) scale(1);
      filter: blur(0);
    }

    .reveal-anim[data-anim="slide-left"]  { --from: translate3d(-64px,0,0); }
    .reveal-anim[data-anim="slide-right"] { --from: translate3d(64px,0,0); }
    .reveal-anim[data-anim="fade-up"]     { --from: translate3d(0,22px,0); }
    .reveal-anim[data-anim="zoom"]        { --from: scale(.92); }
    .reveal-anim[data-anim="rotate"]      { --from: translate3d(0,20px,0) rotate(-2.2deg); transform-origin: 50% 80%; }
    .reveal-anim[data-anim="pop"]         { --from: translate3d(0,26px,0) scale(.96); }

    /* Hover diferente nos cards (sem exagero) */
    .card-hover{
      transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
    }
    .card-hover:hover{
      transform: translateY(-4px);
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.075);
      box-shadow: 0 18px 60px rgba(0,0,0,.45);
    }
    .card-hover-tilt:hover{ transform: translateY(-4px) rotate(-.45deg); }
    .card-hover-pop:hover{ transform: translateY(-2px) scale(1.02); }

    /* ===== Carrossel Avaliações ===== */
    #reviewsViewport { overflow: hidden; }
    #reviewsTrack { will-change: transform; }

    .review-card{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 22px;
      padding: 18px;
      box-shadow: 0 14px 45px rgba(0,0,0,.35);
    }
    .avatar{
      width: 42px;
      height: 42px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font-weight: 900;
      color: #fff;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }

    @keyframes reviews-marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    @media (min-width: 768px){
      #reviewsTrack{
        animation: reviews-marquee 52s linear infinite;
      }
      #reviewsViewport:hover #reviewsTrack,
      #reviewsViewport:focus-within #reviewsTrack{
        animation-play-state: paused;
      }
    }

    @media (max-width: 767px){
      #reviewsViewport{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
      }
      #reviewsTrack{
        animation: none;
        padding-bottom: 10px;
      }
      .review-card{
        scroll-snap-align: start;
      }
    }

    /* ===== PROVAS (ABAS) ===== */
    .provas-tab{
      position: relative;
      padding: 10px 14px;
      border-radius: 14px;
      font-weight: 800;
      font-size: 13px;
      color: rgba(255,255,255,.86);
      transition: background .18s ease, transform .18s ease, color .18s ease;
      outline: none;
    }
    .provas-tab:hover{
      background: rgba(255,255,255,.06);
      transform: translateY(-1px);
    }
    .provas-tab:focus-visible{
      box-shadow: 0 0 0 3px rgba(167,139,250,.28);
    }
    .provas-tab.provas-tab-active{
      color: #fff;
    }
    .provas-tab.provas-tab-active::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius: 14px;
      background: rgba(17,17,17,.75);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 0 20px rgba(0,0,0,.25);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .provas-tab > span{ position: relative; z-index: 1; }

    .provas-panel-in{
      animation: provasPanelIn .55s cubic-bezier(.2,1,.2,1);
    }
    @keyframes provasPanelIn{
      from{
        opacity: 0;
        transform: translateX(-10px) scale(.95);
        filter: blur(10px);
      }
      to{
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
      }
    }

    /* ===== Banner Cookies ===== */
    .cookie-banner{
      position: fixed;
      left: 14px;
      right: 14px;
      bottom: 14px;
      z-index: 90;
    }
    @media (min-width: 768px){
      .cookie-banner{
        left: 18px;
        right: auto;
        bottom: 18px;
        width: min(640px, calc(100vw - 36px));
      }
    }
    .cookie-inner{
      background: rgba(15,0,31,.92);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 22px;
      box-shadow: 0 18px 60px rgba(0,0,0,.55);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 14px;
    }
    .field{
      width: 100%;
      border-radius: 14px;
      padding: 12px 12px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
      color: #fff;
      font-weight: 700;
      outline: none;
    }
    .field:focus{
      border-color: rgba(167,139,250,.35);
      box-shadow: 0 0 0 3px rgba(167,139,250,.18);
    }
    .label{
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.62);
    }

    /* ===== Select legível (corrige opção “branca no branco”) ===== */
    select.field { color: #fff; }
    select.field option,
    select.field optgroup{
      color: #0b0b0b;
      background: #ffffff;
    }