/* clinicadafigueirinha.pt — the layer the WebSite X5 export never had.
   Written by _scripts/cdf_01_finish.py; do not hand-edit.

   The export is a fixed 1150px desktop page with ZERO media queries: every header and footer
   block is absolutely positioned and every content cell has a pixel width. Nothing below changes
   that at desktop. The first half styles the authored blocks in the site's own palette
   (gold #b7851c, Verdana, white cards with the 5px radius and 3px grey shadow the acordos cells
   already use); the second half is the mobile layer, and it is entirely inside a media query. */

:root { --gold: #b7851c; --ink: #333; --line: #e2d7bd; }

/* ---------------------------------------------------------------- authored blocks */
.cdf-home { font-family: Verdana, Geneva, sans-serif; color: var(--ink); font-size: 13px;
  line-height: 1.65; text-align: left; padding: 0 0 24px; }
.cdf-home a { color: var(--gold); }
.cdf-home h2 { font: italic normal bold 21px/1.3 Verdana, Geneva, sans-serif; color: var(--gold);
  margin: 0 0 14px; padding: 0 0 8px; border-bottom: 1px solid var(--gold); }
.cdf-home h3 { font: normal normal bold 14px/1.35 Verdana, Geneva, sans-serif; color: var(--gold);
  margin: 0 0 6px; }
.cdf-home p { margin: 0 0 12px; }
.cdf-home section { margin: 0 0 34px; }
.cdf-hero h2 { font-size: 24px; }
.cdf-hero p { max-width: 62em; text-align: justify; }
/* THE PAGE TITLE IS A HEADING. WebSite X5 emitted each page's own title as a 16px
   <div><span class="fs12"><b>...</b></span></div> in an absolutely-positioned text object, so on
   /servicos/, /acordos/ and /contatos/ the title rendered SMALLER than the 21px section headings
   under it and the document had no page-level heading. Styled here, next to .cdf-hero h2, so the
   seven pages carry one hierarchy: page title 24px, section 21px, card 14px. The -6px pulls the
   X5 cell's own padding back onto the body text column. */
.cdf-x5-title { font: italic normal bold 24px/1.3 Verdana, Geneva, sans-serif; color: var(--gold);
  margin: 0 0 14px; padding: 0 0 8px; border-bottom: 1px solid var(--gold);
  text-align: left; }
#imPageRowContent_1 [id^="imCell"]:has(.cdf-x5-title) {
  padding-left: 0; padding-right: 0; border-bottom: 0; }


.cdf-cta { margin-top: 18px; }
.cdf-btn { display: inline-block; margin: 0 10px 8px 0; padding: 11px 22px; border-radius: 5px;
  background: var(--gold); color: #fff !important; text-decoration: none; font-weight: bold;
  box-shadow: 3px 3px 5px 0 rgba(128,128,128,.5); }
.cdf-btn:hover, .cdf-btn:focus { background: #966c12; }
.cdf-btn-ghost { background: #fff; color: var(--gold) !important; border: 1px solid var(--gold);
  box-shadow: none; }
.cdf-btn-ghost:hover, .cdf-btn-ghost:focus { background: #fdf7e9; }

.cdf-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.cdf-cards > li { flex: 1 1 300px; box-sizing: border-box; background: #fff; border-radius: 5px;
  padding: 18px 20px; box-shadow: 3px 3px 5px 0 rgba(128,128,128,.55);
  border-top: 3px solid var(--gold); }
.cdf-who { font-weight: bold; margin-bottom: 6px; }
.cdf-more { margin-top: 16px; font-weight: bold; }
.cdf-list { margin: 0 0 12px 22px; padding: 0; }
.cdf-list li { margin: 0 0 8px; }

.cdf-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.cdf-logos > li { background: #fff; border-radius: 5px; width: 120px; height: 96px;
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  padding: 8px; box-shadow: 3px 3px 5px 0 rgba(128,128,128,.55); }
.cdf-logos img { max-width: 100%; max-height: 100%; height: auto; }

.cdf-contact-grid { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.cdf-contact-grid > div { flex: 1 1 300px; }
/* On /contatos/ the text column carries no call-to-action button (the form is already on the page),
   so it ends well short of the map and leaves a visible empty block. Centre it against the map
   instead of top-aligning it. Scoped to the contatos aside so the homepage block, whose columns are
   already balanced by its "Enviar uma mensagem" button, keeps its top alignment. */
.cdf-contact-aside .cdf-contact-grid { align-items: center; }
.cdf-map-wrap { flex: 1 1 380px; max-width: 100%; }
.cdf-map-fig { margin: 0; }
.cdf-map { width: 100%; height: auto; max-width: 100%; border: 1px solid var(--line);
  border-radius: 4px; display: block; background: #eef3f7; }
.cdf-map-note { font: normal 11px/1.5 Verdana, Geneva, sans-serif; color: #6b6b6b; margin: 6px 0 0; }
.cdf-map-note a { color: #6b6b6b; }

/* name plaques for the three insurer logos the archive never captured (ALLIANZ.png, Zurich.png,
   muticare-novo-1.png). A broken <img> in a wall of 15 is the first thing anyone sees. */
.cdf-plaque { display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: 80px; padding: 6px; font: normal normal bold 15px/1.25 Verdana, Geneva, sans-serif;
  letter-spacing: .04em; color: #4a4a4a; text-align: center; }

/* ------------------------------------------------------------------- the form
   The contact page's own design is a black rounded panel with a gold border
   (#imCellStyleGraphics_4 paints the gradient, #imCellStyle_4 the border and the 20px radius) and
   the dead JotForm theme drew gold labels on it. That panel is the page, so the rebuilt form sits
   INSIDE it rather than putting a second white card on top of it. */
.cdf-form-wrap { width: 100%; }
.cdf-form { font-family: Verdana, Geneva, sans-serif; font-size: 13px; color: #e9e4d8;
  background: transparent; padding: 26px 30px; max-width: 690px;
  text-align: left; box-sizing: border-box; }
.cdf-form fieldset { border: 1px solid rgba(208,160,58,.55); border-radius: 5px; margin: 0 0 18px;
  padding: 12px 14px; }
.cdf-form legend { font-weight: bold; color: #d8a93c; padding: 0 6px; }
.cdf-form fieldset label { display: inline-block; margin: 0 18px 6px 0; cursor: pointer; }
.cdf-field { margin: 0 0 16px; }
.cdf-field > label { display: block; font-weight: bold; color: #d8a93c; margin: 0 0 5px; }
.cdf-form input[type=text], .cdf-form input[type=email], .cdf-form input[type=tel],
.cdf-form select, .cdf-form textarea {
  width: 100%; box-sizing: border-box; font: normal 13px/1.5 Verdana, Geneva, sans-serif;
  padding: 9px 10px; border: 1px solid #c9c9c9; border-radius: 4px; background: #fff;
  color: var(--ink); }
.cdf-form input:focus, .cdf-form select:focus, .cdf-form textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.cdf-form textarea { resize: vertical; min-height: 120px; }
.cdf-form .req { color: #ff8f8f; }
.cdf-submit { margin: 20px 0 0; }
.cdf-form button[type=submit] { font: bold 14px/1 Verdana, Geneva, sans-serif; padding: 13px 34px;
  border: 0; border-radius: 5px; background: var(--gold); color: #fff; cursor: pointer;
  box-shadow: 3px 3px 5px 0 rgba(0,0,0,.45); }
.cdf-form button[type=submit]:hover { background: #d8a93c; color: #241a04; }
.cdf-formnote { font-size: 11.5px; color: #cfc9bb; margin: 16px 0 0; line-height: 1.6; }
.cdf-formnote a { color: #d8a93c; }
.cdf-form .cdf-error { color: #ff8f8f; font-weight: bold; }
/* What the form says back. Every submit lands here — the missing fields by name, or the
   confirmation that the message was handed to the mail client — because a form whose Enviar
   produces nothing visible is indistinguishable from a dead button, which is what this one was
   until 2026-08-19. No fill, only a rule down the side: the panel behind it is a dark gradient
   and a translucent block over it would take the running text off the contrast the legibility
   gate measures. */
.cdf-formsay { font: bold 13px/1.6 Verdana, Geneva, sans-serif; margin: 16px 0 0;
  padding: 9px 0 9px 13px; border-left: 3px solid var(--gold); color: #f0e7d4; }
.cdf-formsay-erro { border-left-color: #ff8f8f; color: #ffcdcd; }
.cdf-formsay[hidden] { display: none; }
.cdf-form .cdf-missing { border-color: #ff8f8f !important; box-shadow: 0 0 0 1px #ff8f8f; }
.cdf-form fieldset.cdf-missing { border-color: #ff8f8f; box-shadow: none; }
.cdf-form fieldset.cdf-missing legend { color: #ffcdcd; }
.cdf-contact-aside { clear: both; padding-top: 18px; }
.cdf-after-table { clear: both; padding-top: 26px; }

/* ------------------------------------------------------- footer bar (the year) */
#cdf-footbar { position: absolute; top: 276px; left: 0; width: 1150px; text-align: center;
  font: normal 11px/1.6 Verdana, Geneva, sans-serif; color: #6b6b6b; z-index: 1007; }
#cdf-footbar p { margin: 0; }
#cdf-footbar a { color: #6b6b6b; text-decoration: none; }
#cdf-footbar a:hover { color: var(--gold); text-decoration: underline; }

/* the footer's own map cell was sized for the dead Google iframe: 270x210 */
#imFooter_pluginAppObj_06 .cdf-map { width: 270px; height: 154px; object-fit: cover; }
#imFooter_pluginAppObj_06 .cdf-map-note { text-align: left; font-size: 10px; }

/* -------------------------------------- the two export boxes wider than the page they were cut for
   X5 cut this design at 1150px and then emitted two blocks that overrun it: the menu strip
   (#imHeader_imMenuObject_03_wrapper and its cell) at 1152px from x=0, and the footer's "Contatos"
   heading (#imFooter_imTextObject_03_wrapper and its cell) at 590px from x=570, i.e. a right edge
   at 1160. Once the page is no longer reflowed, the document is therefore 1160px wide however
   narrow the window is, so every window from 1150px to 1169px got a real horizontal scrollbar and
   the layout slid off its own left margin. Both are trimmed to the 1150px page: the strip to 1150,
   the heading to 580, which also lands its rule exactly on the right edge of the map cell below it
   (880 + 270 = 1150) instead of 10px past it. The inner cells and the CellStyleGraphics layer are
   sized from these, so they follow without being named. */
#imHeader_imMenuObject_03_wrapper, #imHeader_imCell_3, #imHeader_imCellStyle_3 { width: 1150px; }
#imFooter_imTextObject_03_wrapper, #imFooter_imCell_3, #imFooter_imCellStyle_3 { width: 580px; }

/* ============================================================ RESPONSIVE LAYER ==
   The archived CSS is the DESKTOP truth and nothing above the handover width is touched. Below the
   design's own 1150px width the fixed layout cannot fit, so instead of leaving the page to scroll
   sideways (or, as the export's `viewport: width=1150` did, letting a phone shrink the whole 1150px
   page to an unreadable 390px) the absolute positioning and the pixel widths are undone and the
   same markup reflows. Two tiers: 1181px is where the design starts fitting; 700px is where the
   horizontal nav bar (4 x 140px = 560px) stops fitting and becomes the burger.

   The handover is 1181/1182 and not 1149/1150 because the fixed page is exactly 1150px wide with
   no gutter of its own: at a 1150px window it filled the screen edge to edge, the logo flush at
   x=0, while one pixel narrower the reflowed layer gave it the 16px side padding every other width
   has. 1150 + 16 + 16 = 1182 is the first window in which the fixed design carries that same 16px
   gutter, so the two layers meet at the width where they look alike instead of 32px earlier, where
   they did not. */

@media (max-width: 1181px) {
  html, body { min-width: 0 !important; }
  #imPage, #imPageExtContainer, #imPageIntContainer { min-width: 0 !important;
    width: auto !important; }
  #imPageExtContainer { background-size: 180% auto; }

  #imHeaderBg, #imFooterBg { display: none; }
  #imHeader, #imFooter { height: auto !important; width: auto !important; }
  /* 1182 and not 1150: the cap is the fixed page (1150) PLUS the two 16px gutters, because the
     padding is inside the box. Capping at 1150 put the logo at x=32 on the last reflowed width and
     at x=16 on the first fixed one, so the header visibly stepped sideways as the window crossed
     the handover. The cap only ever binds between 1151 and 1181, so nothing below 1150 moves. */
  #imHeaderObjects, #imFooterObjects { position: static !important; width: auto !important;
    height: auto !important; max-width: 1182px; margin: 0 auto; padding: 12px 16px;
    box-sizing: border-box; }
  .template-object-wrapper { position: static !important; width: auto !important;
    height: auto !important; overflow: visible !important; margin: 0 0 12px; }
  #imHeader_imCell_1, #imHeader_imCellStyle_1, #imHeader_imCell_2, #imHeader_imCellStyle_2,
  #imHeader_imCell_3, #imHeader_imCellStyle_3,
  #imFooter_imCell_2, #imFooter_imCellStyle_2, #imFooter_imCell_3, #imFooter_imCellStyle_3,
  #imFooter_imCell_4, #imFooter_imCellStyle_4, #imFooter_imCell_5, #imFooter_imCellStyle_5,
  #imFooter_imCell_6, #imFooter_imCellStyle_6 { width: auto !important; min-height: 0 !important; }

  #imHeader_imObjectImage_01_wrapper { width: 96px !important; float: left; margin: 0 16px 0 0; }
  #imHeader_imObjectImage_01 { width: 96px; height: auto; }
  #imHeader_imObjectTitle_02 { text-align: left; }
  #imHeader_imObjectTitle_02_text { font-size: 27px !important; white-space: normal !important;
    line-height: 1.2; }
  #imHeader_imMenuObject_03_wrapper { clear: both; margin-top: 6px; }
  #imHeader_imCellStyle_3 { text-align: left !important; }

  /* the footer's five absolutely placed blocks become one readable column, in reading order:
     the two headings would otherwise land above each other with their text far below */
  #imFooterObjects { display: flex; flex-direction: column; }
  #imFooter_imTextObject_02_wrapper { order: 1; }
  #imFooter_imTextObject_04_wrapper { order: 2; }
  #imFooter_imTextObject_03_wrapper { order: 3; }
  #imFooter_imTextObject_05_wrapper { order: 4; }
  #imFooter_pluginAppObj_06_wrapper { order: 5; max-width: 420px; }
  #imFooter_imTextObject_02, #imFooter_imTextObject_03, #imFooter_imTextObject_04,
  #imFooter_imTextObject_05 { text-align: left; }
  #imFooter_pluginAppObj_06 .cdf-map { width: 100%; height: auto; }
  /* order:6 is not decoration - #imFooterObjects becomes a flex column here, and an item with no
     order sorts to 0, which put the copyright bar ABOVE "Sobre Nós" on every phone render. */
  #cdf-footbar { order: 6; position: static !important; width: auto !important;
    padding: 16px 16px 8px; border-top: 1px solid var(--line); margin-top: 4px; }

  /* content: floats and pixel widths off. .imContentDataContainer is the 1140px box every X5
     content row sits in - miss it and the page stays 1140px wide inside a 390px viewport, which
     is exactly how the first mobile pass came out. */
  #imContentGraphics, #imSideBarContainer, .imContentDataContainer { width: auto !important;
    max-width: 100% !important; }
  .imContentDataContainer { padding: 0 !important; }
  #imContent { min-height: 0 !important; max-width: 1182px; margin: 0 auto;
    padding: 14px 16px !important; box-sizing: border-box; }
  #imContentContainer { overflow-x: hidden; }
  .imPageRow, .imHGroup, .imVGroup, .imUGroup { float: none !important; width: auto !important;
    height: auto !important; overflow: visible !important; }
  .imEGroup { display: none !important; }
  [id^=imCell_], [id^=imCellStyle_] { float: none !important; width: auto !important;
    max-width: 100% !important; min-height: 0 !important; }
  #imContent img { max-width: 100%; height: auto; }
  #imContent table { width: 100% !important; max-width: 100% !important; display: block;
    overflow-x: auto; }

  /* acordos: the 5-across pixel grid becomes a real wrapping grid. Scoped to the page —
     #imPageRowContent_2 is the logo wall here and the contact FORM on /contatos/. */
  [data-page=acordos] #imPageRowContent_2 .imHGroup { display: flex; flex-wrap: wrap; gap: 0;
    justify-content: center; }
  [data-page=acordos] #imPageRowContent_2 [id^=imCell_] { flex: 0 0 20%; box-sizing: border-box;
    padding: 6px !important; }
  [data-page=acordos] #imPageRowContent_2 [id^=imCellStyle_] { display: flex; align-items: center;
    justify-content: center; width: 100% !important; min-height: 120px !important;
    padding: 10px !important; box-sizing: border-box; }
  [data-page=acordos] #imPageRowContent_2 img { max-height: 100px; width: auto; }

  /* contatos: the form lives inside the page's own black panel, which must go full width */
  [data-page=contatos] #imCell_4, [data-page=contatos] #imCellStyle_4 { width: auto !important; }
  [data-page=contatos] #imGroup_3, [data-page=contatos] #imGroup_8 { display: none !important; }
}

@media (max-width: 700px) {
  /* THE BURGER. X5 emitted the button and then hid it at every width with
     `.hamburger-component { display: none }`, switching to it from JS that is gone. */
  #imHeader_imMenuObject_03 .hamburger-component { display: inline-block !important; }
  #imHeader_imMenuObject_03 .hamburger-button { width: 46px; height: 46px; background: #fff;
    border: 1px solid var(--line); border-radius: 5px; cursor: pointer; padding: 0; }
  #imHeader_imMenuObject_03 .hamburger-bar { background: var(--gold); width: 60%; height: 3px;
    margin: 4px auto; border-radius: 2px; transition: transform .18s, opacity .18s; }
  .hamburger-button[aria-expanded=true] .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg); }
  .hamburger-button[aria-expanded=true] .hamburger-bar:nth-child(2) { opacity: 0; }
  .hamburger-button[aria-expanded=true] .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg); }

  #cdf-nav { display: none; margin: 10px 0 0; padding: 0; list-style: none;
    border-top: 1px solid var(--line); }
  #cdf-nav.is-open { display: block; }
  #cdf-nav > li { float: none !important; width: auto !important; display: block !important;
    border-bottom: 1px solid var(--line); }
  #cdf-nav .label-wrapper, #cdf-nav .label-inner-wrapper { display: block !important;
    width: auto !important; height: auto !important; overflow: visible !important; padding: 0; }
  #cdf-nav .label { display: block !important; padding: 15px 6px !important;
    font-size: 15px !important; text-align: left !important; }

  #imHeader_imObjectImage_01_wrapper { width: 78px !important; margin-right: 12px; }
  #imHeader_imObjectImage_01 { width: 78px; }
  #imHeader_imObjectTitle_02_text { font-size: 19px !important; }

  .cdf-home { font-size: 14px; }
  .cdf-hero h2 { font-size: 20px; }
  .cdf-x5-title { font-size: 20px; }
  .cdf-home h2 { font-size: 18px; }
  .cdf-btn { display: block; text-align: center; margin: 0 0 10px; }
  .cdf-logos > li { width: calc(33.333% - 8px); height: 84px; }
  .cdf-form { padding: 18px 14px; }
  [data-page=acordos] #imPageRowContent_2 [id^=imCell_] { flex: 0 0 33.333%; }
}

@media (max-width: 460px) {
  .cdf-logos > li { width: calc(50% - 6px); }
  [data-page=acordos] #imPageRowContent_2 [id^=imCell_] { flex: 0 0 50%; }
}

/* print: the archived print.css was written for the 1150px page */
@media print {
  #cdf-nav, .hamburger-component, .cdf-map, .cdf-cta, #cdf-footbar a { display: none !important; }
}