/* Cross-browser and responsive compatibility layer for the static build. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }

a:focus-visible, button:focus-visible {
  outline: 3px solid #ef4423;
  outline-offset: 3px;
}

.mobile-menu-button,
.mobile-menu-panel { display: none; }

@media (max-width: 63.999rem) {
  header > div {
    gap: .75rem;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
  }

  header img { height: 2.25rem !important; }
  header > div > a[href="#contato"] { display: none; }

  .mobile-menu-button {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: .5rem;
    background: rgba(22,22,25,.82);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .mobile-menu-button::before {
    content: "";
    width: 21px;
    height: 14px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    box-shadow: inset 0 5px transparent, inset 0 7px currentColor;
  }

  .mobile-menu-button[aria-expanded="true"]::before {
    width: 20px;
    height: 20px;
    border: 0;
    box-shadow: none;
    background: linear-gradient(45deg, transparent 46%, currentColor 47% 53%, transparent 54%), linear-gradient(-45deg, transparent 46%, currentColor 47% 53%, transparent 54%);
  }

  .mobile-menu-panel {
    position: absolute;
    top: calc(100% - .25rem);
    left: max(1rem, env(safe-area-inset-left));
    right: max(1rem, env(safe-area-inset-right));
    padding: .5rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: .75rem;
    background: rgba(22,22,25,.97);
    box-shadow: 0 18px 50px rgba(0,0,0,.3);
  }

  .mobile-menu-panel.is-open { display: grid; }
  .mobile-menu-panel a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: .65rem .85rem;
    border-radius: .4rem;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
  }
  .mobile-menu-panel a:hover,
  .mobile-menu-panel a:focus-visible { background: rgba(255,255,255,.09); }
  .mobile-menu-panel a:last-child { background: #e84425; margin-top: .25rem; }

  #inicio > div.relative { padding-top: 8.5rem; padding-bottom: 8rem; }
}

@media (max-width: 39.999rem) {
  #inicio h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  #inicio p { max-width: 90%; }
  #inicio .flex.flex-wrap > a { width: 100%; justify-content: center; min-height: 48px; }
  section { scroll-margin-top: 5rem; }
  .grid.grid-cols-2 { grid-template-columns: 1fr; }
}

@media (max-width: 23rem) {
  header > div { padding-inline: .75rem; }
  header span { padding-inline: .5rem !important; }
  #inicio > div.relative, section > div { padding-left: 1rem; padding-right: 1rem; }
}

@media (hover: none) {
  a, button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .mobile-menu-button, .mobile-menu-panel { border: 1px solid ButtonText; }
}

/* Visual refinement based on the approved reference composition. */
header .logo-wrap img { height: 3.65rem !important; }

#inicio > img { object-position: center 56%; }
#inicio > div.relative { min-height: 43rem; display: flex; flex-direction: column; justify-content: center; }
#inicio h1 { text-shadow: 0 2px 18px rgba(0,0,0,.22); }

#segmentos .grid > div {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 20px rgba(0,0,0,.16);
  font-size: .95rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
#segmentos .grid > div:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
#segmentos .grid > div:nth-child(1) { color: #145bb1; }
#segmentos .grid > div:nth-child(2) { color: #d91d25; }
#segmentos .grid > div:nth-child(3) { color: #168545; }
#segmentos .grid > div:nth-child(4) { color: #7c217d; }
#segmentos .grid > div:nth-child(5) { color: #e55a16; font-style: italic; }
#segmentos .grid > div:nth-child(6) { color: #252525; font-size: .72rem; }
#segmentos .brand-logo {
  display: block;
  width: auto;
  max-width: 88%;
  max-height: 3.25rem;
  object-fit: contain;
}
#segmentos .brand-shell { max-height: 3.6rem; }
#segmentos .brand-petrobras { max-width: 92%; }
#segmentos .brand-raizen { max-height: 2.85rem; }
#segmentos .brand-ampm { max-height: 3.2rem; }

#servicos article,
#trabalhos article {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#servicos article:hover,
#trabalhos article:hover { transform: translateY(-4px); border-color: rgba(216,31,37,.35); box-shadow: 0 14px 35px rgba(0,0,0,.09); }

#contato {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(115deg, #bc1017 0%, #e21d25 55%, #bd0e16 100%);
}
#contato::before,
#contato::after {
  content: "";
  position: absolute;
  z-index: -1;
  transform: rotate(24deg);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}
#contato::before { width: 28rem; height: 28rem; right: -6rem; top: -15rem; }
#contato::after { width: 18rem; height: 18rem; right: 18rem; bottom: -14rem; }
#contato > div { grid-template-columns: minmax(0,1.25fr) minmax(20rem,.75fr); }
#contato .contact-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; }
#contato .contact-actions > a { min-width: 18rem; justify-content: center; background: rgba(118,0,7,.14); }
.qr-code {
  width: 6.5rem;
  height: 6.5rem;
  padding: .4rem;
  background: #fff;
  border-radius: .3rem;
  object-fit: contain;
  box-shadow: 0 8px 24px rgba(65,0,0,.25);
}

footer { position: relative; }
footer .logo-wrap img { height: 4.5rem !important; }
footer > div:first-child { grid-template-columns: 1.2fr .8fr 1fr 1.2fr auto; }
.footer-qr-block { text-align: center; }
.footer-qr-block .qr-code { width: 5.5rem; height: 5.5rem; }
.footer-qr-label { margin-top: .45rem; font-size: .62rem; color: rgba(255,255,255,.55); }

@media (max-width: 63.999rem) {
  header .logo-wrap img { height: 2.75rem !important; }
  #inicio > div.relative { min-height: 40rem; }
  #contato > div { grid-template-columns: 1fr; }
  #contato .contact-actions { justify-content: flex-start; }
  footer > div:first-child { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 39.999rem) {
  #inicio > div.relative { min-height: 38rem; }
  #contato .contact-actions { flex-direction: column; align-items: stretch; }
  #contato .contact-actions > a { min-width: 0; width: 100%; }
  #contato .qr-code { align-self: center; }
  footer > div:first-child { grid-template-columns: 1fr; }
}