/* =============================================================================================
   VeryClinic — restore layer.

   Everything here replaces something the archive could not give us. Three sheets survived (the
   1.1 MB parlour+Elementor+QuadMenu bundle, the homepage's own Elementor sheet and the QuadMenu
   locations sheet); the other 41 the pages <link> — the Elementor global kit, the header and
   footer templates and one per-page sheet for every page — were never captured, and neither was
   any JavaScript. This file supplies what those files used to, in the site's own idiom:
   Cormorant Garamond display, Montserrat text, #5B3999 purple on white and #f7f7f7 bands.

   Loaded LAST so it can override the vendor bundle; !important is used only where the vendor
   rule it fights is itself !important or is a JS-state rule (.quadmenu-* display:none) that can
   never be satisfied now that the plugin's script is gone.
   ============================================================================================= */

:root {
  --vc-purple: #5b3999;
  --vc-purple-d: #472c78;
  --vc-ink: #221e2d;
  --vc-body: #54595f;
  --vc-mut: #7a7488;
  --vc-line: #e8e4f0;
  --vc-band: #f7f7f7;
  --vc-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --vc-sans: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------------------------
   1. THE ENTRANCE ANIMATIONS NEVER RAN.
   Elementor marks every animated widget `elementor-invisible` (visibility:hidden) and its
   frontend script removes the class on scroll. That script — autoptimize_8ce31e68… — was never
   archived, so on the built site 639 widgets across the 64 pages stayed invisible: /mesoterapia/
   rendered as 1300px of white space with a footer under it. Nothing here animates; the content
   is simply visible, which is what a visitor needs.
   --------------------------------------------------------------------------------------------- */
.elementor-invisible { visibility: visible !important; }

/* ---------------------------------------------------------------------------------------------
   2. ICONS. Font Awesome's webfonts have no 200 capture on this domain, so every <i class="fas">
   would have rendered as a tofu box. The five icons the site actually uses (phone, map marker,
   envelope, facebook, instagram) are inlined as SVG by vc_12_ui.py; this stops the vendor rule
   from also trying to draw a glyph in a font that is not there.
   --------------------------------------------------------------------------------------------- */
i.fas::before, i.fab::before, i.far::before,
.dashicons::before, .dashicons-before::before { content: none !important; }
i.fas, i.fab, i.far, .vc-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 1em; font-style: normal;
}
i.fas > svg, i.fab > svg, i.far > svg, .vc-ico > svg {
  width: 1em; height: 1em; fill: currentColor; display: block;
}
.elementor-social-icon > svg { width: 1em; height: 1em; fill: currentColor; }

/* ---------------------------------------------------------------------------------------------
   3. HEADER. The theme emits BOTH payloads — .tm-header-mobile (uk-hidden@m) and
   .tm-header (uk-visible@m) — and UIkit's breakpoint rules for those two classes survived in the
   bundle, so the desktop/mobile switch still works. What did not survive is UIkit's sticky
   script; position:sticky does the same job with no JavaScript at all.
   --------------------------------------------------------------------------------------------- */
.tm-header-wrapper { position: relative; z-index: 1200; }
.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container {
  position: sticky; top: 0; background: #fff; border-bottom: 1px solid var(--vc-line);
  box-shadow: 0 2px 14px rgba(34, 30, 45, .05);
}
.tm-header .uk-container {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
}
.tm-header nav.uk-navbar,
.tm-header-mobile nav.uk-navbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 78px;
}
.uk-navbar-left, .uk-navbar-right { display: flex; align-items: center; gap: 16px; }
.uk-logo img, .tm-logo-img img { display: block; height: auto; max-width: 200px; }
.tm-header-mobile .uk-logo img { max-width: 150px; }

/* ---------------------------------------------------------------------------------------------
   4. THE NAVIGATION. QuadMenu is a JavaScript menu: its stylesheet only lays the bar out once
   the plugin has added `quadmenu-is-horizontal` to the <nav> and toggles `.open` on an item.
   Without the script the whole bar computed to 0×0 — the built homepage had a logo, a button and
   no menu at all. Rather than fake the plugin's state machine, the bar is laid out here and the
   panels open on hover AND on keyboard focus, so it works without a pointer too.
   --------------------------------------------------------------------------------------------- */
#quadmenu, #quadmenu * { box-sizing: border-box; }
/* The vendor gives #quadmenu a white background and a pair of `display:table` clearfix
   pseudo-elements. With the plugin's own layout rules inert those pseudo-elements added 15px of
   height, so a white rectangle hung 8px below the header on every page. */
#quadmenu { background: transparent !important; }
#quadmenu::before, #quadmenu::after,
#quadmenu .quadmenu-container::before, #quadmenu .quadmenu-container::after,
#quadmenu .quadmenu-navbar-collapse::before, #quadmenu .quadmenu-navbar-collapse::after,
#quadmenu .quadmenu-navbar-header::before, #quadmenu .quadmenu-navbar-header::after {
  display: none !important; content: none !important;
}
#quadmenu .quadmenu-container { position: static; }
#quadmenu .quadmenu-navbar-collapse {
  display: block !important; visibility: visible !important;
  height: auto !important; max-height: none !important; overflow: visible !important;
  padding: 0 !important;
}
#quadmenu .quadmenu-navbar-nav {
  display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0;
}
#quadmenu .quadmenu-navbar-nav > li {
  display: block !important; overflow: visible !important; position: static; float: none;
}
#quadmenu .quadmenu-navbar-nav > li > a {
  display: flex; align-items: center; height: 78px; padding: 0; text-decoration: none;
  white-space: nowrap;
  font-family: var(--vc-sans); font-size: 12px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--vc-ink); background: none; border: 0;
}
#quadmenu .quadmenu-navbar-nav > li > a:hover,
#quadmenu .quadmenu-navbar-nav > li > a:focus-visible,
#quadmenu .quadmenu-navbar-nav > li.vc-open > a { color: var(--vc-purple); }
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item-has-children > a > .quadmenu-item-content::after {
  content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .7em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-.18em) rotate(45deg);
}
#quadmenu .quadmenu-item-content { display: inline-flex; align-items: center; white-space: nowrap; }
#quadmenu .quadmenu-navbar-nav > li > a .quadmenu-text { white-space: nowrap; }
#quadmenu .quadmenu-caret { display: none; }

/* the panels */
#quadmenu .quadmenu-navbar-nav > li > .quadmenu-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 1300;
  background: #fff; border-top: 1px solid var(--vc-line);
  box-shadow: 0 22px 44px rgba(34, 30, 45, .13);
  padding: 30px clamp(20px, 4vw, 60px) 34px;
}
#quadmenu .quadmenu-navbar-nav > li:hover > .quadmenu-dropdown-menu,
#quadmenu .quadmenu-navbar-nav > li:focus-within > .quadmenu-dropdown-menu,
#quadmenu .quadmenu-navbar-nav > li.vc-open > .quadmenu-dropdown-menu { display: block; }
#quadmenu .quadmenu-dropdown-background { display: none !important; }
/* THE PANEL OPENED BUT WAS EMPTY. Two vendor rules only ever relax for a state the plugin's
   script sets: the panel carries `max-height:0`, and the lists inside it are laid out by
   `…li.quadmenu-item.open > .quadmenu-dropdown-menu > ul {display:block;visibility:visible}`,
   i.e. hidden until an `.open` class that can never arrive. On top of that the row itself is
   `display:flex !important`, which silently beat the grid below. The panel measured 1240x64 —
   its own padding and nothing else. All three are overridden here. */
#quadmenu .quadmenu-dropdown-menu { max-height: none !important; }
#quadmenu .quadmenu-dropdown-menu ul,
#quadmenu .quadmenu-dropdown-menu li {
  display: block !important; visibility: visible !important; opacity: 1 !important;
  max-height: none !important;
}
#quadmenu .quadmenu-dropdown-menu > ul.quadmenu-row {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 32px;
  max-width: 1240px; margin: 0 auto; list-style: none; padding: 0;
}
#quadmenu .quadmenu-dropdown-menu ul { list-style: none; margin: 0; padding: 0; }
#quadmenu .quadmenu-title {
  display: block; font-family: var(--vc-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--vc-purple);
  padding: 0 0 10px; margin: 0 0 8px; border-bottom: 1px solid var(--vc-line);
}
#quadmenu .quadmenu-dropdown-menu li > a {
  display: block; padding: 7px 0; text-decoration: none; color: var(--vc-body);
  font-family: var(--vc-sans); font-size: 13px; line-height: 1.45;
}
#quadmenu .quadmenu-dropdown-menu li > a:hover,
#quadmenu .quadmenu-dropdown-menu li > a:focus-visible {
  color: var(--vc-purple); text-decoration: underline;
}
#quadmenu .quadmenu-item-widget img { max-width: 66px; height: auto; opacity: .55; }
/* the language item is a short list, not a 4-column mega panel */
#quadmenu .quadmenu-navbar-nav > li:not(.quadmenu-item-type-mega) { position: relative; }
#quadmenu .quadmenu-navbar-nav > li:not(.quadmenu-item-type-mega) > .quadmenu-dropdown-menu {
  left: auto; right: 0; min-width: 190px; padding: 12px 18px;
}
/* !important is required, not stylistic: the 4-column grid above carries !important, so without it
   the two short panels (SOBRE NÓS, the PT/EN switcher) were laid out as 4-column grids too and
   their one or two links were squeezed into a ~30px first column. */
#quadmenu .quadmenu-navbar-nav > li:not(.quadmenu-item-type-mega) > .quadmenu-dropdown-menu > ul.quadmenu-row {
  display: block !important;
}

/* the appointment button that sits beside the menu */
.tm-header .elementor-button, .tm-header .uk-button, .vc-nav-cta {
  display: inline-block; padding: 13px 26px; border-radius: 999px;
  background: var(--vc-purple); color: #fff !important; text-decoration: none;
  font-family: var(--vc-sans); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap;
}
.tm-header .elementor-button:hover, .vc-nav-cta:hover { background: var(--vc-purple-d); }

/* ---------------------------------------------------------------------------------------------
   5. THE BURGER. #tm-mobile is a UIkit off-canvas: markup only, opened by UIkit's script, which
   is gone. Left alone the burger was a link to "#tm-mobile" that scrolled nowhere — the exact
   "flattened burger" defect. vc-restore.js toggles .vc-open; the panel itself is styled here.
   --------------------------------------------------------------------------------------------- */
#tm-mobile { display: none; position: fixed; inset: 0; z-index: 2000; }
#tm-mobile.vc-open { display: block; }
#tm-mobile::before {
  content: ""; position: absolute; inset: 0; background: rgba(20, 16, 30, .5);
}
#tm-mobile .uk-offcanvas-bar {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 340px);
  background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 64px 22px 40px; box-shadow: 4px 0 28px rgba(0, 0, 0, .2);
}
.vc-offcanvas-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: var(--vc-band); color: var(--vc-ink); font-size: 22px; line-height: 1; cursor: pointer;
}
.vc-offcanvas-close:hover { background: var(--vc-line); }
body.vc-nav-locked { overflow: hidden; }
.uk-navbar-toggle {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  color: var(--vc-ink); text-decoration: none;
}
.uk-navbar-toggle svg { width: 24px; height: 24px; fill: currentColor; }

/* the menu inside the off-canvas is a vertical accordion */
#tm-mobile #quadmenu .quadmenu-navbar-nav { display: block; }
#tm-mobile #quadmenu .quadmenu-navbar-nav > li { position: relative; }
#tm-mobile #quadmenu .quadmenu-navbar-nav > li > a {
  padding: 14px 0; border-bottom: 1px solid var(--vc-line); font-size: 13px;
}
#tm-mobile #quadmenu .quadmenu-navbar-nav > li > .quadmenu-dropdown-menu {
  position: static; display: none !important; box-shadow: none; border-top: 0;
  padding: 4px 0 12px 12px;
}
#tm-mobile #quadmenu .quadmenu-navbar-nav > li.vc-open > .quadmenu-dropdown-menu {
  display: block !important;
}
#tm-mobile #quadmenu .quadmenu-navbar-nav > li.vc-open > .quadmenu-dropdown-menu { display: block; }
#tm-mobile #quadmenu .quadmenu-navbar-nav > li:hover > .quadmenu-dropdown-menu,
#tm-mobile #quadmenu .quadmenu-navbar-nav > li:focus-within > .quadmenu-dropdown-menu {
  display: none;
}
#tm-mobile #quadmenu .quadmenu-navbar-nav > li.vc-open:hover > .quadmenu-dropdown-menu,
#tm-mobile #quadmenu .quadmenu-navbar-nav > li.vc-open:focus-within > .quadmenu-dropdown-menu {
  display: block;
}
#tm-mobile #quadmenu .quadmenu-dropdown-menu > ul.quadmenu-row { display: block !important; }
#tm-mobile #quadmenu .quadmenu-title { margin-top: 14px; }
#tm-mobile #quadmenu .quadmenu-item-widget { display: none; }

/* ---------------------------------------------------------------------------------------------
   6. THE HERO. The homepage's Slider Revolution block held ONE slide whose five "layers" were
   absolutely positioned by the plugin's script: a background photo, a decorative overlay, a
   scroll cue, a button and the headline. With the script gone the container computed to 0px
   high and the whole first screen was blank. vc_12_ui.py rewrites that block as a plain hero
   section carrying the same photograph, the same headline and the same call to action.
   --------------------------------------------------------------------------------------------- */
.vc-hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: min(78vh, 620px); padding: 90px 24px; text-align: center;
  background: #d8d3e2 center / cover no-repeat; isolation: isolate; overflow: hidden;
}
.vc-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(30, 22, 48, .42), rgba(30, 22, 48, .30) 55%, rgba(30, 22, 48, .52));
}
.vc-hero-inner { max-width: 760px; }
.vc-hero h1, .vc-hero .vc-hero-title {
  margin: 0 0 28px; color: #fff; font-family: var(--vc-serif); font-weight: 700;
  font-size: clamp(34px, 5.4vw, 63px); line-height: 1.08; letter-spacing: .01em;
  text-shadow: 0 2px 24px rgba(20, 14, 34, .35);
}
.vc-hero .vc-hero-cta {
  display: inline-block; padding: 15px 40px; border: 3px solid #fff; border-radius: 30px;
  color: #fff; text-decoration: none; font-family: var(--vc-sans); font-size: 14px;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.vc-hero .vc-hero-cta:hover, .vc-hero .vc-hero-cta:focus-visible {
  background: #fff; color: var(--vc-purple);
}
.vc-hero-scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: .85;
}
.vc-hero-scroll svg { width: 26px; height: 26px; fill: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .vc-hero-scroll { animation: vc-bob 2.2s ease-in-out infinite; }
  @keyframes vc-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
}

/* ---------------------------------------------------------------------------------------------
   7. CAROUSELS. Elementor's image carousel is Slick: the markup ships every slide as a plain
   sibling <div class="slick-slide">, and the script turns them into a track. Without it all
   three photos stacked on top of each other with no controls — the complaint the client names
   explicitly. vc-restore.js makes each one a real, swipeable, keyboard-reachable slider; this is
   its skin.
   --------------------------------------------------------------------------------------------- */
.vc-carousel { position: relative; }
.vc-carousel .vc-carousel-viewport { overflow: hidden; }
.vc-carousel .vc-carousel-track {
  display: flex; gap: 16px; transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.vc-carousel .slick-slide {
  flex: 0 0 calc((100% - 32px) / 3); min-width: 0; display: block !important; float: none;
}
.vc-carousel .slick-slide figure { margin: 0; }
.vc-carousel .slick-slide img {
  display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 4px;
}
.vc-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .94); color: var(--vc-purple);
  box-shadow: 0 4px 16px rgba(34, 30, 45, .18);
  display: flex; align-items: center; justify-content: center;
}
.vc-carousel-btn:hover { background: #fff; }
.vc-carousel-btn[disabled] { opacity: .35; cursor: default; }
.vc-carousel-btn svg { width: 18px; height: 18px; fill: currentColor; }
.vc-carousel-prev { left: -6px; }
.vc-carousel-next { right: -6px; }
.vc-carousel-dots {
  display: flex; justify-content: center; gap: 0; margin: 18px 0 0; padding: 0; list-style: none;
}
/* The dot is 9px and the pill 26x9, which is the look; the BUTTON is 24px square so a finger has
   something to land on (WCAG 2.5.8). The dot itself is drawn by a pseudo-element, so growing the
   hit area does not grow the dot. gap:0 because the box now carries the 9px of spacing the gap
   used to provide. */
.vc-carousel-dots button {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  background: transparent; position: relative;
}
.vc-carousel-dots button::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%; background: #cfc8dd;
}
.vc-carousel-dots button[aria-current="true"] { background: transparent; width: 41px; }
.vc-carousel-dots button[aria-current="true"]::before {
  background: var(--vc-purple); width: 26px; border-radius: 999px;
}
@media (max-width: 900px) { .vc-carousel .slick-slide { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 640px) { .vc-carousel .slick-slide { flex-basis: 100%; } }

/* ---------------------------------------------------------------------------------------------
   8. THE APPOINTMENT FORM. Forminator renders its form with an inline `style="display:none"` and
   reveals it from JavaScript once the field scripts have loaded. On /marcar-consulta/ that meant
   the page's ENTIRE reason to exist was invisible, and Forminator's own stylesheet was one of the
   41 that were never captured, so even revealed it had no styling at all. Shown and styled here;
   restore_02_build.py already re-pointed the submission at geral@veryclinic.com.
   --------------------------------------------------------------------------------------------- */
.forminator-ui, .forminator-custom-form { display: block !important; }
.forminator-row { margin: 0 0 18px; }
.forminator-label {
  display: block; margin: 0 0 7px; font-family: var(--vc-sans); font-size: 12px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vc-ink);
}
.forminator-required { color: #b3261e; }
.forminator-input, .forminator-select, .forminator-textarea,
.forminator-field input, .forminator-field select, .forminator-field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--vc-line); border-radius: 6px;
  background: #fff; font-family: var(--vc-sans); font-size: 15px; color: var(--vc-ink);
}
.forminator-input:focus, .forminator-select:focus, .forminator-textarea:focus,
.forminator-field input:focus, .forminator-field select:focus, .forminator-field textarea:focus {
  outline: 2px solid var(--vc-purple); outline-offset: 1px; border-color: var(--vc-purple);
}
.forminator-textarea, .forminator-field textarea { min-height: 130px; resize: vertical; }
/* Radios and checkboxes are inputs too, and `width:100%` above stretched each one across the
   whole column and pushed its label onto the next line — the consent question rendered as a
   centred dot above a sentence. They get their natural size and sit beside their text. */
.forminator-field input[type="radio"], .forminator-field input[type="checkbox"],
.forminator-radio input, .forminator-checkbox input {
  width: auto; min-width: 0; margin: 3px 0 0; flex: 0 0 auto;
}
.forminator-radio, .forminator-checkbox, label.forminator-radio, label.forminator-checkbox {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px;
  font-family: var(--vc-sans); font-size: 14px; line-height: 1.5; color: var(--vc-body);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.forminator-radio > span[aria-hidden="true"], .forminator-checkbox > span[aria-hidden="true"] {
  display: none;
}
fieldset.forminator-field { border: 1px solid var(--vc-line); border-radius: 6px; padding: 14px 16px; }
.forminator-button, .forminator-button-submit, button.forminator-button {
  display: inline-block; padding: 15px 38px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--vc-purple); color: #fff; font-family: var(--vc-sans); font-size: 13px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.forminator-button:hover { background: var(--vc-purple-d); }
.forminator-response-message { display: none; }
.vc-form-note {
  margin: 14px 0 0; font-family: var(--vc-sans); font-size: 13px; line-height: 1.6;
  color: var(--vc-mut);
}
.vc-form-note a { color: var(--vc-purple); }

/* ---------------------------------------------------------------------------------------------
   9. GENERIC ELEMENTOR PAGE RHYTHM. Every inner page had its own `elementor-post-<id>.css` with
   the section padding, the column gaps and the type scale the editor set. None of those 32 files
   was captured. These defaults give the same page shape the homepage's surviving sheet uses, so
   an inner page reads as part of the same site instead of as an unstyled stack.
   --------------------------------------------------------------------------------------------- */
body { font-family: var(--vc-sans); color: var(--vc-body); }
.elementor-section > .elementor-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
/* Only the rebuilt hero is full-bleed. `elementor-section-full_width` is on ordinary content
   sections too — including the page-title band — so letting the class alone decide put the
   <h1> of every inner page hard against x=0. */
.elementor-section:has(.vc-hero) > .elementor-container { max-width: none; padding: 0; }
.elementor-top-section { padding: clamp(18px, 2.6vw, 34px) 0; }
.elementor-inner-section { padding: 0; }
/* The page-title band. Each inner page opened with a full-width section holding just the <h1>,
   over a background image set in that page's own Elementor sheet — one of the 32 that were never
   captured. A flat band in the site's own #f7f7f7 keeps the same shape without inventing a photo. */
.elementor-section-wrap > .elementor-top-section:first-child:has(h1) {
  background: var(--vc-band); padding: clamp(26px, 4vw, 54px) 0; margin-bottom: 8px;
}
/* …unless that first section IS the hero, which brings its own photograph */
.elementor-section-wrap > .elementor-top-section:first-child:has(.vc-hero) {
  background: none; padding: 0; margin-bottom: 0;
}
.elementor-container { display: flex; flex-wrap: wrap; gap: 0; }
.elementor-column { display: flex; min-width: 0; }
.elementor-column-wrap { width: 100%; }
/* Elementor's own populated-column padding. Without it the five "Benefícios" columns on the
   treatment pages ran into each other — "Emagrecimento" overlapped "tonifica o corpo". */
.elementor-column-wrap.elementor-element-populated { padding: 10px; }
.elementor-widget-wrap {
  width: 100%; display: flex; flex-direction: column; align-items: stretch;
  justify-content: flex-start; min-width: 0;
}
.elementor-widget { min-width: 0; overflow-wrap: break-word; }
.elementor-widget:not(:last-child) { margin-bottom: 16px; }
/* A section whose only content is Elementor spacers is decoration whose height lived in the
   page's own (never-archived) stylesheet. Left with default padding it opened a 150px hole under
   every inner page's title. */
.elementor-top-section.vc-empty { padding: 0; }
.elementor-top-section.vc-empty .elementor-spacer-inner { height: 12px; }

/* The theme's own heading widget is `.bdt-heading` inside `.bdt-heading-wrapper`, not Elementor's
   `.elementor-heading-title` — that difference is why the first pass styled none of the inner
   page titles. Both selectors are covered. */
.elementor-heading-title, .bdt-heading {
  font-family: var(--vc-serif); color: var(--vc-purple); line-height: 1.12; margin: 0;
  letter-spacing: .01em;
}
h1.elementor-heading-title, h1.bdt-heading { font-size: clamp(30px, 4vw, 46px); }
h2.elementor-heading-title, h2.bdt-heading { font-size: clamp(26px, 3.2vw, 38px); }
h3.elementor-heading-title, h3.bdt-heading { font-size: clamp(20px, 2.2vw, 26px); }
h4.elementor-heading-title, h5.elementor-heading-title {
  font-family: var(--vc-sans); font-size: 15px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vc-ink);
}
.elementor-text-editor, .elementor-widget-text-editor { font-size: 16px; line-height: 1.8; }
.elementor-text-editor p { margin: 0 0 1.1em; }
.elementor-text-editor a { color: var(--vc-purple); }
.elementor-widget-image img { max-width: 100%; height: auto; display: block; }
.elementor-widget-image figure, .elementor-image { margin: 0; }
.elementor-spacer-inner { height: var(--vc-spacer, 22px); }

/* The call-to-action colour is EVIDENCE, not a guess. The one page-level Elementor sheet that
   survived (the homepage's, elementor-post-35) styles its big CTA
   `background-color:#0098af; border-radius:40px; Montserrat 700` and inverts to white-on-teal on
   hover. The 32 inner pages' own sheets were never archived, so their buttons had nothing at all
   and fell back to Elementor's factory grey. Adopting the homepage's own button here is what
   makes the whole site look like one site. */
.elementor-button, .elementor-button-link, .elementor-widget-button .elementor-button {
  display: inline-block; padding: 14px 34px; border-radius: 40px; border: 2px solid #0098af;
  cursor: pointer; background-color: #0098af; color: #fff !important; text-decoration: none;
  font-family: var(--vc-sans); font-size: 15px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; text-align: center; line-height: 1.25;
}
.elementor-button:hover, .elementor-button:focus-visible,
.elementor-widget-button .elementor-button:hover {
  background-color: #fff; color: #0098af !important;
}
.elementor-align-center { text-align: center; }
.elementor-align-center .elementor-button-wrapper { display: flex; justify-content: center; }
.elementor-widget-button .elementor-button-wrapper { display: flex; }
.elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
.elementor-icon-list-item { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.elementor-icon-list-icon { color: var(--vc-purple); }
.elementor-social-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 50%; color: #fff; margin-right: 10px; text-decoration: none;
}
.elementor-social-icon-facebook { background: #3b5998; }
.elementor-social-icon-instagram { background: #262626; }
.elementor-screen-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.elementor-widget-divider .elementor-divider-separator {
  border-top: 1px solid var(--vc-line); display: block;
}

/* the footer band */
footer .elementor-heading-title, .site-footer .elementor-heading-title { font-size: 15px; }

/* ---------------------------------------------------------------------------------------------
   10. PARTNER PLATES. /protocolos/ listed twelve partner organisations as logo images. Those
   files were never archived and we do not draw other companies' trademarks, so vc_12_ui.py
   replaces each <img> with the organisation's own name set in type. The commercial links are
   dropped per the outbound-link policy; the institutional ones keep their href.
   --------------------------------------------------------------------------------------------- */
.vc-partner {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 96px; padding: 18px 16px; border: 1px solid var(--vc-line); border-radius: 8px;
  background: #fff; font-family: var(--vc-sans); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; color: var(--vc-ink); line-height: 1.4; text-decoration: none;
}
a.vc-partner:hover { border-color: var(--vc-purple); color: var(--vc-purple); }

/* ---------------------------------------------------------------------------------------------
   11. THE FLOATING CTA. floatton renders a <button> whose only behaviour is an inline
   window.location.href — to /agendarconsultagratuita/, a page that was never archived. Its own
   stylesheet is one of the 41 missing ones, so the control shipped as an unstyled system button
   sitting over the footer. It becomes a real link to the appointment page, styled.
   --------------------------------------------------------------------------------------------- */
.vc-float-cta {
  position: fixed; left: 18px; bottom: 18px; z-index: 1500;
  display: inline-flex; align-items: center; gap: 10px; max-width: min(78vw, 300px);
  padding: 13px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--vc-purple); color: #fff; text-decoration: none;
  font-family: var(--vc-sans); font-size: 11px; font-weight: 700; letter-spacing: .07em;
  line-height: 1.3; text-transform: uppercase; text-align: left;
  box-shadow: 0 10px 26px rgba(34, 30, 45, .28);
}
.vc-float-cta:hover { background: var(--vc-purple-d); }
.vc-float-cta svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
@media (max-width: 640px) { .vc-float-cta { font-size: 10px; padding: 11px 16px; } }

/* back-to-top */
.tm-totop-scroller {
  position: fixed; right: 18px; bottom: 18px; z-index: 1400; left: auto;
  width: 44px; height: 44px; border-radius: 50%; background: var(--vc-purple); color: #fff;
  display: none; align-items: center; justify-content: center; text-decoration: none;
}
.tm-totop-scroller.vc-show { display: flex; }
.tm-totop-scroller svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------------------------------------------------------------------------------------------
   12. MAPS AND LEGAL PAGES.
   The contact page embedded Google Maps through ?output=embed, which Google now answers with a
   404 and X-Frame-Options: DENY — a permanent grey box. Replaced with a key-free OpenStreetMap
   embed, which is the same substitution the delivered restorations in this project use.
   The privacy policy is the page that always comes back with the worst styling: on this theme it
   is one long text-editor widget with no measure, no heading scale and no list styling at all.
   --------------------------------------------------------------------------------------------- */
.vc-map { margin: 0; }
/* The map was an openstreetmap.org/export/embed.html IFRAME until 2026-08-18 - a live third-party
   request on the page a visitor is most likely to open, and on a site whose own cookie policy said
   in writing that this was "the only external content loaded anywhere". It is now a picture we
   host. The box is unchanged, clamp(280px, 42vw, 460px), which measures 1072x460 at 1440 and
   322x280 at 390; object-fit:cover crops the single centred image to both, so the clinic stays on
   the middle pixel and nothing below the map moves. */
.vc-map .vc-map-pic {
  display: block; width: 100%; height: clamp(280px, 42vw, 460px); border: 0; border-radius: 6px;
  overflow: hidden;
}
.vc-map .vc-map-pic img {
  display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; border: 0;
}
/* line-height is set explicitly because Elementor's google_maps widget zeroes line-height
   and font-size on .elementor-widget-container so an iframe leaves no descender gap. The
   credit line inherited that: measured 2026-08-18 it had height 0 and line-height 0px, which
   nobody saw while it fitted on ONE line, and which drew its two lines on top of each other
   at 390 the moment the ODbL credit made it wrap. */
.vc-map-links { margin: 10px 0 0; font-size: 14px; line-height: 1.5; }
.vc-map-links a { color: var(--vc-purple); }

.vc-legal .elementor-widget-container { max-width: 820px; margin: 0 auto; }
.vc-legal .elementor-text-editor { font-size: 16px; line-height: 1.85; color: var(--vc-body); }
.vc-legal .elementor-text-editor h1,
.vc-legal .elementor-text-editor h2,
.vc-legal .elementor-text-editor h3,
.vc-legal .elementor-text-editor strong + br + strong { color: var(--vc-purple); }
.vc-legal .elementor-text-editor h2 {
  font-family: var(--vc-serif); font-size: 28px; line-height: 1.2; margin: 2em 0 .6em;
}
.vc-legal .elementor-text-editor h3 {
  font-family: var(--vc-sans); font-size: 15px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; margin: 1.8em 0 .5em; color: var(--vc-ink);
}
.vc-legal .elementor-text-editor ul,
.vc-legal .elementor-text-editor ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.vc-legal .elementor-text-editor li { margin: 0 0 .5em; }
.vc-legal .elementor-text-editor a { color: var(--vc-purple); word-break: break-word; }
.vc-legal .elementor-text-editor table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.vc-legal .elementor-text-editor th,
.vc-legal .elementor-text-editor td {
  border: 1px solid var(--vc-line); padding: 10px 12px; text-align: left; font-size: 14px;
}

/* ---------------------------------------------------------------------------------------------
   13. THE 404 PAGE (authored — the original site never had one that was captured).
   --------------------------------------------------------------------------------------------- */
.vc-404 { padding: clamp(60px, 9vw, 120px) 24px; text-align: center; }
.vc-404 .vc-404-code { max-width: none;
  max-width: none;
  font-family: var(--vc-serif); font-size: clamp(64px, 12vw, 128px); line-height: 1;
  color: var(--vc-purple); margin: 0 0 10px;
}
.vc-404 h1 { font-family: var(--vc-serif); font-size: clamp(26px, 3.4vw, 38px); color: var(--vc-ink); margin: 0 0 16px; }
.vc-404 p { max-width: 620px; margin: 0 auto 30px; font-size: 16px; line-height: 1.75; }
.vc-404-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none;
  margin: 0 auto; padding: 0; max-width: 780px;
}
.vc-404-links a {
  display: inline-block; padding: 12px 22px; border: 1px solid var(--vc-line); border-radius: 999px;
  color: var(--vc-ink); text-decoration: none; font-size: 13px; letter-spacing: .04em;
}
.vc-404-links a:hover { border-color: var(--vc-purple); color: var(--vc-purple); }

/* ---------------------------------------------------------------------------------------------
   14. RESPONSIVE. The capture is the DESKTOP payload (both header variants are in the markup and
   the bundle carries 196 media queries), so this is about the stack order the missing per-page
   sheets used to set, not about rescuing a phone-only layout.
   --------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-container { flex-direction: column; }
  .elementor-column { width: 100% !important; }
  #quadmenu .quadmenu-dropdown-menu > ul.quadmenu-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .elementor-top-section { padding: 30px 0; }
  #quadmenu .quadmenu-dropdown-menu > ul.quadmenu-row { grid-template-columns: 1fr; }
  .vc-carousel-prev { left: 2px; }
  .vc-carousel-next { right: 2px; }
}
img { max-width: 100%; }

/* An authored page-title band for the three pages whose title was a text-editor widget rather
   than a heading element (vc_12_ui.synth_h1). Matches the band the other inner pages get. */
.vc-authored-head { background: var(--vc-band); padding: clamp(26px, 4vw, 54px) 0; }
.vc-authored-head .elementor-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* /protocolos/ — the partner list. Each entry's name is an Elementor heading widget that the
   editor set to h1; at the site's display scale that is 38px per partner in a four-column grid,
   which turned a reference list into a wall. Sized as a list, not as page titles. */
.vc-protocolos .elementor-widget-heading .bdt-heading,
.vc-protocolos .elementor-widget-heading .elementor-heading-title {
  font-family: var(--vc-sans); font-size: 15px; font-weight: 600; line-height: 1.45;
  letter-spacing: .02em; color: var(--vc-ink);
}
/* The partner entries become chips. The frame goes on the HEADING WIDGET, not on the column:
   `.elementor-element-populated` is every populated column on the page, so bordering that drew a
   box round the page title and round all four footer columns too. Removing the logo widget also
   left each column bottom-aligned inside a tall row (the section is
   `elementor-section-content-bottom`), which read as 170px of missing content — hence the
   min-height and the top alignment. */
.vc-protocolos .elementor-row { align-items: flex-start; }
.vc-protocolos .elementor-top-section:not(:first-child) .elementor-widget-heading {
  display: flex; align-items: center; min-height: 74px; margin: 0 0 12px;
  padding: 14px 18px; border: 1px solid var(--vc-line); border-radius: 8px; background: #fff;
}
.vc-protocolos .elementor-top-section:not(:first-child) .elementor-widget-heading:hover {
  border-color: var(--vc-purple);
}

/* The floating appointment CTA is fixed to the bottom-left; on a phone it sits over the last
   ~60px of every page (it was covering the appointment form's own explanatory note). Give the
   document room underneath it rather than moving a control the design deliberately floats. */
@media (max-width: 900px) {
  body { padding-bottom: 76px; }
  .vc-float-cta { max-width: calc(100vw - 36px); }
}

/* the authored 404 (vc_17_404.py) */
.vc-404 .vc-404-code { max-width: none; }
.vc-404-alt { max-width: 720px; margin: 34px auto 0; padding-top: 22px;
  border-top: 1px solid var(--vc-line); font-size: 15px; color: var(--vc-mut); }
.vc-404-alt a, .vc-404-call a { color: var(--vc-purple); }
.vc-404-call { margin-top: 18px; font-size: 14px; color: var(--vc-mut); }

/* =============================================================================================
   14. SECOND-PASS CORRECTIONS — everything below was found by LOOKING at the built pages at
   1440px and at 390px, not by reading markup. Each block records what was on the screen.
   ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
   14.1 THE PHONE MENU OPENED ONTO NOTHING.
   Tapping the burger dimmed the whole page and no panel appeared — on all 69 pages, so the site
   had no navigation at all below 960px. "vc-open" was being set correctly (that is what painted
   the dim layer), but UIkit's own stylesheet parks the drawer with transform: translateX(-100%)
   and only its script — never archived — removes it by adding .uk-open. Section 5 overrode left,
   which UIkit no longer uses for this. Measured: the panel sat at x=-335 in a 390px viewport.
   --------------------------------------------------------------------------------------------- */
#tm-mobile .uk-offcanvas-bar,
#tm-mobile.vc-open .uk-offcanvas-bar { transform: none !important; }
#tm-mobile .uk-offcanvas-bar { transition: none; }
.vc-offcanvas-close {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; line-height: 1;
  border: 0; border-radius: 50%; background: var(--vc-band); color: var(--vc-ink);
  font-size: 26px; cursor: pointer;
}
.vc-offcanvas-close:hover { background: var(--vc-purple); color: #fff; }

/* ---------------------------------------------------------------------------------------------
   14.2 THE DESKTOP MEGA PANEL WAS CLIPPED, SEE-THROUGH AND SQUEEZED.
   Three separate faults in one panel:
   (a) it opened at x=544 and was 1240px wide, so its fourth column ran 344px past the right edge
       of a 1440 viewport and was simply cut off — a menu that hid a quarter of the services;
   (b) the vendor paints it rgba(255,255,255,.94), so the hero photograph ghosted through every
       link in it;
   (c) each column carries Bootstrap's col-sm-3 {width:25%}. As a grid item that 25% resolves
       against the 280px track, not against the panel, so every column was about 70px wide and
       "Massagem Anti-Celulitica Localizada Modeladora" wrapped over five lines.
   --------------------------------------------------------------------------------------------- */
#quadmenu .quadmenu-navbar-nav > li > .quadmenu-dropdown-menu {
  left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important;
  background-color: #fff !important;
  max-height: calc(100vh - 90px) !important; overflow-y: auto;
}
/* Bootstrap's col-sm-3 sets BOTH width and max-width to 25%. Against the 257px grid track that
   left each column 64px wide with its own text overflowing it, and the "stray hyphen" under every
   column heading turned out to be the heading's own 1px bottom border on a 4px-wide box. */
#quadmenu .quadmenu-dropdown-menu > ul.quadmenu-row > li {
  width: auto !important; max-width: none !important; float: none !important; min-width: 0;
}
#quadmenu .quadmenu-dropdown-menu > ul.quadmenu-row > li > div,
#quadmenu .quadmenu-dropdown-menu > ul.quadmenu-row > li > div > ul,
#quadmenu .quadmenu-dropdown-menu > ul.quadmenu-row > li > div > ul > li {
  width: auto !important; max-width: none !important;
}
/* The column headings were breaking onto three lines inside those 64px columns. Two of the four
   run to two lines even at full width, which left their rules — and the first link under them —
   20px lower than the other two, so reserve both lines for all four.
   min-height had to be restated in px: `box-sizing:border-box` is set for all of #quadmenu at the
   top of this file, so the 2.6em also had to cover the heading's own 10px bottom padding and in
   practice reserved a single line. MASSAGENS and CONSULTAS therefore still ruled off 20px above
   the two headings that wrap, and their first link sat 19px higher than its neighbours'. */
#quadmenu .quadmenu-title {
  white-space: normal; overflow-wrap: normal;
  line-height: 1.45; min-height: calc(2.9em + 10px);
}
/* OBJETIVO is built from SIX columns of which FOUR are entirely empty — no link, no text, nothing
   the menu builder ever filled in. As grid items they still claimed cells 1-3, so CORPO opened in
   the fourth column with three columns of white to its left and ROSTO wrapped onto a second row
   440px below its own heading. An empty column is not a layout, it is a hole; drop it and let the
   two real ones start at the left edge like every other panel. */
#quadmenu .quadmenu-dropdown-menu > ul.quadmenu-row > li:not(:has(a)) { display: none !important; }
/* an empty text widget ships under every column heading and drew a stray rule under it */
#quadmenu .quadmenu-item-widget .textwidget:empty { display: none; }
/* Two of the four columns end with a 66px decorative flourish (a rule and a chevron) that the
   original panel used as a divider. At .55 opacity under only two of four columns they read as
   smudges left behind rather than as ornament; the heading rules now do that job for all four. */
#quadmenu .quadmenu-dropdown-menu .quadmenu-item-widget img { display: none; }
#quadmenu .quadmenu-dropdown-menu li > a { overflow-wrap: normal; }
/* the language panel is a two-item list, not a mega panel — keep it beside its own item */
#quadmenu .quadmenu-navbar-nav > li:not(.quadmenu-item-type-mega) > .quadmenu-dropdown-menu {
  left: auto !important; right: 0 !important; width: auto !important; min-width: 150px;
}

/* ---------------------------------------------------------------------------------------------
   14.3 THE FOOTER WAS NOT A FOOTER.
   Every page ended with about 350px of white and then four columns of grey text floating in it,
   with the copyright line starting 34px to the LEFT of the columns above it. The footer's own
   Elementor template sheet (post 571) was never archived — its background_background:"classic"
   setting is still in the markup with nothing left to render it. This gives the block the site's
   own #f7f7f7 band, squares the copyright up under the columns and rules a line between them.
   The vc-footer class is stamped on the footer root of all 69 pages by vcl_finish.py, because the
   three markup families the archive produced name that root with three different element ids.
   --------------------------------------------------------------------------------------------- */
.vc-footer {
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: 46px; margin-bottom: 0;
  background: var(--vc-band); border-top: 1px solid var(--vc-line);
  padding: 52px 0 26px;
}
.vc-footer .elementor-inner-section > .elementor-container { padding: 0; max-width: none; }
/* The authored 404 hangs its content off the theme's own uk-grid rather than off the Elementor
   section wrap, so its footer columns started at x=168 where every other page starts at 184 and
   its social buttons measured 67px against everyone else's 42. Pinning the footer's own content
   width and button size makes the footer identical on all 71 pages regardless of what wraps it. */
/* Root cause of the 24px shift: on the 62 pages that wrap the footer in the Elementor template the
   footer's container is nested one level deeper and measures 150..1290; where the footer IS the
   section (the 404 and the six older captures) it measures 126..1314, and every column inherits the
   offset. Pinning the outermost footer container to the deeper one's width settles it everywhere.
   The selector only bites when .vc-footer is itself the section — which is exactly the odd case. */
.vc-footer > .elementor-container { max-width: 1140px; margin: 0 auto; padding: 0; }
/* The remaining 24px is the inset that the deeper nesting adds and this one does not. Auto margins
   and align-self both refuse to move the block (its flex parent stretches it), so the inset goes on
   the wrapper where it belongs. The selector matches ONLY the family where .vc-footer is itself the
   section, so the 62 correctly-inset pages are untouched. */
.vc-footer > .elementor-container > .elementor-row > .elementor-column
  > .elementor-column-wrap > .elementor-widget-wrap { padding: 0 24px; }
.vc-footer .elementor-social-icon {
  width: 42px !important; height: 42px !important; padding: 0 !important; font-size: 20px !important;
}
.vc-footer .elementor-row { align-items: flex-start; }
.vc-footer .elementor-widget:not(:last-child) { margin-bottom: 12px; }
.vc-footer .elementor-text-editor p { margin: 0; }
.vc-footer .elementor-col-25 .elementor-widget-text-editor:first-child .elementor-text-editor {
  font-family: var(--vc-sans); font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vc-purple);
}
.vc-footer .elementor-icon-list-item { align-items: flex-start; margin-bottom: 8px; }
.vc-footer .elementor-icon-list-text,
.vc-footer .elementor-icon-list-text a { font-size: 15px; color: var(--vc-body); }
.vc-footer .elementor-icon-list-text a:hover { color: var(--vc-purple); }
.vc-footer .elementor-widget-image img { max-width: 190px; }
/* the copyright is a sibling of the four-column row, so it inherited none of its padding */
.vc-footer .elementor-inner-section + .elementor-widget-text-editor {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--vc-line);
  text-align: center; font-size: 13px; letter-spacing: .03em; color: var(--vc-mut);
}
@media (max-width: 767px) {
  .vc-footer { padding: 38px 0 22px; margin-top: 30px; }
  .vc-footer .elementor-col-25 { margin-bottom: 10px; }
  .vc-footer .elementor-inner-section + .elementor-widget-text-editor { text-align: left; }
}

/* ---------------------------------------------------------------------------------------------
   14.4 NOTHING MAY BREAK MID-WORD.
   Section 9 set overflow-wrap: break-word on every widget so a long word could not overflow its
   column. In the display serif that produced "Emagrecime / nto" across the five benefit columns of
   every treatment page, and "TRATAMENTO / S" on the homepage's service band at 390px. Headings opt
   out of the break and are sized to fit instead.
   --------------------------------------------------------------------------------------------- */
.elementor-heading-title, .bdt-heading, .bdt-heading-wrapper,
.elementor-heading-title a, .bdt-heading a { overflow-wrap: normal; word-break: normal; }
/* the five-up benefits row: 20% of 1240 leaves 208px of usable column */
.elementor-col-20 .bdt-heading, .elementor-col-20 .elementor-heading-title {
  font-size: clamp(19px, 1.75vw, 25px); line-height: 1.25;
}
@media (max-width: 1024px) {
  .elementor-col-20 .bdt-heading, .elementor-col-20 .elementor-heading-title { font-size: 21px; }
}

/* ---------------------------------------------------------------------------------------------
   14.5 THE HOMEPAGE SERVICE BANDS ON A PHONE.
   The three photo bands (TRATAMENTOS / MASSAGENS / CONSULTAS) carry margin: 20px 50px on their
   heading from the page's own sheet — 100px of side margin, which on a 390px screen left the title
   192px to live in and split the word. The band also collapsed to a 145px stripe. The desktop
   values are the page's own and are left alone.
   --------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-element-a4866a6 > .elementor-widget-container,
  .elementor-element-3df84ca > .elementor-widget-container,
  .elementor-element-7dc29d1 > .elementor-widget-container { margin: 16px 6px; }
  .elementor-element-baa3a86, .elementor-element-678baf9, .elementor-element-00e43b0 {
    display: flex; align-items: center; min-height: 190px;
  }
  .elementor-element-baa3a86 > .elementor-container,
  .elementor-element-678baf9 > .elementor-container,
  .elementor-element-00e43b0 > .elementor-container { width: 100%; }
}

/* ---------------------------------------------------------------------------------------------
   14.6 THE "CONSULTAS" BAND WAS A PICTURE OF AN EMPTY WALL.
   Its substitute photograph is a vase on a shelf with two thirds of the frame given to blank
   plaster; between two bands that both show a treatment in progress it read as the slot nobody
   filled. Replaced with the clinician-at-work photograph the site already publishes on its own
   consultation pages. Same asset, same directory, nothing new invented.
   --------------------------------------------------------------------------------------------- */
.elementor-35 .elementor-element.elementor-element-00e43b0:not(.elementor-motion-effects-element-type-background) {
  background-image: url("/img/shutterstock_1167335005-1200x800-16dd6efd.jpg");
  background-position: center center;
}

/* ---------------------------------------------------------------------------------------------
   14.7 THE FOUR "PREOCUPACOES" ICONS DID NOT LINE UP.
   The page's own sheet scales each icon by a different percentage (60/51/61/40%) because the four
   original artworks had four different aspect ratios. The redrawn flat icons do not, so the
   percentages left four different sizes at four different heights with their captions on four
   different baselines. One fixed box puts them back on one line.
   --------------------------------------------------------------------------------------------- */
.elementor-element-5b5f8bc .elementor-widget-image .elementor-image {
  display: flex; align-items: flex-end; justify-content: center; min-height: 116px;
}
.elementor-element-5b5f8bc .elementor-widget-image img {
  width: auto !important; max-width: 100%; max-height: 104px; margin: 0;
}
/* The page sheet also gives three of the four tiles a different widget margin — one of them
   `padding: 20px 0 11px` — which dropped that caption 31px below its three neighbours even after
   the icons themselves were levelled. */
.elementor-35 .elementor-element.elementor-element-5b5f8bc .elementor-widget-image > .elementor-widget-container,
.elementor-35 .elementor-element.elementor-element-5b5f8bc .elementor-widget-heading > .elementor-widget-container {
  margin: 0; padding: 0;
}
.elementor-element-5b5f8bc .elementor-widget-heading { margin-top: 10px; }
.elementor-element-5b5f8bc .elementor-widget-heading .bdt-heading { line-height: 1.25; }
@media (max-width: 767px) {
  .elementor-element-5b5f8bc .elementor-widget-image .elementor-image { min-height: 96px; }
  .elementor-element-5b5f8bc .elementor-widget-image img { max-height: 86px; }
}

/* ---------------------------------------------------------------------------------------------
   14.8 CARD ROWS DID NOT LINE UP, AND THE LAST CARD SAT ALONE BESIDE HALF A PAGE OF WHITE.
   /tratamentos/ lays its treatments out two to a row, each row its own section. Cards whose blurb
   ran to a different number of lines put their SAIBA MAIS buttons 28px apart, and the rows holding
   an odd card (VeryFit, Venus Freeze Rosto) left the entire right half of the page empty. Buttons
   are now pinned to the bottom of every card, and a row left with one card lays that card out
   wide — photograph beside text — so the row is full by design rather than by accident.
   --------------------------------------------------------------------------------------------- */
/* Scoped to card columns ONLY. Applied to every .elementor-column it also stretched the partner
   chips on /protocolos/ from their 74px pill to 112px, leaving each name floating at the top of a
   bordered box with 70px of white under it — the exact defect this pass exists to remove. */
.elementor-row > .elementor-col-50 > .elementor-column-wrap,
.elementor-row > .elementor-col-33 > .elementor-column-wrap { display: flex; }
.elementor-row > .elementor-col-50 > .elementor-column-wrap > .elementor-widget-wrap,
.elementor-row > .elementor-col-33 > .elementor-column-wrap > .elementor-widget-wrap { flex: 1; }
.elementor-col-50 .elementor-widget-button:last-child,
.elementor-col-33 .elementor-widget-button:last-child { margin-top: auto; padding-top: 6px; }
/* two-line titles in one card and one-line titles in the next started their blurbs at different
   heights; reserving the second line keeps a row of cards on one grid */
.elementor-col-50 > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget-heading .bdt-heading,
.elementor-col-33 > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget-heading .bdt-heading {
  min-height: 2.1em;
}
.elementor-row:has(> .elementor-column.elementor-col-50:only-child):has(.elementor-widget-image):has(.elementor-widget-button) > .elementor-col-50 {
  width: 100%;
}
.elementor-row:has(> .elementor-column.elementor-col-50:only-child):has(.elementor-widget-image):has(.elementor-widget-button) .elementor-widget-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 46px; align-content: start;
}
.elementor-row:has(> .elementor-column.elementor-col-50:only-child):has(.elementor-widget-image):has(.elementor-widget-button) .elementor-widget-image {
  grid-row: 1 / span 4; align-self: start;
}
.elementor-row:has(> .elementor-column.elementor-col-50:only-child):has(.elementor-widget-image):has(.elementor-widget-button) .elementor-widget-button {
  margin-top: 4px;
}
.elementor-row:has(> .elementor-column.elementor-col-50:only-child):has(.elementor-widget-image):has(.elementor-widget-button) .elementor-widget-button .elementor-button-wrapper {
  justify-content: flex-start;
}
@media (max-width: 767px) {
  .elementor-row:has(> .elementor-column.elementor-col-50:only-child):has(.elementor-widget-image):has(.elementor-widget-button) .elementor-widget-wrap {
    display: flex;
  }
}
/* every card photograph in a treatment grid crops to one ratio so the rows stay level */
.elementor-col-50 > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget-image img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
}

/* ---------------------------------------------------------------------------------------------
   14.9 /marcar-consulta/ OPENED WITH A 170px HOLE.
   Forminator ships an empty rendering placeholder immediately before the real form. Its script
   would have replaced it; with the script gone it kept the plugin's own field spacing and pushed
   the first field a third of a screen down the page.
   --------------------------------------------------------------------------------------------- */
.forminator-custom-form[data-forminator-render] { display: none !important; }
/* and the section break between the form's own label and its first field was still 106px */
.elementor-element-5e717e4 { margin-bottom: 0; }
.elementor-element-a2cc58f { padding-top: 0; }

/* ---------------------------------------------------------------------------------------------
   14.12 THE "BENEFICIOS" ROW READ AS FIVE LOOSE PHRASES.
   Every treatment page ends its intro with a five-up list of benefits, marked up as five heading
   widgets with no bullet, no icon and no rule — so at a glance it is five purple phrases floating
   in a band of white rather than a list. A short rule in the site's own accent, the same device
   the mega menu uses over its column headings, makes it read as one list.
   --------------------------------------------------------------------------------------------- */
/* the row is `elementor-section-content-middle`, which centres each column independently, so a
   one-line benefit put its rule 20px below its two-line neighbours' */
.elementor-section-content-middle:has(.elementor-col-20) .elementor-row { align-items: flex-start; }
.elementor-col-20 .bdt-heading-wrapper { position: relative; padding-top: 18px; }
.elementor-col-20 .bdt-heading-wrapper::before {
  content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px;
  background: var(--vc-purple); opacity: .55;
}

/* ---------------------------------------------------------------------------------------------
   14.10 THE MAP ON /contactos/.
   It hung 50px wider than the page's own content column on each side, and the "Ver mapa maior"
   link under it started further left than every other element on the page. A tile server is also
   the one thing on this site that can fail at the visitor's end, and an iframe that fails is a raw
   white hole — so the frame itself now reads as a panel whether or not the tiles arrive.
   --------------------------------------------------------------------------------------------- */
/* Measured: the page's own content column runs 184..1256 at 1440px; the map, in a full-width
   section, ran 158..1282. The 50px is the inset a boxed section's column adds and this one does
   not, so it is added back rather than guessed. */
.vc-map { max-width: 1240px; margin: 0 auto; padding: 0 50px; }
.vc-map .vc-map-pic {
  background: var(--vc-band); border: 1px solid var(--vc-line); border-radius: 8px;
}
@media (max-width: 767px) { .vc-map { padding: 0; } }

/* ---------------------------------------------------------------------------------------------
   14.11 SPACING BETWEEN THE LAST SECTION AND THE FOOTER.
   The homepage's own sheet gives the spacer above the footer 100px, which was fine when the footer
   had a background to end the page on. Section 9's .vc-empty override never applied — the page
   sheet's .elementor-35 .elementor-element.elementor-element-20c2f59 is a stronger selector — so
   the gap compounded with the footer's own top margin. Halved, not removed.
   --------------------------------------------------------------------------------------------- */
.elementor-35 .elementor-element.elementor-element-20c2f59 .elementor-spacer-inner { height: 20px; }

/* ---------------------------------------------------------------------------------------------
   14.13 THE PARTNER CHIPS ON /protocolos/ WERE BORDERED BOXES WITH THE NAME PUSHED TO THE TOP.
   Twelve rounded rectangles, each about 110px tall, each holding one 15px line of text at the very
   top and then 70px of nothing — a "bordered rectangle with only a label in it", and the boxes in
   a row did not even end level with one another. The chip now fills its column, so every chip in a
   row is the same height, and the name sits on the vertical centre where it was always meant to.
   --------------------------------------------------------------------------------------------- */
.vc-protocolos .elementor-top-section:not(:first-child) .elementor-column-wrap { display: flex; }
.vc-protocolos .elementor-top-section:not(:first-child) .elementor-widget-wrap {
  flex: 1; display: flex;
}
.vc-protocolos .elementor-top-section:not(:first-child) .elementor-widget-heading {
  flex: 1; min-height: 78px; margin: 0; padding: 16px 18px;
  display: flex; align-items: center;
}
/* …and the reason the chip STAYED two-thirds empty after all of the above: the theme bundle ships
   `.elementor-widget-heading .elementor-widget-container{margin-bottom:60px}` for every heading
   widget on the site. Inside the chip that 60px is part of the flex item, so the box measured
   16+22+60+16 = 114px around one 22px line and `align-items:center` had nothing left to centre —
   it read as content that had failed to load. Killed here, inside the chip only, so the 60px
   heading rhythm the rest of the site was built on is untouched. */
.vc-protocolos .elementor-top-section:not(:first-child) .elementor-widget-heading
  > .elementor-widget-container { width: 100%; margin-bottom: 0; }
.vc-protocolos .elementor-row { align-items: stretch; }
/* the section that only exists to hold the footer contributed 68px of its own padding on top */
.elementor-top-section:has(.vc-footer):not(.vc-footer) { padding-top: 0; padding-bottom: 0; }
.vc-footer { margin-top: 12px; }

/* ---------------------------------------------------------------------------------------------
   QuadMenu dropdowns, restored without their JavaScript.
   The plugin opened a submenu by adding .open to the li, and the theme's own CSS already carries
   every rule for that state - display:block, visibility:visible, pointer-events:all, height:auto,
   and the transitions. Only the script that added the class is gone, so on desktop none of the
   eight main-nav submenus opened and whole sections were unreachable from the navigation.
   The toggle keeps the plugin's own `hoverintent` class, i.e. hover WAS the original desktop
   trigger, so this reproduces the behaviour rather than inventing one.
   Do NOT qualify with .quadmenu-is-horizontal: the plugin added that class at runtime too, and
   the served markup only has quadmenu-is-embed - the first attempt matched nothing at all. Scope
   by width instead, so the mobile burger keeps its own behaviour untouched.
   --------------------------------------------------------------------------------------------- */
@media (min-width: 992px) {
  #quadmenu .quadmenu-navbar-nav li.quadmenu-item:hover > .quadmenu-dropdown-menu,
  #quadmenu .quadmenu-navbar-nav li.quadmenu-item:focus-within > .quadmenu-dropdown-menu {
    display: block !important;
    visibility: visible !important;
    pointer-events: all !important;
    overflow: visible !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* The vendor also hides the panel's own <ul> until that same `.open` class, so it has to be
     un-hidden here — but ONLY its visibility. The first version of this rule forced `display:block`
     as well, and because it is more specific than the `ul.quadmenu-row {display:grid}` of §14.2 it
     won while the pointer was down on the item: the four-column mega panel flattened into a single
     810px-tall column that filled the entire viewport and pushed half the services below the fold.
     Every row keeps whatever display its own layout rule gives it. */
  #quadmenu .quadmenu-navbar-nav li.quadmenu-item:hover > .quadmenu-dropdown-menu > ul,
  #quadmenu .quadmenu-navbar-nav li.quadmenu-item:focus-within > .quadmenu-dropdown-menu > ul {
    visibility: visible !important;
  }
}

/* ---------------------------------------------------------------------------------------------
   15.1 /protocolos/ WAS A BLANK PAGE ON EVERY PHONE.
   The three partner sections carry Elementor's own `elementor-hidden-phone`, and the phone-only
   section the editor paired with them (dcebcfe) is empty — whatever it held was never archived.
   So under 768px the page rendered its title band, ~110px of white and then the footer: body text
   fell from 287 characters to 50 (PT) and 282 to 45 (/en/), the only two of 70 pages that lose
   content on a phone, on a page that is reachable from the main nav. The twelve partners ARE the
   page, so the phone gets the real sections rather than a blank page. Deliberately scoped to the
   protocolos body class — `elementor-hidden-phone` is a real editorial choice on other pages.
   --------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .vc-protocolos .elementor-top-section.elementor-hidden-phone { display: block; }
}

/* ---------------------------------------------------------------------------------------------
   15.2 THE OBJETIVO MEGA PANEL WAS HALF EMPTY WHILE SERVIÇOS BESIDE IT WAS FULL.
   OBJETIVO is authored as SIX columns of which four are literally `<li></li>` — §12 hides those —
   leaving CORPO and ROSTO in tracks 1 and 2 of a `repeat(4, 1fr)` grid stretched across the full
   1240px bar: 660px of white, and two panels on the same bar that look like different components.
   A grid cannot count its own children, but a row with three or more populated columns can be
   matched structurally (`li:not(:empty) ~ li:not(:empty) ~ li:not(:empty)`), so :not() of that is
   exactly "this panel has fewer than three columns". Such a panel stops stretching and is hung on
   the bar's right edge instead, where its two 257px tracks land on the same x as tracks 3 and 4 of
   the SERVIÇOS panel — same grid, same column width, no hole.
   `:empty` rather than `:not(:has(a))` (which §12 hides by) only because :has cannot nest inside
   :has; verified on the built page that the two select the same four dead columns.
   Inside the desktop media query on purpose: below 992px the panels belong to the burger drawer,
   which lays them out as a single block list and must not be repositioned.
   --------------------------------------------------------------------------------------------- */
@media (min-width: 992px) {
  #quadmenu .quadmenu-navbar-nav > li.quadmenu-item-type-mega
    > .quadmenu-dropdown-menu:not(:has(> ul.quadmenu-row
      > li:not(:empty) ~ li:not(:empty) ~ li:not(:empty))) {
    /* min-width:0 is the load-bearing one: QuadMenu ships `min-width:100%` on every panel, so
       left/right/width alone left it exactly 1240px wide and nothing moved. */
    left: auto !important; right: 0 !important; width: auto !important; min-width: 0 !important;
  }
  #quadmenu .quadmenu-navbar-nav > li.quadmenu-item-type-mega
    > .quadmenu-dropdown-menu:not(:has(> ul.quadmenu-row
      > li:not(:empty) ~ li:not(:empty) ~ li:not(:empty))) > ul.quadmenu-row {
    grid-template-columns: repeat(2, minmax(0, 257px));
  }
}

/* =============================================================================================
   16. ROUND-FOUR CORRECTIONS.
   ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
   16.1 THE FLOATING CTA WAS SITTING ON TOP OF THE BODY COPY AT DESKTOP WIDTHS.
   §11 floats our replacement appointment button at left:18px, 340px wide. Measured in a real
   1440x900 window: the theme's boxed container is 1140px, so the text column starts at x=184 and
   the pill covered 184-358 of every line it passed — on /massagens/ it made the opening words of a
   paragraph unreadable, on /politicadeprivacidade/ it covered a numbered heading. There is no
   width at which a 340px pill clears the column: the gutter is 150px at 1440, 70px at 1280 and
   0px at 1100 and below, and the right-hand gutter is the same, so no corner and no shrunken
   pill can be "beside" the text. The pill therefore stops being an overlay and becomes page
   chrome — a full-bleed bar pinned to the bottom edge, the same full-width treatment the sticky
   header already uses at the top, with body padding so the end of the document still clears it.
   Nothing horizontal is ever covered again. Below 901px the phone rule above already reserves
   76px and the pill was not reported there, so the phone treatment is left exactly as it was.
   --------------------------------------------------------------------------------------------- */
@media (min-width: 901px) {
  /* exactly the bar's own height: any more and a white sliver of the body box shows between the
     grey footer and the bar at full scroll. */
  body { padding-bottom: 48px; }
  .vc-float-cta {
    left: 0; right: 0; bottom: 0; max-width: none;
    justify-content: center; gap: 12px;
    padding: 15px 24px; border-radius: 0;
    font-size: 12px; letter-spacing: .08em; text-align: center;
    box-shadow: 0 -8px 24px rgba(34, 30, 45, .20);
  }
  /* The back-to-top button lives in the same corner and was NOT touched: the theme leaves it
     translated 100px down (its reveal animation never runs without the theme's JS), so its border
     box sits at 898-952 and only a 2px sliver was ever on screen — the bar covers exactly that
     sliver. Lifting it to bottom:68px was tried and reverted: it made a control that has never
     been visible on this build appear as a half circle sitting on the new bar. */
}

/* ---------------------------------------------------------------------------------------------
   16.2 THE BOOKING FORM LOST ITS RHYTHM TWO-THIRDS OF THE WAY DOWN.
   §8 hung the vertical rhythm on `.forminator-row`, which is right for the first four fields —
   each is its own top-level row. But Forminator emitted the date and the time as two COLUMNS of
   one row (they were a 6+6 pair before its grid CSS was lost, and they now stack), and it nested
   the textarea, consent and submit rows INSIDE that same row. Measured on the built page: the
   time label sat flush on the date field and the textarea flush on the time field — 0px where
   every field above had 18. Moving the rhythm from the row to the column gives every stacked
   field the same gap however deep Forminator nested it, and the empty trailing row stops
   contributing 18px of dead space. The consent pair also lost its box: it was the only control on
   the form drawn inside a border, which read as a different kind of field rather than a group.
   Scope: `.forminator-*` markup exists on /marcar-consulta/ and /en/marcar-consulta/ and nowhere
   else on the site.
   --------------------------------------------------------------------------------------------- */
.forminator-custom-form .forminator-row { margin: 0; }
.forminator-custom-form .forminator-col { margin: 0 0 18px; }
fieldset.forminator-field { border: 0; padding: 0; }

/* ---------------------------------------------------------------------------------------------
   50. HIT AREA AND MINIMUM TYPE SIZE
   The client's complaint was "hold a magnifying glass to the screen": body copy at 10px and
   controls too small for a finger. Two things here, and neither changes the design.

   The footer's policy links are 12px type set `display:inline`, so their BORDER BOX is the glyph
   box - 15px tall - even though the line box around them is 21.6px. A finger needs 24px (WCAG
   2.5.8) and 44 is the standard. Vertical padding on an inline box enlarges the border box, and
   therefore the hit target, WITHOUT changing the height of the line box: nothing on the page
   moves, the link simply becomes hittable. That is why this is padding and not line-height.

   The floating call-to-action dropped to 10px on phones, which is below the 12px floor and is
   exactly the copy a visitor is meant to read before tapping. 12px with the same padding keeps it
   on one line at 390.
   --------------------------------------------------------------------------------------------- */
.elementor-text-editor a,
.elementor-widget-container p a { padding-block: 5px; }
@media (max-width: 640px) { .vc-float-cta { font-size: 12px; padding: 11px 14px; } }

/* The booking form's own answer. Forminator ships an empty `.forminator-response-message` for the
   AJAX reply that no longer arrives; js/vc-restore.js writes into it instead — either the list of
   fields still missing, or what the press just did. It is never a bare "thank you": nothing has
   been sent until the visitor sends the mail themselves, and the line says so. */
.forminator-response-message:empty { display: none; }
.forminator-response-message {
  display: block;          /* an earlier rule hides the slot outright; it has something to say now */
  margin: 0 0 18px; padding: 12px 14px; font-size: 15px; line-height: 1.5;
  border-left: 3px solid currentColor;
}
.vc-form-sent { color: #17603a; background: #eef7f1; }
.vc-form-bad  { color: #8a1f1f; background: #fbeeee; }
.forminator-input.vc-field-bad, .forminator-textarea.vc-field-bad,
.forminator-select.vc-field-bad { border-color: #8a1f1f; box-shadow: 0 0 0 1px #8a1f1f; }
input[type="checkbox"].vc-field-bad { outline: 2px solid #8a1f1f; outline-offset: 2px; }