/* ============================================================ Responsive behavior that used to be computed by Framer's JS runtime at hydration time (framer.*.mjs / shared-lib.*.mjs), now that the runtime has been removed. THE AUTHORITATIVE BREAKPOINT MAP — found in index.html on #main's `data-framer-hydrate-v2` JSON attribute (Framer embeds this itself; it's not something we guessed): tigau5 -> (max-width: 809.98px) "phone" 30ycpe -> (min-width: 810px) and (max-width: 1279.98px) "tablet" pt40rh -> (min-width: 1280px) and (max-width: 1919.98px)"desktop" 72rtr7 -> (min-width: 1920px) "wide" (72rtr7 never appears as a hidden-* class in the static HTML we kept — it's only used by Framer's client-only-rendered markup, which we intentionally didn't carry over — so no rule for it is needed below.) 1) Element visibility (the "hidden-*" system). Framer ships some components as multiple ssr-variant copies, each tagged with the token(s) of the breakpoint(s) where it should be HIDDEN. The vast majority of elements carry all three tokens at once (hidden-tigau5 + hidden-pt40rh + hidden-30ycpe together — meaning "same content at every width") and need zero CSS: a bare `.hidden-x` class has no effect unless we give it one, so those elements are simply visible everywhere, which is correct. Only the elements carrying a strict SUBSET of the three tokens are genuinely breakpoint-specific (the desktop-only nav + "CONHECER ESPECIALIDADES" link use this pattern) — the :not() clauses below make sure these narrower rules never accidentally catch the "always visible" majority. 2) Responsive text scale. Separately from visibility, Framer's compiled CSS multiplies every RichText font-size by `var(--framer-font-size-scale, 1)` (see the `.framer-text` rule in index.html's ) — but the *value* of that variable is normally set by JS per-breakpoint, and nothing in the static export sets it. Confirmed via production DevTools: it's 1 at >=1920px and 0.8 specifically within the 1280-1919.98 ("pt40rh") range, and does NOT apply to CTA buttons/links or the CRM badge line (those aren't RichText "Auto"-sized components in Framer's design). If phone/tablet ever turn out to need their own scale value too, add more media-query blocks the same way. ============================================================ */ /* ---- 1) hidden-* visibility, generic rule for every element using this pattern ---- A handful of elements are tagged desktop-only (hidden-tigau5 hidden-30ycpe) in the static export, but production actually shows them at every width — their real phone/tablet copies are 100% client-rendered and never existed in static HTML (same root cause as the nav needing .site-nav below). Rather than hide these, the desktop-tagged copy is reused at every width. Found so far (search the static markup for `ssr-variant hidden-tigau5 hidden-30ycpe` if more turn up): .framer-bdigz9 / .framer-13l2ep7 — CRM-PE badge / subtitle .framer-yx25b5 — "AGENDE PELO WHATSAPP" button label .framer-1v4mhv8 — "AGENDAR CONSULTA" (footer CTA) button label */ @media (max-width:1279.98px){ .hidden-tigau5.hidden-30ycpe:not(.hidden-pt40rh):not(:has(.framer-bdigz9)):not(:has(.framer-13l2ep7)):not(:has(.framer-yx25b5)):not(:has(.framer-1v4mhv8)), .hidden-tigau5:not(.hidden-30ycpe):not(.hidden-pt40rh){ display:none !important; } } @media (min-width:1280px) and (max-width:1919.98px){ .hidden-pt40rh:not(.hidden-tigau5):not(.hidden-30ycpe):not(.framer-6zute):not(.framer-6zute *){ display:none !important; } } /* ---- 2) Responsive text scale (see explanation above) ---- The 0.8 value at 1280-1919.98px was confirmed precisely via production DevTools. The phone-width value below (max-width: 809.98px) was NOT DevTools-verified the same way — it's an estimate from a side-by-side screenshot comparison (production showed roughly half the local version's text height at phone width). Revisit with a precise DevTools reading if this needs to be exact; it was explicitly OK'd as an estimate for now. */ @media (min-width:1280px) and (max-width:1919.98px){ #main{ --framer-font-size-scale:0.8; } #main a .framer-text, #main a.framer-text, #main .framer-bdigz9 .framer-text, #main .framer-13l2ep7 .framer-text{ --framer-font-size-scale:1; } } @media (max-width:809.98px){ #main{ --framer-font-size-scale:0.8; } .framer-q2orr8{ --framer-font-size-scale:0.65; } #main a .framer-text, #main a.framer-text, #main .framer-bdigz9 .framer-text, #main .framer-13l2ep7 .framer-text{ --framer-font-size-scale:1; } } /* ---- Mobile/tablet nav: hide Framer's desktop-only topbar, show ours ---- !important is required: the head's own compiled CSS targets this element via a higher-specificity compound selector (.framer-k9o1Y .framer-6zute{display:flex...}), which would otherwise win over a plain .framer-6zute rule regardless of source order. (.framer-6zute already carries hidden-tigau5 + hidden-30ycpe, so rule 1 above hides it below 1280px on its own — this !important rule exists only to guarantee it, independent of class-list changes.) */ .framer-6zute{ display:none !important; } @media (min-width:1280px){ .framer-6zute{ display:flex !important; } } .site-nav{ display:none; } @media (max-width:1279.98px){ .site-nav{ display:flex; position:sticky; top:0; z-index:100; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:16px 24px; background:#fff; box-sizing:border-box; border-bottom:1px solid rgb(212,206,199); } .site-nav-logo{ display:flex; align-items:center; height:32px; } .site-nav-logo svg{ height:100%; width:auto; fill:rgba(0,0,0,1); } .site-nav-toggle{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:none; background:none; cursor:pointer; flex-shrink:0; } .site-nav-toggle svg{ width:24px; height:24px; } .site-nav-toggle .icon-close{ display:none; } .site-nav.is-open .site-nav-toggle .icon-menu{ display:none; } .site-nav.is-open .site-nav-toggle .icon-close{ display:block; } .site-nav-panel{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:#fff; border-bottom:1px solid rgb(212,206,199); box-shadow:0 8px 24px rgba(0,0,0,0.08); } .site-nav.is-open .site-nav-panel{ display:flex; } .site-nav-panel a{ padding:16px 24px; font-family:"Open Sans","Open Sans Placeholder",sans-serif; font-size:16px; color:rgb(85,55,53); text-decoration:none; border-top:1px solid rgb(230,225,219); } .site-nav-panel a.site-nav-cta{ color:#fff; background:#1f8a1f; margin:16px 24px; border-top:none; border-radius:999px; text-align:center; font-weight:600; } } /* ---- FAQ accordion ---- */ .faq-list{ display:flex; flex-direction:column; width:100%; } .faq-item{ border-top:1px solid rgb(212,206,199); width:100%; } .faq-question{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:24px 0; background:none; border:none; cursor:pointer; text-align:left; font:inherit; } .faq-question-text{ font-family:"Fraunces","Fraunces Placeholder",serif; font-size:20px; color:rgb(85,55,53); } .faq-caret{ flex-shrink:0; fill:rgb(0,0,0); transform:rotate(-180deg); transition:transform 0.2s ease; } .faq-question[aria-expanded="true"] .faq-caret{ transform:rotate(0deg); } .faq-answer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.25s ease; } .faq-answer > p{ overflow:hidden; min-height:0; margin:0; padding-right:40px; font-family:"Open Sans","Open Sans Placeholder",sans-serif; font-size:16px; line-height:1.5; color:rgb(107,67,61); } .faq-question[aria-expanded="true"] + .faq-answer{ grid-template-rows:1fr; } .faq-question[aria-expanded="true"] + .faq-answer > p{ padding-bottom:24px; }