/* Gentill Mob v11 - motor visual único de estrada + correção definitiva do menu mobile */
:root {
  --gentill-v11-yellow: #f2b631;
  --gentill-v11-ink: #040914;
  --gentill-v11-panel: rgba(6, 13, 24, .68);
  --gentill-v11-ease: cubic-bezier(.16, 1, .3, 1);
}

html,
body {
  overflow-x: clip !important;
  max-width: 100% !important;
  background: #040914 !important;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden !important; }
}

body.gentill-v11 {
  background:
    radial-gradient(circle at 50% 72%, rgba(242, 182, 49, .13), transparent 34rem),
    radial-gradient(circle at 80% 8%, rgba(68, 122, 255, .10), transparent 34rem),
    linear-gradient(180deg, #040914 0%, #071220 42%, #040914 100%) !important;
}

body.gentill-v11 #gentill-live-canvas,
body.gentill-v11 #gentill-cursor-aura,
body.gentill-v11 .gentill-v6-ambient,
body.gentill-v11 .gentill-v6-cursor-aura,
body.gentill-v11 .gentill-v7-bg,
body.gentill-v11 .gentill-v7-aura,
body.gentill-v11 .gentill-v9-road-canvas,
body.gentill-v11 .gentill-v9-road-aura {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#gentill-road-v11-canvas,
.gentill-road-v11-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

#gentill-road-v11-canvas {
  width: 100vw;
  height: 100vh;
  opacity: 1;
  mix-blend-mode: screen;
  filter: saturate(1.18) contrast(1.12);
}

.gentill-road-v11-glow {
  inset: auto;
  left: 50%;
  top: 64%;
  width: min(82vw, 980px);
  height: min(82vw, 980px);
  border-radius: 999px;
  transform: translate3d(-50%, -50%, 0);
  background:
    radial-gradient(circle, rgba(242, 182, 49, .19) 0%, rgba(242, 182, 49, .09) 30%, rgba(60, 122, 255, .055) 54%, transparent 76%);
  filter: blur(48px);
  opacity: .9;
}

body.gentill-v11 .gentill-mob-page,
body.gentill-v11 .gentill-mob-header,
body.gentill-v11 .gentill-mob-main,
body.gentill-v11 .gentill-mob-footer {
  position: relative;
  z-index: 1;
}

body.gentill-v11 .gentill-mob-main,
body.gentill-v11 .gentill-mob-page {
  background: transparent !important;
}

body.gentill-v11 .gentill-mob-section {
  background: linear-gradient(180deg, rgba(4, 9, 20, .58), rgba(4, 9, 20, .42)) !important;
}
body.gentill-v11 .gentill-mob-section.gentill-mob-dark {
  background:
    radial-gradient(circle at 16% 18%, rgba(242, 182, 49, .08), transparent 30rem),
    linear-gradient(180deg, rgba(4, 9, 20, .70), rgba(4, 9, 20, .50)) !important;
}
body.gentill-v11 .gentill-mob-hero {
  background:
    radial-gradient(circle at 50% 78%, rgba(242, 182, 49, .13), transparent 34rem),
    linear-gradient(180deg, rgba(4, 9, 20, .44), rgba(4, 9, 20, .32)) !important;
}

body.gentill-v11 .gentill-mob-panel,
body.gentill-v11 .gentill-mob-card,
body.gentill-v11 .gentill-mob-model-card,
body.gentill-v11 .gentill-mob-value-card,
body.gentill-v11 .gentill-mob-experience-card,
body.gentill-v11 .gentill-mob-mini-card,
body.gentill-v11 .gentill-driver-form,
body.gentill-v11 .gentill-driver-summary-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.076), rgba(255,255,255,.026)),
    rgba(5, 12, 24, .72) !important;
  border-color: rgba(255,255,255,.13) !important;
  backdrop-filter: blur(18px) saturate(1.05);
}

/* Menu mobile corrigido: usa details, mas com controle JS independente para evitar falha de clique em celulares. */
body.gentill-v11 .gentill-mob-nav {
  overflow: visible !important;
}
body.gentill-v11 .gentill-mob-nav nav,
body.gentill-v11 .gentill-mob-nav nav a,
body.gentill-v11 .gentill-mob-nav .nav-pre-cadastro,
body.gentill-v11 .gentill-mob-contact,
body.gentill-v11 .btn-driver-header {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}
body.gentill-v11 .gentill-mob-header .btn-driver-header {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  font-size: clamp(12px, .82vw, 13px) !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

@media (max-width: 720px) {
  body.gentill-v11 .gentill-mob-nav > nav,
  body.gentill-v11 .gentill-mob-nav > .gentill-mob-contact {
    display: none !important;
  }
  body.gentill-v11 .gentill-mob-nav-menu {
    display: block !important;
    position: relative !important;
    z-index: 10020 !important;
    margin-left: auto !important;
    pointer-events: auto !important;
    isolation: isolate !important;
  }
  body.gentill-v11 .gentill-mob-nav-menu summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    height: 44px !important;
    min-width: 112px !important;
    padding: 0 14px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    z-index: 10021 !important;
  }
  body.gentill-v11 .gentill-mob-nav-menu:not([open]) .gentill-mob-nav-menu-panel {
    display: none !important;
  }
  body.gentill-v11 .gentill-mob-nav-menu[open] .gentill-mob-nav-menu-panel {
    display: grid !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 74px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 92px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 10019 !important;
    padding: 12px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(6,13,24,.96)),
      rgba(6,13,24,.98) !important;
    box-shadow: 0 28px 78px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(24px) saturate(1.16) !important;
    animation: gentill-v11-menu-open 220ms var(--gentill-v11-ease) both !important;
  }
  body.gentill-v11 .gentill-mob-nav-menu-panel nav {
    display: grid !important;
    gap: 7px !important;
    width: 100% !important;
  }
  body.gentill-v11 .gentill-mob-nav-menu-panel nav a,
  body.gentill-v11 .gentill-mob-nav-menu-panel .gentill-mob-contact,
  body.gentill-v11 .gentill-mob-nav-menu-panel .btn-driver-header {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
  }
  body.gentill-v11.gentill-mobile-menu-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(0,0,0,.18);
    pointer-events: none;
  }
  body.gentill-v11 #gentill-road-v11-canvas { opacity: .96; }
  body.gentill-v11 .gentill-road-v11-glow { width: 110vw; height: 110vw; filter: blur(44px); opacity: .72; }
}

@keyframes gentill-v11-menu-open {
  from { opacity: 0; transform: translate3d(0, -10px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #gentill-road-v11-canvas,
  .gentill-road-v11-glow { display: none !important; }
  body.gentill-v11 .gentill-mob-section,
  body.gentill-v11 .gentill-mob-hero { background: rgba(4, 9, 20, .90) !important; }
}