/*
 * PARATECH — PATCH MOBILE / MENU / MODO ESCURO
 * Versão: 1.1.0
 * Carregar DEPOIS de assets/css/style.css
 */

:root {
  color-scheme: only light;
  --mobile-viewport-height: 100dvh;
}

html {
  background: #ffffff;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow-x: clip;
  color: var(--text, #16242c);
  background: var(--white, #ffffff);
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* Evita estouro horizontal em grids, flexboxes e textos longos. */
.header-inner,
.hero-layout,
.intro-layout,
.management-layout,
.segments-heading,
.process-layout,
.why-layout,
.faq-layout,
.contact-layout,
.footer-main,
.footer-bottom,
.main-nav,
main,
section,
article,
form {
  min-width: 0;
}

h1,
h2,
h3,
p,
a,
span,
strong,
label {
  overflow-wrap: break-word;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

/*
 * Bloqueia a recoloração automática de navegadores quando o celular
 * está em modo escuro. O site continua usando a identidade visual original.
 */
input,
select,
textarea,
button {
  color-scheme: light;
}

.field input,
.field select,
.field textarea {
  color: var(--text, #16242c);
  background-color: #f8fafb;
  border-color: #dbe4e7;
  caret-color: var(--blue, #0d526f);
}

.field select option {
  color: #16242c;
  background: #ffffff;
}

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill {
  -webkit-text-fill-color: #16242c;
  box-shadow: 0 0 0 1000px #f8fafb inset;
  transition: background-color 9999s ease-out 0s;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: only light;
  }

  html,
  body {
    color: #16242c !important;
    background-color: #ffffff !important;
  }

  .section-soft {
    color: #16242c;
    background-color: #f4f7f8 !important;
  }

  .section-dark,
  .hero,
  .contact,
  .site-footer {
    color: #ffffff;
    background-color: #07151f !important;
  }

  .form-panel,
  .service-card,
  .segment-card {
    color: #16242c;
    background-color: #ffffff !important;
  }

  .field input,
  .field select,
  .field textarea {
    color: #16242c !important;
    background-color: #f8fafb !important;
    border-color: #dbe4e7 !important;
  }

  .field input::placeholder,
  .field textarea::placeholder {
    color: #9aa8ae !important;
    opacity: 1;
  }
}

/* =========================================================
   MENU MOBILE
   ========================================================= */

@media (max-width: 820px) {
  html.menu-open,
  body.menu-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.menu-open {
    touch-action: none;
  }

  /*
   * O backdrop-filter no header criava um novo contexto para o menu fixed
   * em alguns navegadores móveis. Isso fazia o menu ficar preso à altura
   * do cabeçalho quando a página já estava rolada.
   */
  .site-header,
  .site-header.scrolled {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .site-header {
    isolation: isolate;
  }

  .site-header.scrolled,
  body.menu-open .site-header {
    background: #07151f !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .22);
  }

  .header-inner {
    position: relative;
    z-index: 1003;
  }

  .brand,
  .nav-toggle {
    position: relative;
    z-index: 1005;
  }

  .nav-toggle {
    flex: 0 0 46px;
    touch-action: manipulation;
  }

  .main-nav {
    position: fixed !important;
    z-index: 1002 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: var(--mobile-viewport-height, 100dvh) !important;
    min-height: 100svh;
    max-height: var(--mobile-viewport-height, 100dvh) !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding:
      calc(var(--header, 76px) + 28px + env(safe-area-inset-top))
      max(24px, calc(20px + env(safe-area-inset-right)))
      calc(34px + env(safe-area-inset-bottom))
      max(24px, calc(20px + env(safe-area-inset-left))) !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    color: #ffffff !important;
    background: #07151f !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -12px, 0);
    transition:
      opacity .25s ease,
      visibility .25s ease,
      transform .3s var(--ease, cubic-bezier(.22, 1, .36, 1));
  }

  .main-nav.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) !important;
  }

  .main-nav > a:not(.nav-cta) {
    flex: 0 0 auto;
    width: 100%;
    padding: 16px 4px !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
    font-size: clamp(17px, 4.7vw, 21px) !important;
    line-height: 1.35;
  }

  .main-nav .nav-cta {
    flex: 0 0 auto;
    width: 100%;
    min-height: 56px;
    margin-top: 30px !important;
    padding: 15px 20px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #07151f !important;
    background: #ffffff !important;
    border: 1px solid #ffffff;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
  }

  body.menu-open .whatsapp-float {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .whatsapp-float {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }
}

/* Celulares baixos ou em modo paisagem: menu continua rolável. */
@media (max-width: 820px) and (max-height: 650px) {
  .main-nav {
    padding-top: calc(var(--header, 76px) + 12px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  .main-nav > a:not(.nav-cta) {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    font-size: 16px !important;
  }

  .main-nav .nav-cta {
    min-height: 48px;
    margin-top: 18px !important;
  }
}

/* Ajustes de tipografia e espaçamento em telas pequenas. */
@media (max-width: 560px) {
  .hero h1 {
    max-width: 100%;
    font-size: clamp(38px, 11.4vw, 48px) !important;
    line-height: 1.06;
    text-wrap: balance;
  }

  .section-heading h2,
  .management-content h2,
  .segments h2,
  .process-copy h2,
  .why-heading h2,
  .faq-heading h2,
  .contact-copy h2 {
    max-width: 100%;
    font-size: clamp(32px, 9.5vw, 40px) !important;
    line-height: 1.08;
    text-wrap: balance;
  }

  .hero-copy > p,
  .section-heading > p,
  .segments-heading > p {
    max-width: 100%;
  }

  .button,
  .submit-button,
  .footer-button {
    max-width: 100%;
  }

  .form-panel,
  .service-card,
  .segment-card,
  .process-visual {
    border-radius: min(24px, 6vw);
  }
}