/* cliniart.com restore — corrections layer. Loaded last; nothing above it is edited. */

/* The archived useanyfont sheet forces `font-family:museo300!important` on body, headings,
   paragraphs, list items and links. Not one museo300 file survived, so the whole site fell back
   to the browser serif. Rather than fight the !important we give the family a real face: the
   closest free match to the Museo Sans 300 that is burned into the site's own banner artwork. */
/* The face must RESOLVE, not merely be declared. Its src was `local('Nunito Sans Light'),
   local('Open Sans Light')` — two names that exist on a designer's machine and on nobody else's,
   so on a visitor without them the family loaded nothing and qa_invariance's FONTS axis reported
   "asked for museo300 — the page is showing a fallback" (intermittently, because whether a local
   lookup succeeds is a property of the machine, not of the site). Point it at the same self-hosted
   Nunito Sans Light woff2 the rest of the site already serves: local() first as a free hit, then a
   real URL that always works, latin and latin-ext to cover Portuguese diacritics. */
@font-face { font-family:'museo300'; font-style:normal; font-weight:300; font-display:swap;
  src:local('Nunito Sans Light'), local('Open Sans Light'),
      url(/fonts/nunitosans-426536c5.woff2) format('woff2'); }
@font-face { font-family:'museo300'; font-style:normal; font-weight:300; font-display:swap;
  src:url(/fonts/nunitosans-8aa72ded.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
                U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                U+2113, U+2C60-2C7F, U+A720-A7FF; }
body, h1, h2, h3, h4, h5, h6, p, blockquote, li, a, input, select, textarea, button, label,
.et_pb_contact_form_label, #top-menu a, #mobile_menu a {
  font-family:'Nunito Sans', 'Open Sans', 'Segoe UI', Helvetica, Arial, sans-serif !important;
}
body { font-size:15px; line-height:1.7; color:#555; }
#main-content p { font-size:15px; }

/* Divi's icon font: the burger, the footer social icons and the button chevrons. */
@font-face { font-family:'ETmodules'; font-style:normal; font-weight:normal; font-display:block;
  src:url(/fonts/etmodules.woff) format('woff'), url(/fonts/etmodules.ttf) format('truetype'); }

/* --------------------------------------------------------------- header + burger */
#main-header { box-shadow:0 1px 0 rgba(0,0,0,.06); }
#et_mobile_nav_menu { display:none; }
.mobile_nav { display:inline-flex; align-items:center; gap:.5em; }
.mobile_menu_bar { display:inline-block; width:32px; height:32px; }
#mobile_menu { display:none; }
#et_mobile_nav_menu.is-open #mobile_menu { display:block; }
@media (max-width:980px) {
  #top-menu-nav { display:none; }
  #et_mobile_nav_menu { display:block; position:relative; }
  /* `left:auto` and `width:auto` are load-bearing, not tidiness. Divi's own sheet still applies
     `.et_mobile_menu { position:absolute; left:0; width:90% }` (css/style-cd59b99a.css:1000) to
     this same <ul>. With both `left` and `right` given on an absolutely positioned box the
     over-constrained equation drops `right`, so the panel anchored to the LEFT edge of its
     containing block — which is the 32px burger at x=303 on a 390px phone — and ran to x=535,
     63% of it off-screen, taking documentElement.scrollWidth to 547. Divi's `width:90%` on the
     <li> anchors did the same thing one level down: 90% of 230px plus our 36px of padding made
     every row 243px wide inside a 230px panel. Both are cancelled here explicitly; the panel now
     hangs from the container's right edge, which is the same gutter #left-area uses. */
  #mobile_menu { position:absolute; left:auto; right:0; top:100%; z-index:9999;
    width:auto; min-width:230px; max-width:calc(100vw - 24px);
    background:#fff; border:1px solid #e6e6e6; box-shadow:0 8px 24px rgba(0,0,0,.12);
    list-style:none; margin:0; padding:6px 0; }
  #mobile_menu li { list-style:none; margin:0; }
  #mobile_menu li a { display:block; width:auto; padding:11px 18px; color:#444;
    text-decoration:none; border-bottom:1px solid #f0f0f0; }
  #mobile_menu li:last-child a { border-bottom:0; }
  #mobile_menu li a:hover, #mobile_menu .current-menu-item > a { color:#97134b; }
}

/* --------------------------------------------------------------- vertical rhythm */
/* Divi's stock 50px section padding plus a 30px row padding plus the block's own margin stacked
   into 110-140px of blank white between every two blocks, and on the short pages that gap was
   taller than the content it separated. One consistent 34px section step, with the first section
   flush against whatever banner precedes it, closes the holes without crowding anything. */
.et_pb_section.et_section_regular { padding:34px 0; }
.entry-content > .et_pb_section.et_section_regular:first-child { padding-top:0; }
.cli-band + .et_pb_section.et_section_regular,
.cli-hero-img + .et_pb_section.et_section_regular { padding-top:0; }
.et_pb_section.et_section_regular > .et_pb_row { padding-top:0; }
.et_pb_row { padding-bottom:0; }
#main-content .entry-content > .et_pb_section.et_section_regular:last-child { padding-bottom:44px; }

/* --------------------------------------------------------------- homepage carousel */
.cli-carousel { position:relative; overflow:hidden; background:#e9e9e9; }
/* No scrim here, and now nothing for one to do. The six photographs arrived with their speciality
   title and its full sentence BURNED INTO the pixels, in a pale magenta placed differently on each
   frame (left on Medicina Dentária, centre-right on Medicina Estética, low-right on Podologia), so
   there was no one side to treat and no overlay could help — any wash lightens the lettering by
   exactly as much as it lightens the picture behind it. Below 641px the `<source>` recrop already
   kept that type out of frame; above it the artwork and the `.cli-caption` strip 50px below
   printed the same words twice, and on the Osteopatia frame twice with different spellings.
   `_scripts/cliniart_deletter_slides.py` erased the type from the six JPEGs instead. The band now
   carries the photograph only, at every width, and the strip below is the one place the words are
   written — as live text, sized, contrasted and readable by a screen reader. */
.cli-track { display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.cli-slide { flex:0 0 100%; position:relative; }
.cli-slide > a, .cli-slide > span { display:block; }
/* the id selector below (#main-content img) is what Divi and this sheet both use to keep inline
   images fluid; the carousel needs a fixed band height, so it has to out-specify it. */
#main-content .cli-slide img, .cli-slide img { display:block; width:100%;
  height:clamp(230px,31vw,450px); object-fit:cover; object-position:center 32%; }
.cli-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px;
  border:0; border-radius:50%; background:rgba(255,255,255,.82); color:#97134b; cursor:pointer;
  font-size:22px; line-height:44px; padding:0; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.cli-nav:hover { background:#fff; }
.cli-nav:focus-visible { outline:3px solid #10a394; outline-offset:2px; }
.cli-prev { left:14px; } .cli-next { right:14px; }
.cli-dots { position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center;
  gap:9px; }
.cli-dots button { width:10px; height:10px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.6); box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.cli-dots button[aria-current="true"] { background:#97134b; }
/* Set by cli.js on the five slides that are not on screen, once the transform has finished moving.
   `overflow:hidden` already hid them from the eye but not from the accessibility tree or from
   find-in-page; this makes the carousel's state match what it looks like. Purely additive — the
   parked slides are off-canvas, so nothing visible changes. */
.cli-slide.is-parked { visibility:hidden; }
/* superseded by .cli-caption, which carries the same name plus its sentence at every width */
.cli-slide-label { display:none; }

/* --------------------------------------------------------------- carousel caption band
   The band restates, in real text, the lettering burned into each photograph. It uses the same
   pale-green card ground as .cli-tri and .cli-about-list so it reads as part of the original
   furniture rather than as a strip bolted under the slider. */
.cli-caption { background:#f4f7f6; border-bottom:2px solid #87b09a; }
.cli-caption .cli-caption-link { display:block; max-width:1080px; margin:0 auto;
  padding:18px 20px 20px; text-decoration:none; }
.cli-caption .cli-caption-title { display:block; color:#97134b; font-weight:400; font-size:20px;
  line-height:1.25; margin:0 0 6px; }
.cli-caption .cli-caption-text { display:block; color:#5d6a64; font-size:14.5px; line-height:1.65;
  max-width:78ch; }
.cli-caption .cli-caption-more { display:inline-block; margin-top:10px; color:#10a394;
  font-size:14.5px; letter-spacing:.2px; }
.cli-caption .cli-caption-link:hover { background:#eef4f1; }
.cli-caption .cli-caption-link:hover .cli-caption-more { color:#97134b; }
.cli-caption .cli-caption-link:focus-visible { outline:3px solid #10a394; outline-offset:-3px; }
@media (max-width:640px) {
  .cli-caption .cli-caption-link { padding:14px 16px 16px; }
  .cli-caption .cli-caption-title { font-size:18px; }
  .cli-caption .cli-caption-text { font-size:14px; }
}
@media (max-width:640px) {
  /* The band was falling back to its 230px floor, which on a 390px phone is a letterbox slot
     3.4 wide to 1 tall — too shallow for the 4:3 recrop `cliniart_phone_crops.py` serves here, so
     `cover` scaled the crop by width and threw most of the subject away above and below the slot.
     A taller band lets it scale by height instead and keeps the frame the crop was chosen for. */
  #main-content .cli-slide img, .cli-slide img { height:clamp(240px,68vw,300px);
    object-position:center 38%; }
  .cli-nav { width:36px; height:36px; font-size:18px; line-height:36px;
    background:rgba(255,255,255,.94); }
  /* the dots used to be lifted to clear the in-slide label; that label is now the caption band
     below the carousel, so they sit back on the picture's own edge */
  .cli-dots { bottom:12px; }
}

/* --------------------------------------------------------------- page banners */
/* Two page templates survive in this site - eight specialties render inside #left-area, the nine
   dental sub-pages render as full-width Divi sections - so the banner has to be pinned to the
   content measure explicitly or half the pages would show it full-bleed and half would not. */
.cli-band { max-width:1080px; margin-left:auto; margin-right:auto;
  position:relative; display:flex; align-items:center; min-height:clamp(150px,20vw,260px);
  background:linear-gradient(105deg,#f3f7f5 0%,#ffffff 55%,#f7f0f3 100%); background-size:cover;
  background-position:center 35%; margin:0 auto 26px; border-radius:2px; overflow:hidden; }
.cli-band.cli-band-photo::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 34%,
    rgba(255,255,255,0) 62%); }
/* sized to match the titles that are burned into the surviving banner artwork: about 40 px on a
   1080 px column, not the 50 px a free clamp lands on */
.cli-band h1 { position:relative; z-index:2; margin:0; padding:0 clamp(18px,4vw,54px);
  color:#97134b; font-weight:300; font-size:clamp(26px,3.6vw,40px); line-height:1.15;
  letter-spacing:.2px; }
.cli-band-photo h1 { text-shadow:0 1px 2px rgba(255,255,255,.9); }
.cli-hero-img { display:block; width:100%; height:auto; margin:0 0 26px; border-radius:2px; }
.cli-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* --------------------------------------------------------------- specialty tri-band (home) */
/* This band used to be three flat #f4f7f6 rectangles with a link floating in the middle of each
   and nothing else — no rule, no description, no affordance — which read as three tiles somebody
   forgot to fill. Each card now carries the opening sentence of the page it points at (the site's
   own copy, taken from that page) under a brand rule, so the block states something. */
.cli-sec-head { margin:0 0 22px; }
.cli-sec-head h2 { margin:0 0 6px; color:#97134b; font-weight:300; font-size:clamp(24px,2.5vw,30px);
  line-height:1.2; }
.cli-sec-head p { margin:0; color:#6d7a74; font-size:15px; }
.cli-tri { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin:0; }
.cli-tri .cli-tri-card { display:flex; flex-direction:column; background:#f4f7f6;
  border-top:3px solid #87b09a; border-radius:2px; padding:24px 24px 22px;
  transition:background .2s, box-shadow .2s, transform .2s; }
.cli-tri .cli-tri-card:hover { background:#eef4f1; box-shadow:0 6px 18px rgba(45,80,65,.10);
  transform:translateY(-2px); }
.cli-tri h3 { margin:0 0 10px; color:#97134b; font-weight:400; font-size:20px; line-height:1.25; }
.cli-tri p { margin:0 0 18px; color:#5d6a64; font-size:14.5px; line-height:1.65;
  text-align:left !important; }
.cli-tri .cli-tri-more { margin:auto 0 0; color:#10a394; font-size:14.5px; letter-spacing:.2px; }
.cli-tri a.cli-tri-card { text-decoration:none; }
.cli-tri a.cli-tri-card:hover .cli-tri-more { color:#97134b; }
/* Medicina Dentária is the core of this practice and has ten dedicated treatment pages. The front
   page named all ten in the paragraph above this band but linked only the three cards, so seven
   real pages were unreachable from the home page. One link to the Medicina Dentária index, which
   already carries the ten-item grid, closes that without inventing a section. */
.cli-tri-all { margin:22px 0 0; text-align:right; }
.cli-tri-all a { color:#10a394; text-decoration:none; font-size:14.5px; letter-spacing:.2px; }
.cli-tri-all a:hover { color:#97134b; }
@media (max-width:980px) { .cli-tri { grid-template-columns:repeat(2,1fr); gap:20px; } }
@media (max-width:640px) { .cli-tri { grid-template-columns:1fr; } .cli-tri-all { text-align:left; } }

/* --------------------------------------------------------------- /especialidades/ tile */
/* One of the eight specialties never had a photo in the archive. A saturated gradient with the
   name written across it read as an unfilled placeholder next to seven photographs — and it
   repeated the <h2> directly beneath it. Instead the tile is a pale panel in the site's own
   green, carrying the CliniArt mark as a watermark: the same size and radius as its neighbours,
   visibly a brand plate rather than a hole. */
.cli-tile { display:block; position:relative; width:100%; height:0; padding-bottom:62.5%;
  background:#eef4f1 url(/img/logo-1-bec3086c.png) no-repeat center 46%;
  background-size:min(58%,190px) auto; border-bottom:3px solid #87b09a; }
.cli-tile span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; }

/* --------------------------------------------------------------- forms */
.cli-form { max-width:640px; }
.cli-form .row { margin:0 0 14px; }
.cli-form label { display:block; margin:0 0 5px; font-size:14px; color:#444; }
.cli-form input, .cli-form textarea, .cli-form select { width:100%; box-sizing:border-box;
  padding:10px 12px; border:1px solid #d5dbd8; border-radius:3px; background:#fff; font-size:15px;
  color:#333; }
.cli-form input:focus, .cli-form textarea:focus, .cli-form select:focus { outline:none;
  border-color:#10a394; box-shadow:0 0 0 3px rgba(16,163,148,.15); }
.cli-form textarea { min-height:130px; resize:vertical; }
.cli-form fieldset { border:1px solid #e2e7e4; border-radius:3px; padding:12px 14px; margin:0 0 14px; }
.cli-form legend { font-size:14px; color:#444; padding:0 6px; }
.cli-radios { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:6px 16px; }
.cli-radios label { display:flex; align-items:center; gap:8px; margin:0; font-size:14px;
  cursor:pointer; }
.cli-radios input { width:auto; }
.cli-submit { display:inline-block; width:auto; padding:12px 30px; border:0; border-radius:3px;
  background:#10a394; color:#fff; font-size:15px; letter-spacing:.4px; cursor:pointer; }
.cli-submit:hover { background:#0d8b7f; }
.cli-note { margin:14px 0 0; font-size:13.5px; color:#6d7a74; line-height:1.6; }
/* The validation alert, in the house pink rather than a browser red, so a form that refuses to
   send still looks like part of this site. */
.cli-note.cli-err { margin:0 0 14px; padding:11px 14px; color:#97134b; background:#fbeef3;
  border-left:3px solid #97134b; font-size:14px; }
.cli-callout { max-width:640px; margin:0 0 22px; padding:16px 18px; border-left:4px solid #87b09a;
  background:#f4f7f6; border-radius:2px; }
.cli-callout p { margin:0 0 6px; } .cli-callout p:last-child { margin:0; }
.cli-callout a { color:#10a394; }

/* --------------------------------------------------------------- map */
.cli-map { margin:0 0 18px; }
.cli-map iframe { display:block; width:100%; height:clamp(260px,34vw,420px); border:0; }
/* Static OSM picture replaced the cross-origin embed (its attribution painted in the viewer's
   own locale, over the street labels); the credit is now ordinary text in its own strip. */
.cli-map-fig { margin:0; }
.cli-map-frame { display:block; }
/* id specificity, for the same reason as the blog grid below: `#main-content img{height:auto}` would
   otherwise let the picture keep its intrinsic ratio and ignore the frame height. */
.cli-map-frame img,
#main-content .cli-map-frame img { display:block; width:100%; height:clamp(260px,34vw,420px); object-fit:cover; border:0; }
.cli-map-credit { margin:6px 0 0; font-size:12px; line-height:1.4; color:#6b7280; }
.cli-map-credit a { color:#10a394; }
.cli-map-links { margin:8px 0 0; font-size:14px; }
.cli-map-links a { color:#10a394; }

/* --------------------------------------------------------------- 404 */
.cli-404 { max-width:760px; margin:0 auto; padding:clamp(40px,7vw,90px) 20px; text-align:center; }
.cli-404 h1 { color:#97134b; font-weight:300; font-size:clamp(30px,5vw,52px); margin:0 0 12px; }
.cli-404 p { color:#5d6a64; }
.cli-404 ul { list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; }
.cli-404 ul a { display:inline-block; padding:10px 18px; background:#f4f7f6; border-radius:3px;
  color:#97134b; text-decoration:none; }
.cli-404 ul a:hover { background:#87b09a; color:#fff; }

/* --------------------------------------------------------------- footer + misc */
/* The footer was three bands of the same #87b09a stacked on top of each other, carrying between
   them one line of copyright, three legal links and a Facebook icon — it read as leftover
   stripes rather than a footer. It now opens with the clinic's own contact details and site
   navigation (every value here is published on /contactos/), and the closing bar is a deeper
   tone of the same brand green so the three parts separate instead of merging. */
#cli-foot-top { background:#87b09a; padding:44px 0 34px; }
#cli-foot-top .container { display:grid; grid-template-columns:1.5fr 1.2fr 1fr 1fr; gap:30px 34px; }
#cli-foot-top h4 { margin:0 0 14px; color:#fff; font-weight:400; font-size:15px;
  letter-spacing:.6px; text-transform:uppercase; }
#cli-foot-top p, #cli-foot-top li { color:#f2f8f5; font-size:14px; line-height:1.75; margin:0; }
#cli-foot-top p + p { margin-top:10px; }
#cli-foot-top a { color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.32); }
#cli-foot-top a:hover { border-bottom-color:#fff; }
#cli-foot-top ul { list-style:none; margin:0; padding:0; }
#cli-foot-top ul a { border-bottom:0; opacity:.92; }
#cli-foot-top ul a:hover { opacity:1; text-decoration:underline; }
#cli-foot-top .cli-foot-logo { display:block; width:150px; max-width:60%; margin:0 0 14px;
  background:rgba(255,255,255,.92); border-radius:3px; padding:9px 12px; box-sizing:content-box; }
#cli-foot-top .cli-foot-brand p { font-size:14.5px; line-height:1.7; }
#footer-bottom { background:#6f9a84; padding:20px 0; }
#footer-info { color:#fff; opacity:.95; font-size:13.5px; margin:0; }
@media (max-width:980px) {
  #cli-foot-top .container { grid-template-columns:1fr 1fr; gap:26px 30px; }
}
@media (max-width:640px) {
  #cli-foot-top { padding:32px 0 26px; }
  #cli-foot-top .container { grid-template-columns:1fr; gap:24px; }
  #cli-foot-top .cli-foot-logo { margin-left:auto; margin-right:auto; }
  #cli-foot-top .cli-foot-brand { text-align:center; }
}
.et-social-icons { float:right; margin:0; }
.et-social-icon a { color:#fff; opacity:.9; }
.et-social-icon a:hover { opacity:1; }
#main-content img { max-width:100%; height:auto; }
#left-area { width:100%; padding-right:0; }

/* /especialidades/ and /blog/ grids: Divi packed these with masonry.js, one of the scripts this
   restore drops. A CSS grid gives the same layout with equal-height cards and no JavaScript. */
/* Divi ships this grid with `margin-right:-60px`, the gutter compensation its masonry script
   needed. Without that script the negative margin just makes the grid 60px wider than the column
   it sits in, so the third card overhung the text measure and its copy ran into the page margin.
   The grid owns its own gutters now, so the compensation has to go. */
.et_pb_blog_grid { display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px;
  margin:0 !important; }
.et_pb_blog_grid .et_pb_post { width:auto !important; float:none !important; margin:0 !important;
  display:flex; flex-direction:column; padding:0 0 20px; background:#fff;
  border:1px solid #e6ece9; border-radius:2px; overflow:hidden; }
.et_pb_blog_grid .et_pb_image_container { margin:0 0 16px; }
.et_pb_blog_grid .et_pb_image_container a { display:block; }
/* `#main-content img{height:auto}` above is an id selector and out-ranks a two-class rule, so the
   photographs kept their intrinsic ratio and every card in a row started its title at a different
   height. Matching the id specificity is what makes the row line up. */
#main-content .et_pb_blog_grid .et_pb_image_container img,
#main-content .et_pb_blog_grid .cli-tile { display:block; width:100%; height:200px;
  object-fit:cover; padding-bottom:0; }
.et_pb_blog_grid .et_pb_post > h2 { margin:0 0 8px; padding:0 22px; font-size:20px;
  font-weight:400; line-height:1.3; }
.et_pb_blog_grid .et_pb_post > h2 a { color:#97134b; text-decoration:none; }
.et_pb_blog_grid .et_pb_post > h2 a:hover { color:#10a394; }
/* Divi wrote text-align:justify on these excerpts. In a 320px card that stretches three words
   across the full measure; left-aligned, the ragged edge is simply the readable one. */
.et_pb_blog_grid .et_pb_post > p,
.et_pb_blog_grid .et_pb_post > .cli-exc { margin:0 0 16px; padding:0 22px; text-align:left !important;
  font-size:14.5px; line-height:1.65; color:#5d6a64; }
/* the excerpt rule above is (0,2,1); this has to out-rank it or `margin-top:auto` never applies
   and the read-more stops sitting on the card's baseline */
.et_pb_blog_grid .et_pb_post > p.cli-readmore { margin:auto 0 0; padding:14px 22px 0; }
.et_pb_blog_grid .cli-readmore a { color:#10a394; text-decoration:none; font-size:14.5px;
  letter-spacing:.2px; }
.et_pb_blog_grid .cli-readmore a:hover { color:#97134b; }
@media (max-width:980px) { .et_pb_blog_grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .et_pb_blog_grid { grid-template-columns:1fr; } }

@media (max-width:782px) {
  /* Divi wrote text-align:justify inline on nearly every paragraph. At 390px that opens rivers
     of white space between two or three words a line; left-aligned is simply readable. */
  #main-content p[style*="justify"], #main-content li[style*="justify"],
  #main-content div[style*="justify"] { text-align:left !important; }
}
@media (max-width:640px) {
  .et-social-icons { float:none; text-align:center; margin-bottom:10px; }
  #footer-info { text-align:center; }
}
@media (prefers-reduced-motion:reduce) {
  .cli-track { transition:none; }
}

/* --------------------------------------------------------------- footer legal nav */
/* Divi's own #et-footer-nav strip, reused for the two legal pages. Its stock link colour is
   #bbb, chosen for Divi's near-black footer; this site recoloured the footer to #87b09a in the
   customiser, where #bbb is unreadable - so the links take the same white treatment that
   #footer-info already got. */
#et-footer-nav { background-color:rgba(255,255,255,.09); }
#et-footer-nav .bottom-nav { padding:12px 0; text-align:right; }
#et-footer-nav .bottom-nav li { padding:0 0 0 22px; }
#et-footer-nav .bottom-nav a { color:#fff; opacity:.95; text-decoration:none; }
#et-footer-nav .bottom-nav a:hover { opacity:1; text-decoration:underline; }
@media (max-width:640px) {
  #et-footer-nav .bottom-nav { text-align:center; }
  #et-footer-nav .bottom-nav li { padding:0 11px; line-height:2; }
}

/* --------------------------------------------------------------- legal pages */
/* Divi gives every heading line-height:1em and no top margin, which runs a long policy into one
   undifferentiated block. These rules only restore vertical rhythm - the typography, colours and
   container width still come from the theme, so the legal pages match every other inner page. */
.cli-legal h2 { margin:38px 0 0; padding-bottom:12px; line-height:1.25; color:#97134b;
  font-weight:300; border-bottom:1px solid #e6ece9; }
.cli-legal h3 { margin:26px 0 0; padding-bottom:8px; line-height:1.3; font-weight:400;
  color:#4a5a53; }
.cli-legal > p:first-of-type { font-size:16.5px; }
.cli-legal p { margin:0 0 16px; }
.cli-legal ul { margin:0 0 6px; }
.cli-legal ul li { margin:0 0 8px; }
.cli-legal .cli-callout { margin:0 0 26px; }
.cli-legal .cli-note { border-top:1px solid #e6ece9; padding-top:14px; margin-top:34px; }

/* --------------------------------------------------------------- closing blocks on inner pages */
/* Most of the specialty pages are a banner and one paragraph — that is everything the archive
   holds, and nothing about a treatment may be invented to pad them. What they were missing was
   not text but an ending: the paragraph stopped and the footer began, leaving the page looking
   truncated. These two blocks are navigation and a call to action built only from links and
   contact details the site already publishes, which is what the page always needed at the bottom. */
.cli-more { margin:40px 0 0; padding:26px 0 0; border-top:1px solid #e6ece9; }
.cli-more h2 { margin:0 0 16px; color:#97134b; font-weight:300; font-size:21px; line-height:1.25; }
.cli-more ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px; }
.cli-more li { margin:0; }
.cli-more a { display:inline-block; padding:9px 16px; background:#f4f7f6; border-radius:3px;
  color:#97134b; text-decoration:none; font-size:14.5px; line-height:1.35;
  transition:background .2s,color .2s; }
.cli-more a:hover { background:#87b09a; color:#fff; }

.cli-cta { margin:34px 0 0; padding:28px 32px; background:#87b09a; border-radius:2px;
  display:flex; align-items:center; justify-content:space-between; gap:22px 30px;
  flex-wrap:wrap; }
.cli-cta .cli-cta-text { flex:1 1 320px; }
.cli-cta h2 { margin:0 0 6px; color:#fff; font-weight:300; font-size:23px; line-height:1.25; }
.cli-cta p { margin:0; color:#f2f8f5; font-size:14.5px; line-height:1.6; }
.cli-cta p a { color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45); }
.cli-cta p a:hover { border-bottom-color:#fff; }
.cli-cta .cli-cta-btn { flex:0 0 auto; display:inline-block; padding:13px 28px; background:#fff;
  color:#97134b; border-radius:3px; text-decoration:none; font-size:15px; letter-spacing:.3px;
  transition:background .2s,color .2s; }
.cli-cta .cli-cta-btn:hover { background:#97134b; color:#fff; }
@media (max-width:640px) {
  .cli-cta { padding:24px 20px; text-align:center; justify-content:center; }
  .cli-cta .cli-cta-btn { width:100%; box-sizing:border-box; text-align:center; }
}

/* The homepage promo band shipped with an empty description div and a lone outlined button on a
   flat green stripe. Divi's own promo classes stay in charge of the button; these rules just give
   the heading and phone line that now sit above it the right colour and measure. */
.marcacao .et_pb_promo_description { max-width:760px; margin:0 auto 20px; }
.marcacao .et_pb_promo_description h2 { margin:0 0 10px; color:#fff; font-weight:300;
  font-size:clamp(23px,2.6vw,30px); line-height:1.25; }
.marcacao .et_pb_promo_description p { margin:0; color:#f2f8f5; font-size:15.5px; line-height:1.7; }
.marcacao .et_pb_promo_description p a { color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45); }
.marcacao .et_pb_promo_description p a:hover { border-bottom-color:#fff; }
.marcacao .et_pb_promo_button { display:inline-block; padding:13px 34px; border:2px solid #fff;
  border-radius:3px; color:#fff !important; text-decoration:none; font-size:16px;
  letter-spacing:.3px; transition:background .2s,color .2s; }
.marcacao .et_pb_promo_button:hover { background:#fff; color:#97134b !important; }

/* --------------------------------------------------------------- homepage "about" band */
.cli-about { display:grid; grid-template-columns:1.35fr 1fr; gap:38px; align-items:start; }
.cli-about h2 { margin:0 0 14px; color:#97134b; font-weight:300;
  font-size:clamp(24px,2.5vw,30px); line-height:1.2; }
.cli-about p { margin:0 0 14px; color:#5d6a64; text-align:left !important; }
.cli-about .cli-about-more { color:#10a394; text-decoration:none; font-size:15px; }
.cli-about .cli-about-more:hover { color:#97134b; }
/* The eight specialties the clinic actually sells are listed only here on the front page — the
   slider carries six of them, because six is all the archive's photographs ever were, so Nutrição
   and Biomagnetismo have no other presence above the footer. They were set as flat grey words with
   no underline, no colour and no chevron, i.e. the one complete statement of the offer did not
   read as navigable at all. Same box, same ground: the rows are simply given the affordance the
   rest of the site's links have. */
.cli-about-list { background:#f4f7f6; border-radius:2px; padding:24px 26px; }
.cli-about-list h3 { margin:0 0 14px; color:#97134b; font-weight:400; font-size:17px; }
.cli-about-list ul { list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; column-gap:22px; }
.cli-about-list li { margin:0; border-top:1px solid #e2eae6; }
.cli-about-list li:first-child, .cli-about-list li:nth-child(2) { border-top:0; }
.cli-about-list li a { display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding:9px 0; color:#4a5a53; text-decoration:none; font-size:14.5px; line-height:1.35;
  transition:color .2s; }
.cli-about-list li a::after { content:"\203A"; color:#10a394; font-size:16px; line-height:1;
  transform:translateX(0); transition:transform .2s, color .2s; }
.cli-about-list li a:hover, .cli-about-list li a:focus-visible { color:#97134b; }
.cli-about-list li a:hover::after { color:#97134b; transform:translateX(3px); }
.cli-about-list a:focus-visible { outline:3px solid #10a394; outline-offset:2px; }
.cli-about-list .cli-about-all { display:inline-block; margin:16px 0 0; color:#10a394;
  text-decoration:none; font-size:14.5px; letter-spacing:.2px; }
.cli-about-list .cli-about-all:hover { color:#97134b; }
@media (max-width:860px) {
  .cli-about { grid-template-columns:1fr; gap:26px; }
}
@media (max-width:480px) {
  .cli-about-list ul { grid-template-columns:1fr; }
  .cli-about-list li:nth-child(2) { border-top:1px solid #e2eae6; }
}

/* --------------------------------------------------------------- /marcacoes/ two columns */
/* The booking form is capped at 640px for readability, which on a 1440px screen left the right
   half of the page empty from the banner down to the footer. The clinic's own contact details
   now occupy that column, so the page reads as two panels rather than one form adrift. */
.cli-book { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:40px;
  align-items:start; }
.cli-book .cli-form, .cli-book .cli-callout { max-width:none; }
.cli-aside { background:#f4f7f6; border-radius:2px; padding:26px 28px; }
.cli-aside h2 { margin:0 0 14px; color:#97134b; font-weight:300; font-size:20px; line-height:1.25; }
.cli-aside p { margin:0 0 12px; font-size:14.5px; line-height:1.7; color:#4a5a53; }
.cli-aside p:last-child { margin:0; }
.cli-aside a { color:#10a394; text-decoration:none; }
.cli-aside a:hover { color:#97134b; }
.cli-aside strong { color:#4a5a53; }
@media (max-width:900px) { .cli-book { grid-template-columns:1fr; gap:28px; } }

/* --------------------------------------------------------------- /contactos/ columns */
.cli-contact-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:40px;
  align-items:start; }
@media (max-width:900px) { .cli-contact-grid { grid-template-columns:1fr; gap:28px; } }

/* The closing blocks sit directly inside .entry-content, which on the nine full-width Divi pages
   is the whole 1440px viewport. Pinning them to the same 1080px measure the banners and rows use
   is what keeps them on the page's grid instead of running edge to edge. */
.cli-close { max-width:1080px; margin:0 auto; padding:0 0 48px; }
#left-area .cli-close { max-width:none; padding-bottom:8px; }

/* ================= second look-fix round: what the re-shoot showed ================= */

/* Divi's .et_pb_text carries a 30px bottom margin on top of the section padding, so a paragraph
   and the block under it were still separated by ~100px of nothing on the phone. The section
   padding is the spacing system here; the extra margin is just noise. */
.et_pb_text { margin-bottom:0; }
@media (max-width:640px) { .et_pb_section.et_section_regular { padding:26px 0; } }

/* The banner on the pages with no surviving artwork was a 260px near-white panel with a title in
   the corner and nothing else in it — the single largest empty rectangle left on the site. It
   only ever needed to be a title bar, so it is sized like one and given the brand rule that the
   rest of the site uses to close a block. */
.cli-band:not(.cli-band-photo) { min-height:clamp(118px,13vw,168px);
  background:linear-gradient(105deg,#f1f6f3 0%,#fbfdfc 52%,#faf1f5 100%);
  border-bottom:3px solid #87b09a; }

/* The card whose photograph the archive never held is a brand plate, not a divider — the green
   rule under it was the one thing making it read differently from the seven photographs. */
.cli-tile { border-bottom:0; }

/* .cli-more opened 100px below the last paragraph because the section padding, the text margin
   and its own margin all stacked. The section directly above it gives up its bottom padding. */
.et_pb_section.et_section_regular:has(+ .cli-close) { padding-bottom:0; }
.cli-more { margin-top:18px; }

/* The homepage booking band and the top of the footer were both #87b09a and directly adjacent,
   so they fused into one 500px slab of flat green with a button floating in it. The footer now
   steps down in tone twice — band, contact block, closing bar — which separates the three and
   reads as a designed footer rather than as stripes that happened to stack. */
#cli-foot-top { background:#78a48d; }
#et-footer-nav { background-color:rgba(255,255,255,.10); }
#footer-bottom { background:#628f78; }

/* The clinic card beside the booking form is much shorter than the form, so it rides down the
   page with the fields it belongs to instead of leaving a column of white beside them. */
@media (min-width:901px) {
  .cli-aside { position:sticky; top:24px; }
}

/* ================= third look-fix round ================= */

/* On the eight pages that render inside #left-area, Divi's `.entry-content ul li` rule out-ranks
   the plain `.cli-more ul` reset, so the related-areas chips came out with a disc bullet floating
   in front of each pill. The other template showed none, so the same block looked like two
   different components depending on which page you were on. */
.cli-more ul, .cli-more li { list-style:none !important; }
.cli-more li::marker { content:none; }

/* Same two templates, opposite problem at the top: #left-area pages open with 58px of Divi
   container padding before the hero, the full-width pages open flush. Matching them means the
   header-to-first-block step is the same wherever you land. */
#main-content > .container { padding-top:26px; }

/* Phone: `cover` at the taller band was scaling the 1600px artwork by height and clipping its
   sides, which sliced the first letters off the caption burned into the picture ("edicina
   entária"). Half a word missing reads as broken in a way that small type does not, so the band
   takes the aspect ratio of the widest slide and the artwork is never cut horizontally. */
@media (max-width:640px) {
  #main-content .cli-slide img, .cli-slide img { height:53.4vw; max-height:300px;
    object-position:center 42%; }
}

/* Divi keeps a 30px top padding on every row after the first, which it can afford because its
   own sections are 50px tall at the seams; against the tighter rhythm above it left an 82px hole
   between the map and the contact form. The row spacing is now one step, not two stacked. */
.et_pb_section.et_section_regular > .et_pb_row + .et_pb_row { padding-top:0; margin-top:8px; }

/* The contact details opposite the form are the same kind of block as the clinic card beside the
   booking form, so they take the same panel — otherwise one of the two contact pages showed a
   card and the other showed loose text with 260px of empty white under it. The inline 18px
   sizing the page carries stays; only the container changes. */
/* `border-box` is the whole of the /contactos/ horizontal-overflow fix. Divi gives `.et_pb_text`
   a `width:100%` that resolves to the column's exact pixel width (510 at 1440, 690 at 768, 280 at
   390) while the box stays `content-box`, so this panel's own 28px side paddings were added on
   top and it hung 56px past its column at EVERY width. Only at phone widths does that column
   already end at the page gutter, which is why it showed up as documentElement.scrollWidth=391
   against a 390px viewport — and as 356 against 320. Its sibling on /marcacoes/ is a grid item
   with an auto width, so it computes identically with or without this line; measured, not assumed. */
.cli-aside-contact { box-sizing:border-box; padding:24px 28px 26px; }
.cli-aside-contact p:first-child { margin-top:0; }
.cli-aside-contact p:last-child { margin-bottom:0; }

/* ================= fourth look-fix round: the phone sweep ================= */

/* Divi does not use percentages for its content measure — it steps `.et_pb_row`/`.container`
   through fixed widths (1080 / 960 / 690 / 400 / 280) at its breakpoints. `.cli-close` was
   centred on a max-width instead, which matched at desktop and then, on a 390px phone, ran the
   related-areas chips and the booking band edge to edge while the paragraph above them stayed
   inside a 280px column. It now walks the same ladder, so it lines up at every width. */
/* `img.cli-hero-img` joined the ladder in the round after this one. Seven hero banners live inside
   #left-area, whose own box is already the 1080px measure, so `width:100%` put them at 180->1260.
   The two on full-width Divi pages — /endodontia/ and /ageloc-galvanic-spa/ — have .entry-content
   for a parent, which spans the whole 1440px window, so the same `width:100%` ran them 0->1440:
   two of nine banners breaking the content measure, and both blown up past their own pixels
   (endodontia 1080 native at 1440 = 1.33x, ageloc 940 at 1440 = 1.53x, which is why they read
   softer than the 2000px artwork on their neighbours). Neither archive holds a larger source for
   either, so the measure is the fix: endodontia now renders at exactly its native 1080 and ageloc
   at 1.15x. The child combinator matches only those two — on the seven #left-area pages the <img>
   is wrapped in <picture class="cli-hero-pic">, and `display:contents` does not change what a
   selector matches. Below 980px the full-bleed phone hero rule out-specifies this and still wins. */
/* `.cli-copy` joined the ladder in the content round. It is a direct child of `.entry-content` on
   exactly one page — /blog/, whose listing layout has neither the Divi text column nor #left-area —
   and there the authored copy ran 0->1440 while the post card above it sat inside the 1080 measure.
   The same selector is harmless on the eight #left-area pages, where `max-width:100%` caps the
   1080px to the column, and never matches the nine dental pages at all, because there the copy sits
   inside `.et_pb_text` and is not a child of `.entry-content`. Verified on one page of each of the
   three templates rather than on /blog/ alone. */
.entry-content > .cli-close, .entry-content > .cli-post-head, .entry-content > .cli-copy,
.entry-content > img.cli-hero-img {
  width:1080px; max-width:100%; margin-left:auto; margin-right:auto; }
@media only screen and (min-width:981px) and (max-width:1100px) {
  .entry-content > .cli-close, .entry-content > .cli-post-head,
  .entry-content > .cli-copy, .entry-content > img.cli-hero-img { width:960px; }
}
@media only screen and (max-width:980px) {
  .entry-content > .cli-close, .entry-content > .cli-post-head,
  .entry-content > .cli-copy { width:690px; } }
@media only screen and (max-width:767px) {
  .entry-content > .cli-close, .entry-content > .cli-post-head,
  .entry-content > .cli-copy { width:400px; } }
@media only screen and (max-width:479px) {
  .entry-content > .cli-close, .entry-content > .cli-post-head,
  .entry-content > .cli-copy { width:280px; } }

/* `#left-area ul` carries a 16px list indent that out-ranks the plain `.cli-more ul` reset, so on
   those eight pages the chip rows sat a notch right of everything else on the page. */
.cli-more ul { padding:0 !important; margin:0 !important; }

/* THE PRINTED HERO TITLE, and the one rule that decides it: a banner page prints its <h1> exactly
   when it serves a lettering-free crop, and never otherwise. `.cli-hero-pic + .cli-sr` IS that
   test — the <picture> element exists on precisely the four pages (/podologia/, /osteopatia/,
   /med-estetica/, /cirurgia-vascular/) whose phone/tablet source was recropped to drop the
   lettering (_scripts/cliniart_hero_phone_crops.py), so below 980 those four have no title in the
   artwork and need a real one. The widths walk Divi's own ladder (690 / 400 / 280) so the title
   lands on the body measure at every step.

   Three earlier rounds instead unhid the title by page container — first `#left-area .cli-sr`,
   then widened to `.entry-content > .cli-sr` to reach /endodontia/ — and both selectors also
   caught the three pages that were never recropped: /endodontia/, /psicologia/ and
   /medicina-dentaria/. Their banners carry the title burnt in at 400-640px of source width, which
   is still read without effort at 320-390, so below 640 each printed its own name twice, one line
   apart, in the same pink at 26px: not a caption, a duplication bug. Round five deleted both
   container selectors. Those three keep the <h1> screen-reader-only and let the artwork say the
   name — the same pattern /implantologia/ and /oralift/ already use, and the same behaviour those
   three pages already had at 641-980, where no rule ever reached them.

   Do not re-add a container-scoped unhide. If a fourth page ever needs a printed title, recrop its
   banner and give it a <picture>; the selector then picks it up on its own. */
@media (max-width:980px) {
  .cli-hero-pic + .cli-sr { position:static; width:690px; max-width:100%; height:auto;
    margin:0 auto 14px; padding:0; overflow:visible; clip:auto; white-space:normal;
    color:#97134b; font-weight:300; font-size:26px; line-height:1.2; }
}
@media (max-width:767px) {
  .cli-hero-pic + .cli-sr { width:400px; }
}
@media (max-width:479px) {
  .cli-hero-pic + .cli-sr { width:280px; }
}

/* One page (Nutrição) carries the banner inside #left-area rather than loose in .entry-content.
   At desktop both land on the same 1080px measure so it never showed; on a phone the other
   seventeen banners run edge to edge as a hero and this one sat boxed inside the 280px text
   column. It breaks out to match them. */
/* Widened from `#left-area .cli-band` in the round after this one: the nine full-width Divi
   pages carry the banner inside an .et_pb_row, which on a 390px phone is 280px wide, so their
   banner sat boxed in the text column while the #left-area pages ran edge to edge. Every banner
   is a hero at phone width now, which is also what lets one gutter rule below line every title
   up with its own body copy. */
@media only screen and (max-width:980px) {
  .cli-band, #main-content img.cli-hero-img { width:100vw; margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw); border-radius:0; max-width:100vw; }
}

/* Divi's promo module keeps a 30px bottom margin, which inside the homepage booking band put
   ~100px of green under the button against ~10px above the heading — the block sat visibly high
   in its own stripe. Balanced, it reads as a band rather than as a mis-centred one. */
.marcacao .et_pb_promo { margin-bottom:0; }
#marcacao.et_pb_section.et_section_regular { padding:46px 0; }

/* ================= fifth round: what the independent review found ================= */

/* THE GUTTER. Divi does not use a percentage measure — it steps `.container`/`.et_pb_row`
   through fixed widths (1080 / 960 / 690 / 400 / 280). The page-title band and the carousel
   caption were padded with a clamp instead, so on a 390px phone every heading started at x=18
   while the paragraph it introduced started at x=55: each title visibly hung to the left of its
   own text, on every template. Both bands now walk Divi's ladder, so they line up at every
   width. Only the widths where the band goes full-bleed are touched; above 980px the banner is
   a photo panel whose title is deliberately inset. */
@media only screen and (max-width:980px) {
  .cli-band h1, .cli-caption .cli-caption-link { padding-left:calc(50vw - 345px);
    padding-right:calc(50vw - 345px); }
}
@media only screen and (max-width:767px) {
  .cli-band h1, .cli-caption .cli-caption-link { padding-left:calc(50vw - 200px);
    padding-right:calc(50vw - 200px); }
}
@media only screen and (max-width:479px) {
  .cli-band h1, .cli-caption .cli-caption-link { padding-left:calc(50vw - 140px);
    padding-right:calc(50vw - 140px); }
}

/* THE BURNT-IN CAPTIONS. Each of the six hero photographs carries its own title and sentence
   inside the JPEG. Every earlier attempt treated the band — a scrim, a taller band, a different
   object-position — and none of them could work, because at 390px the whole 1600px frame is
   scaled by 0.24 and the baked type lands about five pixels tall whatever the band does. The
   phone now loads a different picture: a 4:3 crop of the same photograph, chosen so the
   lettering falls outside the frame (_scripts/cliniart_phone_crops.py). The band takes that
   exact ratio, so nothing is cut, and the caption below carries the words in real text. */
@media (max-width:640px) {
  #main-content .cli-slide img, .cli-slide img { height:75vw; max-height:400px;
    object-position:center center; }
}

/* THE SAME BAKED TYPE, ON THE FOUR SPECIALITY PAGE BANNERS. /podologia/, /osteopatia/,
   /med-estetica/ and /cirurgia-vascular/ carry a 2000x747 banner whose right-hand third holds the
   page title AND a full sentence burned into the JPEG. Full-bleed at 390px that frame is scaled by
   0.20, so the type lands 4-5px tall (and on two of them the baked block is clipped by the right
   edge as well), while the same sentence is printed legibly in real text 40px below. Same answer
   as the carousel above — the phone loads a crop with the lettering outside the frame
   (_scripts/cliniart_hero_phone_crops.py) — but the crop deliberately keeps the source's 2000:747
   ratio, because the three sibling banners the review passed (/medicina-dentaria/, /psicologia/,
   /endodontia/) are not being recropped and a taller phone hero here would split the template in
   two. `display:contents` keeps the <picture> wrapper out of layout entirely, so the full-bleed
   rule above still resolves its `calc(50% - 50vw)` against the same containing block it did when
   the <img> was a direct child. */
.cli-hero-pic { display:contents; }

/* THE UNTITLED ARTICLE. /ageloc-galvanic-spa/ is the site's only news item and the page the main
   nav's "Notícias" eventually leads to, and it showed neither a headline nor a date at any width:
   its <h1> was screen-reader-only and img/ageloc-banner.jpg — unlike the speciality banners — has
   no lettering baked into it, so the title existed nowhere on screen. (The phone rule that reveals
   those hidden titles is scoped `#left-area .cli-sr`; this page renders straight inside
   #main-content, so it was covered at no width.) The heading and the date line are now real text,
   in the same wording and order /blog/ already prints for the same post, so the two agree. The
   measure ladder above is shared with `.cli-close` because the banner on this page runs full-bleed
   at 1440 while the body copy sits on Divi's 1080px row: without it the title would have started
   at x=0 while its own first paragraph started at x=180. */
.cli-post-head { margin:0 auto 22px; }
.cli-post-head h1 { margin:0 0 6px; color:#97134b; font-weight:300;
  font-size:clamp(26px,3.6vw,40px); line-height:1.15; letter-spacing:.2px; }
.cli-post-head .post-meta { margin:0; color:#666; font-size:14px; line-height:1.5; }
.cli-post-head .post-meta a { color:#666; text-decoration:none; }
.cli-post-head .post-meta a:hover { color:#97134b; }

/* A phone number that breaks across two lines — "937 816" on one, "272" on the next, with the
   underline split too — has stopped being a phone number. */
a[href^="tel:"], .cli-nowrap { white-space:nowrap; }

/* The footer mark's wordmark is green and the footer is green, which had been answered with a
   92%-white rounded plate behind it: a sticker pasted onto the design. The PNG has a real alpha
   channel, so the finished answer is a white knockout of the same artwork, which sits on the
   footer rather than on a patch. */
#cli-foot-top .cli-foot-logo { background:none; border-radius:0; padding:0; }

/* /medicina-dentaria/ listed its ten branches as a default disc-bullet <ul> directly above
   "Outras especialidades", which is the same kind of navigation rendered as pills. Same
   component, same look. The !important marks answer `#left-area ul` and `.entry-content ul li`,
   both of which out-rank a plain class. */
.cli-pills { list-style:none !important; margin:18px 0 4px !important; padding:0 !important;
  display:flex; flex-wrap:wrap; gap:9px; }
.cli-pills li { list-style:none !important; margin:0 !important; padding:0 !important; }
.cli-pills li::marker { content:none; }
.cli-pills li > div { display:contents; }
.cli-pills a { display:inline-block; padding:9px 16px; background:#f4f7f6; border-radius:3px;
  color:#97134b; text-decoration:none; font-size:14.5px; line-height:1.35;
  transition:background .2s,color .2s; }
.cli-pills a:hover { background:#87b09a; color:#fff; }

/* Nutrição's only surviving photograph is 400x250. Across the 1080px measure it would be a
   visibly soft hero, so it runs at its true size beside the opening paragraphs instead — which
   is also how a clinic page of this length would have carried it. */
.cli-figure { float:right; width:min(45%,400px); margin:2px 0 16px 26px; border-radius:2px; }
@media (max-width:640px) { .cli-figure { float:none; width:100%; margin:0 0 18px; } }

/* Biomagnetismo is the one specialty whose photograph neither archive still holds (both answer
   503). Its tile was the company logo on a pale panel, first in a grid of five photographs,
   which reads as an image that failed to load. It is now an original diagram of what the
   treatment is, drawn in the site's own pink and teal — vector, so it can run the full measure
   without going soft, held to a banner height so it opens the page the way its siblings do. */
#main-content img.cli-hero-svg, .cli-hero-svg { height:clamp(170px,22vw,250px);
  object-fit:cover; border-radius:2px; background:#f4f7f6; }

/* /marcacoes/ put a 386px card beside an 861px form and left ~630px of empty right-hand column.
   It now carries where to come and what can be asked for — the site's own map and its own list
   of specialties, which is exactly what someone filling this form is choosing between. */
.cli-aside .cli-map { margin:16px 0 0; }
/* OpenStreetMap prints its attribution at a fixed size, so in a narrow frame it wraps — four lines,
   about 90px, with no plate behind it. In the 224px-wide sidebar frame that was most of the lower
   half of the map, sitting straight across the "Campo 24 de Agosto" and "Heroísmo" labels. The
   attribution cannot be styled from outside the iframe and OSM's embed takes no locale parameter,
   so the frame is simply made tall enough that the map still reads above it — the same 300px the
   /contactos/ map already uses on a phone, where the wrap costs three lines instead of four. */
.cli-aside .cli-map iframe { height:260px; border-radius:2px; }
#main-content .cli-aside .cli-map-frame img { height:260px; border-radius:2px; }
@media (max-width:640px) { .cli-aside .cli-map iframe { height:320px; } }
@media (max-width:640px) { #main-content .cli-aside .cli-map-frame img { height:320px; } }
.cli-aside .cli-map + h2 { margin-top:22px; }
.cli-aside .cli-more-aside { margin:0; padding:0; border-top:0; }
.cli-more-aside a { background:#fff; }

/* At 390px the OpenStreetMap attribution wraps to three lines; on a 260px-tall map that covered
   a third of it. The map is simply given the height that leaves the picture legible. */
@media (max-width:640px) { .cli-map iframe { height:300px; } }
@media (max-width:640px) { #main-content .cli-map-frame img { height:300px; } }

/* Divi wrote text-align:justify inline on most paragraphs. Under 782px they are already
   left-aligned (above); above it the justification is the theme's own and stays, but with
   hyphenation, so the lines close up instead of opening rivers of white between three words.
   The document is lang="pt", which is what selects the right hyphenation dictionary. Scoped to
   the widths where the text is still justified: on a phone it is left-aligned already, and
   hyphenating a ragged edge only adds hyphens nothing was asking for. */
@media (min-width:783px) {
  #main-content p[style*="justify"], #main-content li[style*="justify"],
  #main-content div[style*="justify"] { hyphens:auto; -webkit-hyphens:auto; }
}

/* One line on /contactos/ sets two phone numbers apart with a pipe. Divi steps this column down to
   280px at its 479px breakpoint, which leaves 224px of text measure — too narrow for the pair, so
   the line wrapped and left "220 990 039 |" hanging with the separator last. Binding the pipe to
   the number after it only moves the problem: the pipe then LEADS the second line, which reads no
   better. Below that breakpoint the separator is therefore dropped entirely and the second number
   takes its own line, which is exactly how the footer and /marcacoes/ already print the pair. The
   pipe is kept everywhere it fits (measured: the line is single at 480px and above). This is the
   site's only pipe-separated pair, so these two classes are used once by design.
   Putting the panel on its true 280px box (above) also took 56px off the text measure, and the
   email line needs 267px of it — a 56px "Email:" label plus a 211px address that has no break
   opportunity in it. It gets the same treatment rather than a hyphenated address: below the same
   breakpoint the address drops under its label, where 211px fits inside 224px with room to spare.
   Round five removed the trailing `<br />` that Divi's editor had left at the end of the Telefone
   paragraph, in the markup rather than here. It cost nothing while `.cli-tel-2` was inline — a
   trailing <br> followed only by collapsible whitespace draws no line box — but the moment that
   span became a block it split the paragraph into three anonymous blocks and the third held only
   the <br>: an empty 31px line, so the <p> measured 107px below 479 against 46px above it, and a
   visible hole opened between "937 816 272" and "Email:". Deleting the <br> is a no-op at every
   width where the pipe still fits. */
@media (max-width:479px) {
  .cli-aside-contact .cli-tel-2 { display:block; }
  .cli-aside-contact .cli-tel-sep { display:none; }
  .cli-aside-contact a[href^="mailto:"] { display:block; }
}

/* --------------------------------------------------------------- shortcode column grid
   Divi ships its `.one_half / .one_third / .one_fourth / .two_third / .three_fourth` shortcode
   columns as percentage floats (shortcodes-0221c679.css:69-74) TOGETHER WITH a stock rule that
   collapses them to one column below 768px. Only the first half of that pair survived the crawl —
   et-shortcodes-responsive.css was never captured — so the floats keep their desktop percentages
   all the way down to 320px.

   /biomagnetismo/ is the only page in the site that uses these classes, and its whole content is a
   32-item disease list split across three `.one_third` columns. At 320-479 that made three 86px
   boxes: half the items wrapped onto two or three lines ("Doenças / do foro / oncológico"), twelve
   item texts ran up to 8px past their own column into the neighbour's bullet ("Enxaquecas" into
   column 3, "Hipertensão" into "Quistos"), and the three columns ended at three different heights,
   so the page's only substance read as a broken table. At 640 the columns were 123px: no longer
   colliding, still wrapping twelve items.

   Every automated gate passed it, and could not have done otherwise: the words hyphenate rather
   than push the document wider, so nothing overflows for the sweep or qa_invariance to catch, and
   the archive's own render carries the identical defect, so style parity against the archive sees
   a match. It was found by looking.

   The rule below is Divi's own missing half, restored at Divi's own breakpoint — the same 767px
   step this sheet already uses for the content measure — so the list becomes one column on phones
   and tablets and keeps the designed three from 768px up, where it was always correct. The list
   classes other than .one_third are unused today; they are carried because this is the vendor rule
   as it shipped, and because any future page pasted from the same editor will need it too. */
@media only screen and (max-width:767px) {
  .one_half, .one_third, .two_third, .one_fourth, .three_fourth {
    width:100% !important; margin-right:0 !important; float:none; }
  /* Stacked, the column boxes meet edge to edge (measured: each ends exactly where the next
     begins), but `#left-area ul` carries `padding: 0 0 23px 16px`, so a 23px step still fell
     between the groups and split one list of 32 diseases into three sections that mean nothing —
     the split is only where the editor happened to break the columns. The trailing padding is
     dropped from every column but the last, which keeps it for the paragraph below.
     `#left-area` is on the front of these selectors for specificity and nothing else: the rule
     it has to beat is an ID selector, and a first attempt written as plain `.one_third > ul`
     computed to 0,1,1 against its 1,0,1 and did nothing at all — measured 23px on all three
     columns at 390, 640 and 768, which is how it was caught. */
  #left-area .one_half > ul, #left-area .one_third > ul, #left-area .one_fourth > ul,
  #left-area .two_third > ul, #left-area .three_fourth > ul { padding-bottom:0; }
  #left-area .one_half.last > ul, #left-area .one_third.last > ul,
  #left-area .one_fourth.last > ul, #left-area .two_third.last > ul,
  #left-area .three_fourth.last > ul { padding-bottom:23px; }
}

/* --------------------------------------------------------------- authored body copy (2026-08-18)
   The client opened /dentistria/ and found 414 characters of body text under a finished-looking
   design: "блок текста ни о чём, потому как там можно расписать о процедурах". Twenty-two of the
   twenty-nine pages were like it. Every service page now carries what the clinic would actually
   say — what the procedure is, when it is indicated, how the visit goes, what to expect after —
   and `.cli-copy` is the single class that copy lives in.

   It exists as its own class rather than as bare <h2>/<p> because TWO page templates carry it and
   they inherit different things: the nine dental pages put it inside Divi's `.et_pb_text`, the
   eight specialty pages put it in `.entry-content` inside `#left-area`. Divi styles h2 at 18-26px
   depending on the column it lands in, and `#left-area ul` carries its own indent, so without a
   scope the same paragraphs would come out at two different sizes on two halves of the site. The
   heading colour is the site's own #97134b, the same one `.cli-more` and `.cli-legal` already use.
   `#left-area` is repeated in the list selector on purpose: an id out-ranks a class, so the plain
   `.cli-copy ul` rule alone would lose to `#left-area ul` on exactly half the pages. */
.cli-copy { margin:26px 0 0; }
.cli-copy h2 { margin:32px 0 12px; color:#97134b; font-weight:300;
  font-size:clamp(20px,2.1vw,24px); line-height:1.3; }
.cli-copy h2:first-child { margin-top:0; }
/* Ragged by default and justified only on a wide column, which is the reverse of how the rest of
   this sheet does it — and deliberately so. The existing phone rule keys on the inline
   style="text-align: justify" that Divi baked into the archived markup (`p[style*="justify"]`);
   `.cli-copy p` carries no style attribute, so that rule can never reach it, and because this
   declaration sits later in the file at equal specificity it would in fact OVERRIDE a copy of that
   rule written into the same media query. Measured before the fix: at 390px the site's own
   paragraphs were left-aligned and the new ones justified, one above the other on the same page,
   with white rivers between three words a line. Stating the wide case as the exception is the only
   version that cannot be silently undone by source order. */
.cli-copy p { margin:0 0 14px; text-align:left; }
@media (min-width:783px) { .cli-copy p { text-align:justify; } }
.cli-copy ul, #left-area .cli-copy ul { margin:0 0 16px; padding:0 0 0 20px; list-style:disc; }
.cli-copy li { margin:0 0 7px; line-height:1.7; }
.cli-copy > :last-child { margin-bottom:0; }

/* ------------------------------------------------------- legibility gate, 2026-08-18

   The current page's own menu item was #d3d3d3 — light grey on the white header, 1.5:1, and
   confirmed unreadable by measuring the painted pixels rather than the declared colours. That is
   NOT something the restore broke: the value comes from the site's own Divi customiser block,
   inline in every archived page ("#top-menu li.current-menu-item > a { color: #d3d3d3 }"), so the
   live site printed "Home" invisibly too. Smallest change that stays inside the site's palette:
   the accent teal the same customiser block already declares for `a`. The theme's own
   font-weight:500 on the current item is untouched, so "you are here" still reads as before. */
#top-menu li.current-menu-ancestor > a,
#top-menu li.current-menu-item > a { color: #10a394; }

/* Finger-sized hit areas (WCAG 2.5.8 asks 24px in the smaller dimension). Every anchor listed here
   measured 19-20px tall because it is inline text with no padding; vertical padding grows the box
   the browser hit-tests without moving the line box, so the layout is pixel-identical. */
.cli-tri-all a, .cli-about-more, #cli-foot-top a, .cli-foot-col li a,
#et-footer-nav .bottom-nav a, .et_pb_post p > a, .et_pb_text p > a, .post-meta a,
.et_pb_post h2 a, .et_pb_post .entry-title a {
  padding-top: 4px;
  padding-bottom: 4px;
}
/* The post thumbnail link wraps a block image but is itself inline, so its box was the 20px line
   box beside a 675px picture. Making it block hands the finger the whole photograph. */
.et_pb_posts .et_pb_post > a { display: block; }

/* Carousel dots were 10x10. The dot keeps its size and colour - the button around it grows to 24. */
.cli-dots { gap: 2px; }
.cli-dots button {
  width: 24px; height: 24px;
  background: transparent;
  box-shadow: none;
  display: flex; align-items: center; justify-content: center;
}
.cli-dots button::before {
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.6);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.cli-dots button[aria-current="true"] { background: transparent; }
.cli-dots button[aria-current="true"]::before { background: #97134b; }