/* mececirurgiaestetica.pt — mece-look.css
   The visual-review layer: what a screenshot review found after every automated gate had
   already passed. It lives in its own file, loaded AFTER mece-restore.css on every page,
   for one reason - mece-restore.css is generated by _scripts/mece_03_finish.py and carries
   'edit that, not this file' at the top, so anything appended to it dies the next time that
   script runs. This file is owned by _scripts/mece_04_lookfix.py.
   Load order matters: several rules here are id-scoped overrides of rules in mece-restore.css
   at equal specificity, and the phone block at the bottom must stay last for the same reason. */

/* ==========================================================================
   VISUAL REVIEW PASS — everything below came from looking at the rendered pages, not from a gate.
   Written by _scripts/mece_04_lookfix.py; edit that, not this file.
   Each block says which page it was seen on and what it looked like.
   ========================================================================== */

/* ---------- a column the clinic left empty must not be painted ----------
   Camilyo paints every column as a `.wp_bg` rectangle behind a `.wp_col_content` box. Three rows
   on this site have a column with no widget in it, and the rectangle still ships: /faq's
   "Reflexologia / __ / Cristaloterapia" row rendered a bare 387x365 grey panel between two filled
   cards, and /novidades ended its promotions grid with one card beside two empty 379x628 panels.
   Nothing was lost in the restore - the archive shipped them empty too - so the fix is to stop
   painting a box that has nothing to show. mece-restore.js tags them; :has() is not used because
   `.wp_bg` is a SIBLING of the box it paints, linked only by rel="<id-suffix>". */
.mece-bg-empty { background: none !important; border: 0 !important; }
.mece-col-empty { min-height: 0 !important; }

/* ---------- multi-line runs collided: line-height 24px under 26-30px type ----------
   The theme sets line-height:24px on every widget wrapper and the page then sets font-size inline.
   On a 1140px column most runs are one line, so it never showed - but /novidades has three-line
   promos where the cedilla of "Promoção" touched the capital on the next line. max() raises only
   the cases that need it: 16px text keeps its 24px leading exactly as before. */
.msgwebcontainer [class*="_wp_outer"],
.msgwebcontainer [class*="_wp_outer"] span,
.msgwebcontainer [class*="_wp_outer"] div,
.msgwebcontainer [class*="_wp_outer"] p,
.msgwebcontainer [class*="_wp_outer"] li { line-height: max(24px, 1.28em); }

/* ---------- homepage: the call to action was unreadable ----------
   #EF8000 on #c4cbd1 is 1.66:1, and a cold blue-grey chip on a warm photograph looked like an
   unstyled box rather than a button. Every other button on the site (the "Ver Mais" on /saude and
   /estetica) is solid #EF8000 with white text; this now matches its own design system. */
#page28_button1 .page28_button1_container {
  background-color: #EF8000 !important; color: #fff !important;
  border-color: #EF8000 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important;
}
#page28_button1 .page28_button1_container:hover {
  background-color: #22332f !important; border-color: #22332f !important; color: #fff !important;
}
#page28_button1 .page28_button1_container svg { fill: #fff !important; }

/* ---------- homepage: the three-photo band ----------
   The frames are a fixed 205x194 and the theme pins the photo to height:190px, so the one portrait
   picture (240x320) came out 143px wide and floated inside 58px of hollow grey gutter while its
   two landscape neighbours filled theirs. Cover-cropping to the frame makes the three identical.
   The 80px/160px diagonal stagger is the original design and is kept; what is changed is the size,
   because three 205px photos in a 1140x500 band left the band reading as empty. */
#page28_columns3 .columns3_col_box_0,
#page28_columns3 .columns3_col_box_1,
#page28_columns3 .columns3_col_box_2,
#page28_columns3 .columns3_col_bg_0,
#page28_columns3 .columns3_col_bg_1,
#page28_columns3 .columns3_col_bg_2 {
  width: 30.33% !important; margin-left: 1.5% !important; margin-right: 1.5% !important;
}
/* each column also reserved min-height:280px against ~215px of photo, which is where the last
   100px of empty grey under the band came from */
#page28_columns3 .columns3_col_box_0,
#page28_columns3 .columns3_col_box_1,
#page28_columns3 .columns3_col_box_2 { min-height: 0 !important; }
#page28_image1 a, #page28_image2 a, #page28_image3 a { display: block; }
#page28_image1 img, #page28_image2 img, #page28_image3 img {
  /* 259x200 is 1.30 against the 1.33 of the two landscape originals - they are barely cropped at
     all - and it centre-crops the one portrait shot instead of letting it rattle in the frame */
  display: block; width: 100%; height: 200px; object-fit: cover; max-height: none;
}

/* ---------- homepage: the photo grid stopped 265px above the text column beside it ----------
   The grid keeps 3/2 - the photos are 576x377, i.e. 1.53, so 3/2 costs almost no crop, and 4/3 was
   tried and rejected because it cut the "m" off the MECE watermark burned into every one of them.
   The two 350x229 promo pictures in the text column beside it were stacked; side by side they take
   the column's height down to roughly the grid's, which is what actually closed the gap. */
#page28_newgallery1 .page28_newgallery1_masonry-gallery { gap: 16px; }
#page28_container4 { display: flow-root; }
#page28_image7.image7_wp_outer, #page28_image9.image9_wp_outer {
  float: left; width: 50%; box-sizing: border-box;
}
#page28_image7.image7_wp_outer { padding-right: 6px; }
#page28_image9.image9_wp_outer { padding-left: 6px; }
/* The forced 3/2 crop was safe while these two tiles held generated photographs. They are now the
   clinic's OWN promotion banners (0490/958 and 0490/960, 1.86 and 1.74 wide), with the offer, the
   two phone numbers and the street address printed INSIDE the image - and object-fit:cover to 1.5
   sliced the contact strip off the side of both. Natural aspect, nothing cropped. They stay side
   by side and stay small: at this size they are teasers into /novidades/, where the same two
   banners are shown at 735px and every line of them can be read. */
#page28_image7 img, #page28_image9 img {
  display: block; width: 100%; height: auto;
}

/* ---------- homepage: two bands reserved 500px for ~380px of content ---------- */
#page28_container2.container2_wp_outer { min-height: 0 !important; padding-bottom: 34px; }
#page28_container12.container12_wp_outer {
  min-height: 0 !important; padding: 84px 0 76px !important;
}

/* The two banners at the foot of the homepage are the site's own artwork and they are links to
   /saude and /estetica, but nothing said so - no underline, no cursor change beyond the default,
   no hover. */
#page28_image4 a, #page28_image5 a { display: block; transition: transform .25s ease, box-shadow .25s ease; }
#page28_image4 a:hover, #page28_image5 a:hover,
#page28_image4 a:focus-visible, #page28_image5 a:focus-visible {
  transform: translateY(-3px); box-shadow: 0 6px 18px rgba(34, 51, 47, .22);
}
#page28_image4 a:focus-visible, #page28_image5 a:focus-visible {
  outline: 3px solid #EF8000; outline-offset: 3px;
}

/* ---------- /estetica: the specialities collided with their own heading ----------
   "Especialidades do Bem-Estar" is a plain <span> in an html-text widget, not a title widget, so
   unlike the identical band on /saude it carries no bottom margin and the first row of names sat
   20px under it. The same row was also left-aligned while the two rows below it were centred, and
   its last item ran into the right edge of the container. */
#page74_htmltext12.htmltext12_wp_outer { margin-bottom: 30px; }
#page74_columns1 .title,
#page74_columns5 .title,
#page74_columns4 .title { text-align: center !important; }

/* ---------- every control this restore added was rendering with NO FILL ----------
   The Camilyo core carries `.msgwebcontainer button{font-family:inherit;background-color:transparent}`.
   That is a class+type selector, specificity (0,1,1), and it outranks every bare-class rule in this
   file - so `.mece-cx{background:#fff}` never took effect and neither did the map or video buttons.
   On screen: the carousel's prev/next were a faint ring on a bright photograph with the picture
   showing through, the map's "Ver mapa interativo" pill was see-through over the street map, and
   the video's play button was an empty red outline with a white triangle in it - three controls
   that read as broken rather than as buttons. The hover states worked, because a class plus a
   pseudo-class reaches (0,2,0) and wins, which is exactly why this survived a pass: it is invisible
   to anything that inspects the page with a pointer on the element.
   This is the same trap the footer Facebook link hit; the fix is the same, qualify by tag. */
.msgwebcontainer button.mece-cx, button.mece-cx { background-color: #fff; }
.msgwebcontainer button.mece-cx:hover, button.mece-cx:hover {
  background-color: #EF8000; color: #fff;
}
.msgwebcontainer button.mece-embed-play, button.mece-embed-play { background-color: #fff; }
.msgwebcontainer button.mece-embed-play:hover, button.mece-embed-play:hover {
  background-color: #EF8000; color: #fff;
}
.msgwebcontainer button.mece-embed-play-yt, button.mece-embed-play-yt {
  background-color: rgba(220, 40, 30, .94);
}
.msgwebcontainer button.mece-embed-play-yt:hover, button.mece-embed-play-yt:hover {
  background-color: #c5271c;
}
.msgwebcontainer .mece-lb button, .mece-lb button { background-color: rgba(255, 255, 255, .12); }
.msgwebcontainer .mece-lb button:hover, .mece-lb button:hover {
  background-color: rgba(239, 128, 0, .9);
}
.msgwebcontainer .mece-dots button[aria-selected="true"] { background-color: #EF8000; }

/* ---------- /politica-de-cookies: the four unselected language tabs were unreadable ----------
   White on #b8b8b8 is 2.0:1. The active tab is solid brand orange with white on it, which is
   right; the resting state now uses the light neutral the rest of the site uses for panels, with
   the body text colour on it, so ES/FR/EN/DE read as tabs you can click rather than as ghosts. */
a[role="tab"] { background: #ececec !important; color: #4a4a4a !important; }
a[role="tab"]:hover { background: #dcdcdc !important; color: #22332f !important; }

/* ---------- /faq: the "Cirurgia Geral" section band sat off-centre ----------
   The band is 60px of padding, a 38px title wrapper carrying a 40px bottom margin, and 60px more
   padding - so the heading had 60px of grey above it and 100px below, and a 200px band with one
   short line floating high in it reads as a section somebody forgot to fill. Every other
   title-only band on the site is symmetric (180/175); this is the only one that is not, because
   its title is the last thing in its container and the margin has nothing to separate it from. */
#page76_title6.title6_wp_outer { margin-bottom: 0 !important; }

/* ---------- /novidades: three photos butted straight against each other ----------
   Under "Microblanding" three unrelated crops stacked edge to edge at three slightly different
   widths, which read as a dump rather than a set. All three files are 350x229, so they need no
   crop - they were merely inline-centred, which left them a pixel or two apart and touching.
   NB the max-width needs !important: every <img> on this site carries an inline
   style="max-width:100%", and an inline declaration outranks a stylesheet one. Without it these
   three blew up to the full 1140px column. */
#page75_image20 img, #page75_image19 img, #page75_image8 img {
  display: block; width: 100%; max-width: 350px !important; height: auto; margin: 0 auto;
}
/* `margin: 12px 0` was wrong here: image20's wrapper is a 400px box centred by margin:auto, and
   zeroing the side margins shunted it to the left edge while its two neighbours stayed centred. */
#page75_image20, #page75_image19, #page75_image8 { margin: 12px auto !important; }

/* ---------- /contacte-nos ----------
   The clinic's name, phones, e-mail and address were right-aligned while the opening-hours block
   directly beneath them was left-aligned: one column, two alignments, which reads as an accident.
   And the map stopped 350px above the bottom of its own column. */
#page53_htmltext4, #page53_htmltext7, #page53_htmltext8, #page53_htmltext6,
#page53_htmltext4 *, #page53_htmltext7 *, #page53_htmltext8 *, #page53_htmltext6 * {
  text-align: left !important;
}
.mece-map .mece-embed { aspect-ratio: 3 / 2; }
.mece-map .mece-embed img { height: 100%; object-fit: cover; }

/* ---------- footer: the middle column held one button above 230px of empty green ----------
   The two legal pages belong in a footer and are exactly what that column was short of. Before
   this, /politica-de-cookies was reachable from nothing at all. */
.mece-footer-policy { margin-top: 18px; }
.msgwebcontainer .mece-footer-policy a, .mece-footer-policy a {
  display: block; margin-bottom: 9px; color: #cfd6d3; font-family: Quicksand, sans-serif;
  font-size: 15px; text-decoration: none; border-bottom: 1px solid transparent; width: fit-content;
}
.msgwebcontainer .mece-footer-policy a:hover, .mece-footer-policy a:hover {
  color: #EF8000; border-bottom-color: #EF8000;
}
.mece-footer-policy a:focus-visible { outline: 2px solid #EF8000; outline-offset: 3px; }

/* The OSM attribution and the "open the map" link were joined by a "·". `.mece-map-link` is an
   inline-block, and a line can break before an atomic inline-level box whatever space precedes it,
   so on a phone the bullet was left orphaned at the end of the attribution line. The link now sits
   on its own line at both widths. */
.mece-credit .mece-map-link { display: block; margin-top: 6px; }

/* ---------- authored legal page ---------- */
.mece-legal { max-width: 820px; margin: 58px auto 84px; padding: 0 16px;
  font-family: Quicksand, sans-serif; color: #4a4a4a; }
.mece-legal h1.title {
  color: #EF8000 !important; font-size: 40px !important; text-align: left !important;
  margin-bottom: 20px;
}
/* the theme centres every h2 on the site; a legal page reads as a column of left-ranged sections */
.mece-legal h2 {
  font-family: "Josefin Slab", serif; font-size: 27px; color: #bf6600; margin: 34px 0 10px;
  font-weight: normal; text-align: left !important;
}
.mece-legal p, .mece-legal ul, .mece-legal li { text-align: left !important; }
.mece-legal p, .mece-legal li { font-size: 16px; line-height: 1.68; margin-bottom: 12px; }
.mece-legal ul { margin: 0 0 16px 22px; padding: 0; list-style: disc; }
.mece-legal-lead { font-size: 17px; }
.msgwebcontainer .mece-legal a, .mece-legal a { color: #a35700; text-decoration: underline; }
.mece-legal .mece-note {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid #e6e6e6; font-size: 15px;
}

/* ---------- VISUAL REVIEW PASS: phone ----------
   This block must stay LAST. The desktop rules above it are id-scoped and !important, so a phone
   override placed in the earlier @media(max-width:980px) block lost the cascade on equal
   specificity and the three-photo band came out as 80px vertical slivers on a 390px screen. */
@media (max-width: 980px) {
  /* The hero photo is a high-key interior. The band's own scrim (42% of #141c1a) holds white type
     at 4.4:1 over the top third, but the phone crop pushes the button row down onto the sunlit
     floor, where it fell to 2.99:1 - under the 3:1 large-text floor. Deepen the scrim only here. */
  .page28_container1_swp_outer_bg {
    background-image: linear-gradient(rgba(20, 28, 26, .55), rgba(20, 28, 26, .55)),
      var(--data-bg-image) !important;
  }

  /* Stacked, the band is three full-width photos; the desktop 259x200 frame is a sliver at 358px */
  #page28_columns3 .columns3_col_box_0,
  #page28_columns3 .columns3_col_box_1,
  #page28_columns3 .columns3_col_box_2,
  #page28_columns3 .columns3_col_bg_0,
  #page28_columns3 .columns3_col_bg_1,
  #page28_columns3 .columns3_col_bg_2 {
    width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  /* the 80/160px diagonal offsets are a three-across composition; stacked they are dead space */
  #page28_columns3 .columns3_col_box_1, #page28_columns3 .columns3_col_box_2,
  #page28_columns3 .columns3_col_bg_1, #page28_columns3 .columns3_col_bg_2 {
    margin-top: 0 !important;
  }
  #page28_image1 img, #page28_image2 img, #page28_image3 img {
    height: auto !important; aspect-ratio: 3 / 2;
  }
  #page28_container2.container2_wp_outer { padding: 20px 0 26px !important; }
  #page28_container12.container12_wp_outer { padding: 44px 0 40px !important; }

  /* one column: the two promo pictures go back to full width */
  #page28_image7.image7_wp_outer, #page28_image9.image9_wp_outer {
    float: none !important; width: 100% !important; padding: 0 !important;
  }

  /* "Ver mapa interativo" wrapped to two lines inside its pill and covered the middle of a 150px
     map. One line, smaller, clear of the marker. */
  .mece-embed-play { font-size: 13px; padding: 8px 13px; white-space: nowrap; }

  .mece-legal { margin: 34px auto 56px; }
  .mece-legal h1.title { font-size: 30px !important; }
  .mece-legal h2 { font-size: 23px; }
}

/* ---------- /estetica section jumps ----------
   The four picture tiles under the intro link to #Rosto / #Corpo / #Sec3. Camilyo animated that
   scroll from its bundle (scroolSmooth, 1000ms); the bundle is gone, so the browser supplies the
   glide instead. Site-wide because it costs nothing and no other page has fragment links.
   scroll-margin-top keeps the section title clear of the top edge on landing. */
html { scroll-behavior: smooth; }
#Rosto, #Corpo, #Sec3 { display: block; scroll-margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   FIX-2 PASS — from the independent page-by-page review, at 1440 and at 390.
   ========================================================================== */

/* ---------- the hero showed an invented clinic, under an invitation to visit this one ----------
   The band's caption is "Venha conhecer as nossas instalações" and it sat over /img/gen/b357.jpg,
   a GENERATED modern interior that looks nothing like the real reception photographed 1500px
   lower on the same page. Decorative topic photography is inside the authoring policy; a room
   presented as THIS clinic's room is a verifiable claim about the business, and it is one a
   visitor disproves by scrolling. The band now carries the clinic's own reception photo from the
   archive (/img/630). That file is 447x335 against a 1600px band, so it is deliberately
   soft-focused behind the scrim instead of upscaled sharp - softness reads as depth of field,
   a 3.6x stretch reads as a broken image. Pseudo-elements rather than filter: on the band itself,
   because filter applies to the whole box and would have blurred the heading with it.

   FIX-3 ADDENDUM: this fix had been written for the homepage band only, and b357.jpg is used by
   TWO bands - .page28_container1_swp_outer_bg (/) and .page76_container1_swp_outer_bg (/faq).
   /faq was therefore still painting the invented interior, full-size and sharp, which is why the
   previous review could report the file as "shipped but never painted": it checked one page. Both
   selectors now carry the same treatment, so the generated room is gone from the render and the
   file can be deleted from img/gen/ rather than travelling with the delivery.

   FIX-4 ADDENDUM, and the reason the selector list below is now the WHOLE list rather than the
   bands that happened to be reported: the fix-3 pass swept the two bands that shared b357.jpg and
   assumed that was the defect class. It was not. SIX page-title bands on this site were generated
   interiors, one file each, so deleting b357 fixed two pages and left four painting a different
   invented room - .page52_ (/saude, b352), .page74_ (/estetica, b351), .page75_ (/novidades,
   b353) and .page53_container2_ (/contacte-nos, b363, the worst of them: an empty pale-oak
   reception under the word "Contacte-nos", on the one page a visitor opens to decide whether to
   walk in). A second harm followed from the partial sweep: the site was showing two different
   hero treatments, so clicking through the nav read as an unfinished theme.

   All six bands now carry the identical treatment - the clinic's own archived reception
   (/img/630-54476e5b.jpeg) blurred behind the scrim - and all four remaining img/gen/b3*.jpg are
   deleted from the delivery with their url() removed from the pages' inline CSS rather than left
   dangling. The band selector is the FULL set on purpose: if a seventh band is ever added it must
   join this list, because the rule this site keeps breaking is "fixed the page it was reported on
   and left the siblings". */
.page28_container1_swp_outer_bg,
.page76_container1_swp_outer_bg,
.page52_container1_swp_outer_bg,
.page74_container1_swp_outer_bg,
.page75_container1_swp_outer_bg,
.page53_container2_swp_outer_bg {
  position: relative; overflow: hidden;
  background-image: none !important; background-color: #22332f;
}
.page28_container1_swp_outer_bg::before,
.page76_container1_swp_outer_bg::before,
.page52_container1_swp_outer_bg::before,
.page74_container1_swp_outer_bg::before,
.page75_container1_swp_outer_bg::before,
.page53_container2_swp_outer_bg::before {
  content: ""; position: absolute; inset: -30px;
  background: url(/img/630-54476e5b.jpeg) center center / cover no-repeat;
  filter: blur(5px) saturate(1.04); transform: scale(1.03);
}
.page28_container1_swp_outer_bg::after,
.page76_container1_swp_outer_bg::after,
.page52_container1_swp_outer_bg::after,
.page74_container1_swp_outer_bg::after,
.page75_container1_swp_outer_bg::after,
.page53_container2_swp_outer_bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(20, 28, 26, .46), rgba(20, 28, 26, .60));
}
.page28_container1_swp_outer_bg > *,
.page76_container1_swp_outer_bg > *,
.page52_container1_swp_outer_bg > *,
.page74_container1_swp_outer_bg > *,
.page75_container1_swp_outer_bg > *,
.page53_container2_swp_outer_bg > * { position: relative; z-index: 2; }

/* ---------- /faq: a titled band with nothing in it ----------
   #page76_container8 was 1440x158 of painted grey whose whole content was <h3>Cirurgia Geral</h3>:
   the surgical gallery under it was rightly not generated, but the heading and its band stayed, so
   the page announced a section and then showed nothing - and it was the third "Cirurgia Geral" on
   the page. It now introduces the three differentiated consultations that follow it, which is what
   the band was always sitting above, so the title stops repeating and starts working. */
#page76_title6.title6_wp_outer { margin-bottom: 22px !important; }
.mece-band-lead {
  max-width: 880px; margin: 0 auto; text-align: center;
  font-family: Quicksand, sans-serif; font-size: 17px; color: #4a4a4a;
}
.mece-band-lead strong { color: #22332f; }
/* the lead now ends on a cross-link to /contacte-nos/, and the theme gives an <a> inside a
   grey band no colour of its own, so it read as plain text. Same treatment as every other
   authored link on this site. */
.msgwebcontainer .mece-band-lead a { color: #a35700; text-decoration: underline; }

/* ---------- /novidades: three photos fused into one 1100px strip ----------
   Under "Microblading" the three pictures stacked edge to edge at both widths and the heading
   below butted onto the third, so the set read as one torn image. They are a set, so they are laid
   out as one - three across on desktop, one under another with real gaps on a phone. The id
   selectors are needed to outrank the earlier stacked-layout rules in this same file. */
.mece-photo-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 18px; margin: 18px 0 30px;
}
#page75_image20, #page75_image19, #page75_image8 {
  margin: 0 !important; width: auto !important; min-height: 0 !important;
  flex: 0 0 auto; max-width: 100%;
}
/* The three files here are now the clinic's OWN archived pictures, and they do not share an
   aspect ratio: a square before/after, a 1.47:1 service banner and a 0.55:1 portrait collage. The
   previous rule cropped every one of them to 320x216 with object-fit:cover, which was harmless on
   three generated photographs of the same shape and would now cut the burnt-in wording off two
   banners. Equal HEIGHT, natural width, no cropping: the row still reads as one set, and nothing
   the clinic published gets sliced. 270px keeps the widest trio (270+398+147+gaps) inside the
   ~1000px content column. */
#page75_image20 img, #page75_image19 img, #page75_image8 img {
  height: 270px; width: auto !important; max-width: 100% !important;
  object-fit: contain; margin: 0 !important; display: block;
}
/* the phone case for this row is set once, in the FIX-3 @media block further down this file */

/* ---------- /novidades: two card titles had been concatenated ---------- */
.mece-card-kicker {
  text-align: center; font-family: Quicksand, sans-serif; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase; color: #EF8000; margin: 2px 0 6px;
}

/* ---------- /404: the footer floated in the middle of a tall screen ----------
   Content plus footer ended at ~990px, so anything taller showed a flat white void under it. The
   shell is one wrapper per page, so pushing the footer down is a flex column on that wrapper; it
   is scoped to the 404 body class because every other page is taller than the viewport anyway. */
body.mece-404-page > .msgwebcontainer {
  min-height: 100vh; display: flex; flex-direction: column;
}
/* and the message itself is centred in whatever space is left, so a tall screen reads as a
   deliberately airy page rather than as content that stopped early */
body.mece-404-page > .msgwebcontainer > [id*="Middle"] {
  flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center;
}
body.mece-404-page > .msgwebcontainer > [id*="Footer"] { margin-top: auto; }

/* ---------- /estetica: the promotion's own artwork is unreadable ----------
   "Descontos em Packs de Tratamentos de Corpo" is pale grey-green on a light skin-tone photograph,
   a few pixels tall on a phone. The PNG is the site's own and is kept exactly as published; the
   same words are re-set underneath it in live text, so the offer is legible without repainting
   anybody's artwork. */
.mece-banner-caption {
  max-width: 760px; margin: 14px auto 0; text-align: center;
  font-family: Quicksand, sans-serif;
}
/* the theme colours runs of text through palette classes on ancestors, so the caption needs its
   own colours stated at a specificity those cannot outrank - without this the five treatment
   names came out in three different colours, one per run */
.msgwebcontainer .mece-banner-caption,
.msgwebcontainer .mece-banner-caption * { color: #4a4a4a !important; }
.msgwebcontainer .mece-banner-caption b {
  display: block; font-family: "Josefin Slab", serif; font-size: 22px;
  font-weight: normal; color: #22332f !important; margin-bottom: 6px;
}
.msgwebcontainer .mece-banner-caption span { color: #a35700 !important; font-size: 15px; }

@media (max-width: 980px) {
  /* The FULL set of six, not a subset. This rule listed only / and /faq for three review rounds,
     which is why an independent reviewer measured the /faq band at 80.1 mean luminance against
     88.8-89.1 on /saude, /estetica, /novidades and /contacte-nos: same photograph, same page
     template, two different scrims depending on which page someone happened to fix. Deepening the
     scrim only ever helps the white heading over it, so the whole set gets the phone value. */
  .page28_container1_swp_outer_bg::after,
  .page76_container1_swp_outer_bg::after,
  .page52_container1_swp_outer_bg::after,
  .page74_container1_swp_outer_bg::after,
  .page75_container1_swp_outer_bg::after,
  .page53_container2_swp_outer_bg::after {
    background: linear-gradient(rgba(20, 28, 26, .56), rgba(20, 28, 26, .66));
  }
  #page75_image20, #page75_image19, #page75_image8 { flex: 1 1 100%; max-width: 100%; }
  /* One per row on a phone, each at its own natural shape. This used to say height:200px, which
     was fine while all three were 350x229 generated photographs and is wrong now that they are the
     clinic's own archived pictures: 200px tall printed the 327x600 lash collage 109px wide, a
     column of unreadable thumbnails down the middle of the screen. Full column width, no crop. */
  /* No max-height here on purpose: every one of these imgs carries an inline
     style="max-width:100%;max-height:100%" from the Camilyo export, and an inline declaration
     beats any stylesheet rule without !important - a max-height added here would look like it was
     doing something and would not be. Natural size, capped at the column width, centred. */
  #page75_image20 img, #page75_image19 img, #page75_image8 img {
    height: auto; width: auto !important; max-width: 100% !important; margin: 0 auto !important;
  }
}

/* ==========================================================================
   FIX-3 PASS — the previous pass fixed each defect on the ONE page it was
   reported on and left the sibling pages using the same template broken.
   Every rule below is written against the class, not against one page.
   ========================================================================== */

/* ---------- short pages ended in a flat white void ----------
   The 404 got a viewport-height wrapper last round and /contacte-nos did not, so the site had
   exactly one page whose footer stopped at y=1713 on a 2200px screen - which reads as an oversight
   rather than as a page that happens to be short. The wrapper is now keyed on .mece-short-page so
   any future short page opts in by adding one class instead of by copying a rule.
   /contacte-nos deliberately does NOT get the 404's vertical centring: it has real content (map,
   address, hours) that belongs at the top of the page, and only the footer needs pushing down.

   FIX-4: the policy pages are now in the same rule. /politica-de-cookies was leaving 37px of white
   under its footer on a 2200px screen - too small to notice on its own, but it meant the site gave
   THREE different answers to "what happens when the page is shorter than the window" (404 centres,
   /contacte-nos pins, policy pages neither), and three answers read as unfinished where one reads
   as a decision. /politica-de-privacidade is taller than any window, so min-height:100vh is inert
   there and the rule costs it nothing. */
body.mece-short-page > .msgwebcontainer,
body.mece-policy-page > .msgwebcontainer {
  min-height: 100vh; display: flex; flex-direction: column;
}
body.mece-short-page > .msgwebcontainer > [id*="Middle"],
body.mece-policy-page > .msgwebcontainer > [id*="Middle"] { flex: 1 0 auto; }
body.mece-short-page > .msgwebcontainer > [id*="Footer"],
body.mece-policy-page > .msgwebcontainer > [id*="Footer"] { margin-top: auto; }

/* ---------- /novidades: the kicker the last pass introduced was centred alone ----------
   Splitting the run-on card title into an h4 plus a kicker was right, but the kicker kept the
   theme's centred default inside a card whose title, lead and body are all flush left, so it read
   as a stray caption floating in the column. It is a label for the title above it, so it starts
   where the title starts. */
.msgwebcontainer .mece-card-kicker { text-align: left; }

/* ---------- the policy pages: justified legal copy opens rivers on a phone ----------
   The theme justifies every text block (.msgbody, plus one id rule per block on /politica-de-
   cookies). At 1440 that is merely loose; at 390, with no hyphenation and 60-character measures,
   single lines open word gaps three to four times normal for the whole length of the page. Ragged
   right is the correct setting at this measure. Scoped to the two policy pages - they are the only
   ones with multi-screen runs of body copy - and forced with !important because the theme states
   the same property at id specificity, which a body-class rule cannot outrank. */
@media (max-width: 700px) {
  body.mece-policy-page,
  body.mece-policy-page [id*="htmltext"],
  body.mece-policy-page [class*="htmltext"] { text-align: left !important; }
}


/* ---------- /novidades: three promotions that were a heading and a picture ----------
   "Mesoterapia", "Microblading" and "Limpeza de pele + peeling ultrassonico" each announced a
   treatment and then showed nothing but an image - the empty-block pattern the client rejected
   the batch for. Each now carries a body, so the lead needs the same measure and centring as the
   30px promo headings it sits under; it is the /faq band-lead treatment, scoped to this page's
   promo column. Left-aligned on a phone, where a centred paragraph at a 40-character measure
   turns into a ragged diamond. */
.mece-promo-lead {
  max-width: 820px; margin: 0 auto 26px; text-align: center;
  font-family: Quicksand, sans-serif; font-size: 16px; line-height: 1.65; color: #4a4a4a;
}
.mece-promo-lead p { margin: 0; }
.msgwebcontainer .mece-promo-lead strong { color: #22332f; }
.msgwebcontainer .mece-promo-lead a { color: #a35700; text-decoration: underline; }
@media (max-width: 700px) {
  .mece-promo-lead { text-align: left; padding: 0 14px; font-size: 15px; }
}

/* ---------- Hit area: 24px is the floor for anything a finger has to land on -------------------
   WCAG 2.5.8 sets 24x24 CSS px as the minimum and 2.5.5 asks for 44. Two shapes fail here.

   Every link in the page body is `display:inline`, so its border box is the height of its glyphs -
   the phone numbers are 75x16 - even though the line box around them is 19-24px. Vertical padding
   on an INLINE box enlarges the border box, and with it the hit target, without changing the line
   box height, so no spacing on the page moves.

   The gallery dots were 11x11, which is the defect the client described as arrows too small for a
   finger. The dot must keep its 11px look, so the button becomes a 24px hit area and the dot
   itself is drawn by a pseudo-element inside it. The row is laid out with gap:0 because the box
   now carries the spacing the gap used to provide. */
div[class*="_wp_outer"] a,
span.plt_font_10 > a,
.content-wraparea a { padding-block: 5px; }

.msgwebcontainer .mece-dots,
.mece-dots { gap: 0; }
.mece-dots button {
  width: 24px; height: 24px; padding: 0;
  border: 0; background: transparent; border-radius: 0;
  position: relative;
}
.mece-dots button::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid #EF8000; background: transparent;
}
.msgwebcontainer .mece-dots button[aria-selected="true"],
.mece-dots button[aria-selected="true"] { background: transparent; }
.mece-dots button[aria-selected="true"]::before { background: #EF8000; }