/* ============================================================
   Deliberate fixes on top of the converted Framer stylesheet.
   These intentionally override the base rules above them.
   ============================================================ */

/* ---- Fix 1: unified scroll-reveal animation ----
   Framer originally set inline opacity/transform "appear" styles
   per element with inconsistent easing/duration. Those inline
   styles were stripped during conversion and replaced with a
   single [data-reveal] hook (see /js/main.js). This is the one
   shared visual treatment applied to every section/card that used
   to animate in on scroll. */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Fix 2: consistent content max-width ----
   The header/nav inner container (.framer-15h4xx9) used
   max-width:1040px while every other section content wrapper
   (Hero, Benefícios, Serviços, Funcionamento, FAQ, etc.) uses
   max-width:1100px. Normalized the outlier to 1100px so content
   doesn't shift width between the header and the sections below it. */
.framer-ttAIx .framer-15h4xx9 {
  max-width: 1100px !important;
}

/* ---- Fix 3: reduce oversized cards ----
   NOTE: the live site has no separate "depoimentos/testimonials"
   section on the homepage (verified against the fetched HTML) —
   see final report. The largest, most oversized cards on the page
   are the 9-card "Nossos Serviços" grid, fixed at height:400px with
   32px padding on desktop (260px/16px on tablet). Reduced desktop
   sizing so more cards read comfortably without feeling cramped. */
.framer-Lxbpc .framer-1qcwf0t,
.framer-Lxbpc .framer-syb30v,
.framer-Lxbpc .framer-4k5d0l,
.framer-Lxbpc .framer-xxvl3d,
.framer-Lxbpc .framer-pqdkl9,
.framer-Lxbpc .framer-1cwn1ho,
.framer-Lxbpc .framer-1d4rzi6,
.framer-Lxbpc .framer-1j5ab8s,
.framer-Lxbpc .framer-1hnv8no {
  height: 300px !important;
  padding: 24px !important;
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-Lxbpc .framer-1qcwf0t,
  .framer-Lxbpc .framer-syb30v,
  .framer-Lxbpc .framer-4k5d0l,
  .framer-Lxbpc .framer-xxvl3d,
  .framer-Lxbpc .framer-pqdkl9,
  .framer-Lxbpc .framer-1cwn1ho,
  .framer-Lxbpc .framer-1d4rzi6,
  .framer-Lxbpc .framer-1j5ab8s,
  .framer-Lxbpc .framer-1hnv8no {
    height: 220px !important;
    padding: 14px !important;
  }
}
.framer-Lxbpc .framer-1adnkzs,
.framer-Lxbpc .framer-136hyuv,
.framer-Lxbpc .framer-1rvf3pb,
.framer-Lxbpc .framer-lx779g,
.framer-Lxbpc .framer-o655hk,
.framer-Lxbpc .framer-fvmtj1,
.framer-Lxbpc .framer-1liak70,
.framer-Lxbpc .framer-1tt3btg,
.framer-Lxbpc .framer-r2qxtp {
  width: 56px !important;
  height: 56px !important;
}

/* ---- Fix: FAQ question/answer text too small ----
   The converted markup carried Framer's raw inline --framer-font-size
   (12px) for both the accordion question and answer text, which reads
   far too small next to the rest of the site's type scale. Bump it up
   to a comfortable, readable size consistent with other section body
   copy (~16-20px range used elsewhere on the page). */
.framer-9rqx29 h5.framer-text {
  --framer-font-size: 19px !important;
  font-size: 19px !important;
}
.framer-svww9p p.framer-text {
  --framer-font-size: 16px !important;
  font-size: 16px !important;
  line-height: 1.6em !important;
}

/* ---- Fix: "Nossos Serviços" card description paragraph overflow ----
   The card description box (.framer-gx78t3) kept Framer's original
   fixed desktop width:260px, while the title box above it
   (.framer-nkq4tm) is width:100%. After the card-size reduction above,
   the cards' inner content width shrank below 260px, so the paragraph
   box now overflows past the card's right/left padding and no longer
   lines up with the title/button edges. Force it to fill the card
   width like the title does, at every breakpoint. */
.framer-Lxbpc .framer-gx78t3 {
  width: 100% !important;
  text-align: left !important;
}

/* ---- FAQ accordion (vanilla JS) ---- */
.framer-xuckp6 {
  cursor: pointer;
}
/* Question 1 was scraped in its closed state, which baked in a fixed
   height:40px/padding:0 for that variant. Questions 2/3 were scraped
   open and use the base min-content/padding:8px sizing instead, so
   Question 1's card came out visibly smaller than the other two once
   all three are collapsed. Force it onto the same sizing rule. */
.framer-v-1cd0dvt.framer-13xsmzk {
  height: min-content !important;
  padding: 8px !important;
}
.framer-11b3dwt {
  overflow: hidden;
  max-height: 0;
  opacity: 0 !important;
  transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
}
.framer-13xsmzk.faq-open .framer-11b3dwt {
  max-height: 600px;
  opacity: 1 !important;
}
.framer-13xsmzk .framer-1224rjv,
.framer-13xsmzk .framer-19448kc {
  transition: transform 0.3s ease;
}
/* Closed = "+" (one bar vertical, one rotated -90deg to horizontal,
   overlapping). Open = "-" (rotate the vertical bar to -90deg too, so
   both overlap into a single horizontal line instead of a plus). */
.framer-13xsmzk.faq-open .framer-1224rjv,
.framer-13xsmzk.faq-open .framer-19448kc {
  transform: rotate(-90deg) !important;
}

/* ---- Mobile menu (vanilla JS reimplementation) ---- */
.mobile-nav-drawer {
  display: none;
  flex-direction: column;
  gap: 0;
  width: 100%;
  background-color: var(--token-58e2ba0f-75bd-4b3e-bd84-094e7052289c, #011a22);
  padding: 8px 24px 24px;
}
.mobile-nav-drawer.is-open {
  display: flex;
}
.mobile-nav-drawer a {
  color: #f5ede4;
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 16px;
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(245, 237, 228, 0.12);
}
.mobile-nav-drawer a.mobile-nav-cta {
  margin-top: 12px;
  border: none;
  text-align: center;
  border-radius: 8px;
  padding: 12px 0;
  background-color: var(--token-5cc854d3-32db-487c-aaac-313cc7fae22e, #4166f5);
}
.framer-1tyrsim.menu-open .framer-1omcypp {
  transform: translateY(3px) rotate(45deg);
}
.framer-1tyrsim.menu-open .framer-1lzq393 {
  transform: translateY(-3px) rotate(-45deg);
}

/* ---- Fix 4: footer content too dim + spread edge-to-edge on wide
   screens ----
   The scraped footer had its text/icons/logo baked at a very low
   opacity (0.3, and the logo PNG itself was authored at ~30% white
   alpha), which read as "apagado". It also lost its content
   max-width: the dark background bar is meant to bleed full width,
   but the logo/address block and the social-links block inside it
   used width:100% with no cap, so on wide screens they end up pinned
   to the far left/right edges instead of sitting in a centered
   column like the rest of the page's sections. */
.framer-7hcawl,
.framer-1yfgds9,
.framer-lcv630 {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.framer-14d7u0c,
.framer-v4n0h6,
.framer-eiubc5,
.framer-ggpaa0 {
  opacity: 0.85 !important;
}
.framer-1yfgds9 {
  opacity: 0.25 !important;
}
.framer-vast8g,
.framer-63oka1 {
  fill: rgb(245, 237, 228) !important;
  color: rgb(245, 237, 228) !important;
  opacity: 0.85;
}

/* ---- Fix 5: /formulario header + footer boxed on wide screens ----
   The container wrapping the header and footer on this page
   (.framer-pntzpg-container / .framer-1eifih9-container) was fixed
   at width:1200px on desktop instead of width:100% (it only becomes
   100% at the tablet/mobile breakpoints). On the home page the
   equivalent wrapper is width:100% at every breakpoint, so its dark
   header/footer bars always bleed edge-to-edge; here they stayed
   pinned to a centered 1200px box, leaving visible page-background
   margins on both sides on screens wider than 1200px. */
.framer-08kKj .framer-pntzpg-container,
.framer-08kKj .framer-1eifih9-container {
  width: 100% !important;
}
/* Same bug on the light content section that holds the form card:
   fixed at width:1200px/height:800px on desktop, so it floated as a
   small centered box instead of filling the section, and the fixed
   height left little vertical breathing room (page felt short and
   the footer sat right up against the form). Let it fill the width
   and grow taller instead of clipping at a fixed height. */
.framer-08kKj .framer-fzg4s0 {
  width: 100% !important;
  height: auto !important;
  min-height: 1000px;
  overflow: visible !important;
}

/* ---- Lead form submit feedback (vanilla JS) ---- */
.framer-ecnqqr button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.form-status {
  margin: 0;
  font-size: 13px;
  line-height: 1.4em;
  color: rgba(1, 26, 34, 0.7);
}
.form-status.is-error {
  color: #d3402f;
}

/* ---- Success modal (replaces the /obrigado page) ---- */
.success-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(1, 26, 34, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.success-modal-overlay[hidden] {
  display: none;
}
.success-modal {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(180deg, #fff 0%, #f5ede4 100%);
  border-radius: 16px;
  padding: 40px 32px 32px;
  text-align: center;
  box-shadow: 2px 2px 30px rgba(1, 26, 34, 0.25);
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
}
.success-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: rgba(1, 26, 34, 0.5);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.success-modal__close:hover {
  background: rgba(1, 26, 34, 0.08);
}
.success-modal__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #e8f6ee;
  color: #1f9d55;
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-modal h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: rgb(1, 26, 34);
}
.success-modal p {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5em;
  color: rgba(1, 26, 34, 0.7);
}
.success-modal__ok {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 12px 0;
  background-color: var(--token-5cc854d3-32db-487c-aaac-313cc7fae22e, #4166f5);
  color: #fff;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.success-modal__ok:hover {
  opacity: 0.92;
}