/* ------------------------------------------------------------------------------------------
   centroauditivocarcavelos.com — restore overrides.

   The archived theme (css/styles.css, 2015 capture) is kept because it carries the site's own
   typography, its #f0f0f0 panels, its dashed product boxes and its comparticipações table. What
   it cannot do any more is lay the page out: four of its background images (barra.png,
   header.jpg, bottom_image.jpg, panel_button.png) are not wired into the build, and every width in
   it is a hard-coded 903/900/850px with floats and fixed-height boxes. This sheet supplies what
   those images carried, and makes the one document reflow.
   Not wired, NOT missing - an earlier note here said they had never been archived, which was
   wrong: all four are in the CDX and header.jpg and bottom_image.jpg have since been downloaded.
   They stay out on purpose. header.jpg is a plain white canvas texture and bottom_image.jpg a
   decorative band of grass under a grey sky; they are page chrome for a fixed-width 2013 layout,
   they carry no information, and the band they would sit in is the authored hero. Do not read
   their absence as an outstanding fetch.
   ------------------------------------------------------------------------------------------ */

:root {
  /* The site's own palette, read off the archive's rendering of the 2016 capture: a black
     header stripe, charcoal accordion bars with an orange chevron, and a cyan hero panel. */
  --ink: #262626;
  --muted: #5d6367;
  --line: #d5d9dc;
  --accent: #0a6d8a;
  --accent-lt: #0d87ab;
  --amber: #ef8200;
  --panel: #f1f2f3;
  --dark: #191919;
}

/* ---------------------------------------------------------------- base, undoing the theme */
html { overflow-y: auto; }

/* The family is deliberately NOT set here: css/styles.css declares the site's own
   `"normal Arial", Helvetica, sans-serif` and that is what the original rendered in
   (there is no font called "normal Arial"; every browser fell through to Helvetica/Arial).
   Overriding it with a modern UI stack changes the page's texture for no reason. */
body {
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus { color: var(--accent-lt); text-decoration: underline; }
/* The outbound-link policy strips the href and keeps the <a>: it must read as text, not as a
   link the visitor will try to click. */
a:not([href]) { color: inherit; text-decoration: none; cursor: text; }

:focus-visible { outline: 3px solid var(--accent-lt); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--accent); padding: 10px 16px; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------------------- masthead */
.masthead {
  position: relative;
  border-top: 8px solid var(--dark);
  background: linear-gradient(150deg, #05475b 0%, #075f79 55%, #0a6d8a 100%);
  color: #fff;
  padding: 30px 0 46px;
  overflow: hidden;
}
.masthead-in {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 22px 40px;
  align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 16px; }
.brand-mark { width: 54px; height: 54px; flex: 0 0 auto; color: #7fd3ea; }
.brand-text { display: block; }
/* The site name is the page's <h1>. css/styles.css already has an h1 rule from the theme
   (4em Georgia, #aaa, centred, 20px padding) written for the "Contactos" heading inside the
   slide-down panel; every one of those declarations has to be answered here or the masthead
   gets grey 64px centred type on a teal band - which is also a 3:1 contrast failure. */
.brand-name {
  display: block;
  font: 400 27px/1.2 Georgia, "Times New Roman", Times, serif;
  color: #fff;
  text-align: left;
  margin: 0;
  padding: 0;
  letter-spacing: .01em;
}
.brand-name strong { font-weight: 700; color: #fff; }
.brand-tag {
  display: block; margin-top: 4px;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #cfe9f3;
}
.brand-contact { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.6; max-width: 480px; }
.brand-contact li { margin: 0 0 4px; color: #e6f2f7; }
/* A phone number split across two lines ("(+351) 962 / 777 276") is unreadable and unmistakably
   accidental; it happened at every width under ~430px. */
.brand-contact a, .site-foot a[href^="tel"], .ct-line a[href^="tel"], .pb-line a[href^="tel"] { white-space: nowrap; }
.brand-contact a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); }
.brand-contact a:hover { color: #fff; border-bottom-color: #fff; }
.brand-contact .lbl { color: #bcdfec; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; }
.masthead-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 90px; z-index: 1; }

/* ------------------------------------------------------------------------------- nav */
.site-nav {
  position: sticky; top: 0; z-index: 30;
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(16, 40, 56, .06);
}
.site-nav ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a {
  display: block; padding: 13px 14px;
  font-size: 14px; color: var(--muted); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover, .site-nav a:focus {
  color: var(--accent); border-bottom-color: var(--accent); text-decoration: none;
}
/* The burger exists only below 720px; above it the nine sections fit across the bar. */
.nav-toggle { display: none; }

/* ------------------------------------------------------------------------------- hero */
/* What the four Pixar demo stills used to occupy. Deliberately NOT a second teal band: the
   masthead directly above it is already a dark teal gradient, and two saturated bands stacked
   read as one 400px slab with a nav line drawn through it. */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #f4f9fb 0%, #eaf3f7 58%, #e2eef4 100%);
  border-bottom: 1px solid var(--line);
}
.hero-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
  gap: 30px 46px; align-items: center;
  padding-top: 44px; padding-bottom: 44px;
}
.hero-eyebrow {
  margin: 0 0 10px;
  font: 600 12px/1.4 "Segoe UI", Arial, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.hero-title {
  margin: 0 0 14px;
  font: 400 40px/1.16 Georgia, "Times New Roman", Times, serif;
  color: #0b3b4d;
  letter-spacing: -.005em;
}
.hero-lead { margin: 0; max-width: 46ch; font-size: 16.5px; color: #3a464c; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.hero-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.hero-facts li {
  display: flex; align-items: baseline; gap: 12px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid #d3e3ea;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 11px 15px;
}
.hero-facts b {
  flex: 0 0 auto;
  font: 400 21px/1.1 Georgia, "Times New Roman", Times, serif;
  color: var(--accent);
}
.hero-facts span { font-size: 13.5px; color: var(--muted); line-height: 1.35; }
/* Drawn, not photographed - see the docstring of _scripts/cac_03_chrome.py. */
.hero-art {
  position: absolute; right: -66px; bottom: -64px; z-index: 1;
  width: 420px; height: 300px;
  color: #0a6d8a;
  opacity: .34;
  pointer-events: none;
}

/* ------------------------------------------------------- the two real slider captions */
/* These two lines are the only text the dead nivo-slider carried (#htmlcaption1/2). Stacked as
   bare paragraphs they read as a leftover fragment, so they are set as a labelled two-up strip:
   the same information, but visibly a designed band. */
.partners { background: var(--panel); border-bottom: 1px solid var(--line); }
.partners .wrap {
  padding-top: 13px; padding-bottom: 13px;
  display: flex; flex-wrap: wrap; gap: 6px 34px;
}
.partners p {
  margin: 0; font-size: 14px; color: var(--muted);
  flex: 1 1 320px; min-width: 0;
  padding-left: 15px; position: relative;
}
.partners p::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
}
.partners b { color: var(--ink); }
.partners strong { color: var(--ink); }

/* ------------------------------------------------------------------------- accordion */
.container { width: auto; max-width: 1080px; margin: 34px auto 10px; padding: 0 20px; box-sizing: border-box; }

details.acc {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  margin: 0 0 14px;
  overflow: hidden;
  scroll-margin-top: 62px;
}
details.acc > summary {
  list-style: none;
  display: block;
  position: relative;
  cursor: pointer;
  padding: 14px 52px 14px 20px;
  background: linear-gradient(180deg, #4d4d4d 0%, #2b2b2b 55%, #1f1f1f 100%);
  color: #fff;
  font: 400 18px/1.35 Georgia, "Times New Roman", Times, serif;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::marker { content: ""; }
details.acc > summary:hover { background: linear-gradient(180deg, #5c5c5c 0%, #343434 55%, #262626 100%); }
details.acc > summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px;
  border-right: 3px solid var(--amber); border-bottom: 3px solid var(--amber);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s ease;
}
details.acc[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }

.acc_container {
  width: auto; clear: none;
  margin: 0; border: 0;
  background: #fff;
  border-radius: 0;
  overflow: visible;
  font-size: 1em;
}
.acc_container .block { padding: 24px 24px 28px; text-align: left; }
/* The 2013 markup nests <div class="block"> inside <div class="block"> in six of the nine
   sections. Padding it twice insets the copy 48px from a panel edge that is already inset, which
   is what made every section look like a narrow column floating in white. */
.acc_container .block .block { padding: 0; }
/* Separator <br> left between blocks by the old markup: it opens a ~40px dead band under the
   section heading (visible under "Parceiros"). Line breaks INSIDE a paragraph are real copy and
   are not touched. */
.acc_container .block > br { display: none; }
.acc_container .block > p, .acc_container .block p { text-align: left; }
.acc_container h3 {
  font: 400 26px/1.25 Georgia, "Times New Roman", Times, serif;
  color: var(--accent);
  margin: 0 0 16px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
.acc_container img {
  float: none;
  display: block;
  margin: 0 0 14px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* ------------------------------------------------------------------- product cards */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 4px 0 18px;
}
/* Only the <br> the 2013 markup used to SEPARATE cards, never the ones inside a card's copy:
   `.prod-grid br` swallowed the line breaks in the tampões list and ran three bullet points
   together into one sentence. */
.prod-grid > br { display: none; }
/* Cards that share a picture slot line up along the bottom because their content is comparable.
   A row of PURE-TEXT cards does not: stretching a 40-word card to the height of a 90-word one
   leaves 130px of blank inside a bordered box, which reads as content somebody forgot to add.
   Those grids get natural heights instead.
   NB: `:has()` may NOT be nested inside another `:has()`. `.prod-grid:has(.prod_box:not(:has(img)))`
   parses as invalid, the whole rule is dropped, and the row silently goes back to stretching -
   which is exactly how this was missed on the first pass. */
.prod-grid:not(:has(img)) { align-items: start; }
.acc_container .prod_box,
.prod_box, .prod_box_special {
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 40, 56, .05);
}
.prod_box_special { margin: 4px 0 18px; }
.prod_box p, .prod_box_special p { margin: 6px 0; font-size: 15px; }

/* Every card in this site is title + photo + copy, so every card gets the SAME title block the
   hearing-aid panels already use (h2.title). Before this, a card's name was a bold run of body
   text in three different colours depending on which rule won, and .prod_box_special - the widest
   card on the page - was the one that came out plain black. */
.prod_box p:first-of-type b,
.prod_box p b:only-child,
.prod_box_special p:first-of-type b {
  display: block;
  color: var(--accent);
  font: 600 17px/1.3 Georgia, "Times New Roman", Times, serif;
  margin: 0 0 4px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
}
.prod_box p:first-of-type, .prod_box_special p:first-of-type { margin-top: 0; }

/* One media slot, identical in every card. The archived product shots are cut-outs of different
   pixel sizes (72x95 to 200x200); left at intrinsic size they sat ragged against a column of
   white, and a card with no shot at all collapsed into a text box beside a card 250px taller.
   A fixed-height `contain` band keeps the cut-outs uncropped and every card the same shape. */
.acc_container .prod_box > img,
.acc_container .prod_box_special > img,
.acc_container .prod_box p > img {
  display: block;
  width: 100%;
  height: 178px;
  object-fit: contain;
  margin: 0 0 14px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-sizing: border-box;
}
.prod_box img.displayed { float: none; }
/* `.prod_box_special` is the one card that spans the whole content column, so the shared 100%-wide
   media band gives its 200px cut-out a 950px field to sit in and the filter box reads as a small
   object adrift in grey. That card gets a slot the width of the cut-out instead, left-aligned with
   the copy beneath it. */
.acc_container .prod_box_special > img { width: 258px; }

/* Partner cards carry an address and a phone, not prose: label them so the two cards read as one
   pair of records rather than two loose runs of text. */
.prod_box .pb-line { display: flex; gap: 8px; align-items: baseline; margin: 5px 0; }
.pb-line .lbl {
  flex: 0 0 72px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* Elia / Switch / Loon / Arriva / Tinnitus: five panels the dead coda-slider clipped to one */
.coda-slider-wrapper { padding: 4px 0 0; overflow: visible; clear: both; }
.coda-slider,
.coda-slider .panel {
  width: auto;
  float: none;
  overflow: visible;
  display: block;
}
.coda-slider {
  background: transparent;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
}
/* All five panels now carry the site's own 500x500 photograph, so the row lines up along the
   bottom as a card grid should. The `.panel.no-shot` opt-out that used to live here - a drawn
   brand tile filling the picture slot of the two panels whose shots could not be fetched, plus
   `.coda-slider:has(.no-shot) { align-items: start }` so the ragged row did not stretch - is gone
   with the condition that produced it: switch.jpg and tinnitus.jpg were recovered (they were in
   fact already in _raw, unreferenced) and cac_wire_photos.py wires all five.
   Two other arrangements were tried and rejected earlier and still are: `column-count: 3` packs
   the cards but balances five uneven ones into 2+2+1, so the third column ends ~530px short;
   `column-count: 2` makes each card 460px wide, and the shots are cut-outs, so the picture slot
   became a wide grey band with a small object adrift in it. */
.coda-slider .panel-wrapper {
  padding: 18px;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.coda-slider .panel h2.title {
  font: 600 19px/1.3 Georgia, "Times New Roman", Times, serif;
  color: var(--accent);
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
}
/* Same media slot as the product cards: Elia's shot is 240px wide, Loon's 160px and Switch had
   none at all, so before this the five panels of one row had three different picture sizes and
   two blank thirds. */
.coda-slider .img-text-container img {
  float: none;
  display: block;
  width: 100%;
  height: 178px;
  object-fit: contain;
  margin: 0 0 12px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-sizing: border-box;
}
.coda-slider .img-text-container { text-align: left; }
.coda-slider .img-text-container p { font-size: 15px; }
.coda-slider .img-text-container p:first-child { margin-top: 0; }
.coda-slider .panel-wrapper { display: flex; flex-direction: column; }

/* The Audifon brand shot leads the section: at intrinsic width it left ~560px of empty white to
   its right, so it is set beside the introduction instead. */
.aud-lead { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
.acc_container .aud-lead > img {
  width: 100%; height: auto; margin: 0;
  padding: 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; box-sizing: border-box;
}
.aud-lead > div > p:first-child { margin-top: 0; }

/* ----------------------------------------------------------- comparticipações table */
.comparticipacoes { position: relative; }
.comp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparticipacoes table { width: 100%; min-width: 720px; border-collapse: collapse; margin: 6px 0 0; }
.acc_container .comparticipacoes th,
.acc_container .comparticipacoes td {
  border: 1px solid var(--line);
  padding: 11px 13px;
  font-size: 14px;
  line-height: 1.45;
  vertical-align: top;
  text-align: left;
}
.acc_container .comparticipacoes thead th {
  background: var(--panel);
  color: var(--ink);
  font: 600 13px/1.35 "Segoe UI", Arial, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.acc_container .comparticipacoes tbody th { background: #fbfcfc; vertical-align: middle; }
.acc_container .comparticipacoes tbody tr:nth-child(even) td { background: #fafbfb; }
/* A blank cell in a subsidy table reads as a field somebody forgot to fill in. An em dash says
   the same thing the blank said - this entity does not state it - and says it on purpose. */
.acc_container .comparticipacoes td.na::before { content: "—"; color: var(--muted); }
.inst-name {
  display: inline-block;
  font: 700 15px/1.3 "Segoe UI", Arial, sans-serif;
  letter-spacing: .02em;
  color: var(--accent);
}
.comp-foot { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; line-height: 1.6; }

/* --------------------------------------------------------------------------- contacts */
/* stretch, not start: the contact column is ~450px tall and a 2:1 map picture is ~240px, so
   aligning them at the top left a quarter of the section as bare white. The map now fills its
   column instead. */
.contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; align-items: stretch; }
#contactos_info {
  height: auto; float: none; padding-left: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
}
#contactos_info p { margin: 0; padding: 0; text-align: left; }
#contactos_info strong { color: var(--accent); }
/* The 2013 page marked its contact headings up as centred bold paragraphs and prefixed each
   person with a literal "&gt;". Rendered flat, every line came out the same weight and the ">"
   read as markup that had leaked into the copy. */
.ct-head {
  font: 600 12px/1.4 "Segoe UI", Arial, sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 8px; padding: 0 0 6px;
  border-bottom: 1px solid var(--line);
}
.ct-head:first-child { margin-top: 0; }
.ct-card {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 6px; background: #fff;
  padding: 14px 16px; margin: 0 0 10px;
}
#contactos_info .ct-name {
  font: 400 18px/1.3 Georgia, "Times New Roman", Times, serif;
  color: var(--accent);
  margin: 0;
}
#contactos_info .ct-role { font-size: 13.5px; color: var(--muted); margin: 1px 0 9px; }
/* A grid, not an inline min-width: with min-width the value after a long label ("TELEMÓVEL (24 H)")
   starts further right than the value after a short one ("TEL."), and the column of numbers comes
   out visibly ragged. */
#contactos_info .ct-line { font-size: 14.5px; margin: 3px 0; }
/* Only the LABELLED lines get the two-column grid. The street address is a .ct-line with no
   label, and putting it in the 136px label track squeezed it into six ragged lines. */
/* minmax(0,1fr), never a bare 1fr: a grid track's default minimum is its content, so a 43-character
   e-mail address pushed the whole contact column wider than the phone viewport and the text was
   sliced off at the screen edge. */
#contactos_info .ct-line:has(.lbl) {
  display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 0 6px; align-items: baseline;
}
#contactos_info .ct-line a, .pb-line a { overflow-wrap: anywhere; }
.ct-line .lbl {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.map-wrap { margin: 0; display: flex; flex-direction: column; }
/* The map is a self-hosted OpenStreetMap picture wrapped in a link to the live map, not a
   third-party frame - see _scripts/_cac_static_map.py for why. */
.map-frame {
  display: block; position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  line-height: 0;
  flex: 1 1 auto; min-height: 260px;
}
.acc_container .map-frame img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
}
.map-cta {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(255,255,255,.94);
  color: var(--accent);
  font: 600 12.5px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: .04em;
  padding: 9px 13px; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(16,40,56,.28);
}
.map-frame:hover .map-cta, .map-frame:focus .map-cta { background: #fff; color: var(--accent-lt); }
.map-credit { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.map-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }

/* --------------------------------------------------- home: the news item and the call-out */
/* The nano-coating article was four hyphen-prefixed lines separated by <br>, and the visit-us
   paragraphs ran on from it in the same body colour. On the one page this site has, the whole
   homepage therefore read as an undifferentiated wall of text. */
/* Single column unless the article actually has a picture: a two-track grid with one empty track
   is how a 288px column of text ends up marooned beside 600px of white. */
.news-lead { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.news-lead:has(figure) { grid-template-columns: 288px 1fr; }
.news-lead figure { margin: 0; }
.acc_container .news-lead figure img {
  width: 100%; height: auto; margin: 0;
  padding: 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; box-sizing: border-box;
}
.news-lead h4, .callout h4 {
  font: 400 21px/1.3 Georgia, "Times New Roman", Times, serif;
  color: var(--ink);
  margin: 0 0 10px;
}
.news-body > p:first-child { margin-top: 0; }
.tick { list-style: none; margin: 0 0 14px; padding: 0; }
.tick li { position: relative; padding-left: 24px; margin: 0 0 6px; }
.tick li::before {
  content: ""; position: absolute; left: 3px; top: .42em;
  width: 6px; height: 10px;
  border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber);
  transform: rotate(45deg);
}
.src { font-size: 13.5px; color: var(--muted); }

.callout {
  margin: 26px 0 0;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 7px;
}
.callout h4 { color: var(--accent); }
.callout p:last-of-type { margin-bottom: 0; }
.callout-actions { margin-top: 18px !important; display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-size: 14.5px;
  border: 1px solid var(--accent);
}
.btn:hover, .btn:focus { background: var(--accent-lt); border-color: var(--accent-lt); color: #fff; text-decoration: none; }
.btn-ghost { background: #fff; color: var(--accent); }
.btn-ghost:hover, .btn-ghost:focus { background: #fff; color: var(--accent-lt); }

/* The weave block is the page's own copy, so it takes the page's own reading measure and only a
   hairline to mark it off from the section above. */
.content-wraparea { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.content-wraparea p { margin: 0; }

/* ----------------------------------------------------------------------------- footer */
.site-foot {
  background: var(--dark);
  color: #c8d2d9;
  margin-top: 38px;
  padding: 30px 0;
  font-size: 14px;
  line-height: 1.7;
}
.site-foot p { margin: 0 0 10px; }
.site-foot a { color: #74c9e2; }
.site-foot a:hover { color: #fff; }
.foot-name {
  font: 400 20px/1.3 Georgia, "Times New Roman", Times, serif;
  color: #fff;
}
.foot-note { color: #97a3ab; font-size: 13px; margin-bottom: 6px; }
.foot-legal { color: #7d8890; font-size: 12.5px; margin-bottom: 0; }

/* ------------------------------------------------------------------------------ phone */
/* `.news-lead:has(figure)` must be repeated in EVERY media query that narrows the news item, not
   shortened to `.news-lead`. A media query adds no specificity, so plain `.news-lead` (0,1,0)
   loses to `.news-lead:has(figure)` (0,1,1) at every width, and the two-column grid never
   collapses. That stayed invisible for as long as the news item had no picture — the base rule
   only applies when a <figure> is present — and appeared the moment the recovered nano-coating
   photograph filled the slot: at 390px the page kept a 288px picture column and squeezed the
   article into the 60px left over, running it off the side of the screen. None of the four gates
   sees this; only looking at the phone render does. `.aud-lead` carries no :has() and was never
   affected, which is why Quem Somos collapsed correctly and Home did not. */
@media (max-width: 980px) {
  .news-lead:has(figure) { grid-template-columns: 232px 1fr; gap: 20px; }
  .aud-lead { grid-template-columns: 210px 1fr; }
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .masthead-in { gap: 18px; }
  .brand-contact { max-width: none; }
  .news-lead:has(figure), .aud-lead { grid-template-columns: 1fr; }
  .news-lead figure, .acc_container .aud-lead > img { max-width: 340px; }
  .hero-in { grid-template-columns: 1fr; gap: 24px; }
  .hero-facts { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .hero-title { font-size: 33px; }
}

@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .masthead { padding: 24px 0 40px; }
  .brand-name { font-size: 23px; }
  .brand-mark { width: 44px; height: 44px; }
  /* THE PHONE MENU. Nine section labels are ~980px of text; at 390px the strip used to scroll
     sideways with no scrollbar and no fade strong enough to be read as one, so everything after
     "Outros Produtos" was unreachable unless you happened to drag it. On a one-page site that is
     the whole navigation. It is now a burger, and the bar is sticky: this page is ~17,000px tall
     on a phone, so a menu that only exists at the very top is a menu nobody reaches twice. */
  .site-nav { position: sticky; top: 0; }
  .nav-wrap { display: block; padding-top: 0; padding-bottom: 0; }
  .nav-toggle {
    display: flex; align-items: center; gap: 11px;
    width: 100%;
    margin: 0; padding: 13px 4px;
    background: none; border: 0; border-radius: 0;
    font: 600 14px/1 "Segoe UI", Arial, sans-serif;
    letter-spacing: .04em;
    color: var(--accent);
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
  }
  .nav-burger { position: relative; width: 21px; height: 2px; background: currentColor; border-radius: 2px; }
  .nav-burger::before, .nav-burger::after {
    content: ""; position: absolute; left: 0; width: 21px; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform .16s ease, top .16s ease;
  }
  .nav-burger::before { top: -7px; }
  .nav-burger::after { top: 7px; }
  .nav-open .nav-burger { background: transparent; }
  .nav-open .nav-burger::before { top: 0; transform: rotate(45deg); }
  .nav-open .nav-burger::after { top: 0; transform: rotate(-45deg); }
  .nav-toggle-label::after { content: " ▾"; font-size: 11px; }
  .nav-open .nav-toggle-label::after { content: " ▴"; }

  .site-nav ul {
    display: none;
    flex-direction: column;
    padding: 4px 0 10px;
    border-top: 1px solid var(--line);
    max-height: 68vh; overflow-y: auto;
  }
  .nav-open .site-nav ul { display: flex; }
  .site-nav li { flex: 0 0 auto; }
  .site-nav a {
    padding: 11px 4px;
    border-bottom: 1px solid #eef1f3;
    border-left: 3px solid transparent;
    font-size: 15.5px;
  }
  .site-nav a:hover, .site-nav a:focus { border-bottom-color: #eef1f3; border-left-color: var(--accent); }
  .site-nav li:last-child a { border-bottom: 0; }
  .container { margin-top: 22px; }
  /* clears the sticky menu bar, which is ~46px tall; at 8px the section heading a visitor jumped
     to landed underneath it */
  details.acc { scroll-margin-top: 58px; }
  .hero-in { grid-template-columns: 1fr; gap: 22px; padding-top: 30px; padding-bottom: 32px; }
  .hero-title { font-size: 29px; }
  .hero-lead { font-size: 15.5px; }
  .hero-actions .btn { flex: 1 1 100%; text-align: center; }
  .hero-art { width: 250px; height: 180px; right: -34px; bottom: -30px; opacity: .34; }
  details.acc > summary { font-size: 17px; padding: 13px 44px 13px 16px; }
  .acc_container .block { padding: 18px 16px 22px; }
  .acc_container h3 { font-size: 22px; }
  .prod-grid { grid-template-columns: 1fr; }
  .coda-slider { grid-template-columns: 1fr; }
  .partners .wrap { gap: 8px; }
  /* 136px of label column out of 320px of card leaves too little for an e-mail address, so the
     label goes above its value, the same shape the subsidy cards take at this width. */
  #contactos_info .ct-line, #contactos_info .ct-line:has(.lbl) { display: block; margin: 7px 0; }
  #contactos_info .ct-line .lbl { display: block; line-height: 1.7; }
  .pb-line { display: block !important; }
  .pb-line .lbl { display: block; line-height: 1.7; }
  .callout { padding: 18px 16px; }
  .callout-actions .btn { flex: 1 1 100%; text-align: center; }

  /* A six-column subsidy table inside a 390px screen was a silent sideways scroll that hid half
     the columns and left every visible row with a tall empty gap under it. Each institution
     becomes its own card instead, every value carrying the column name it belongs to. */
  .comparticipacoes table { min-width: 0; }
  .comparticipacoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .comparticipacoes tbody tr {
    display: block; margin: 0 0 12px;
    border: 1px solid var(--line); border-radius: 7px; overflow: hidden;
  }
  .acc_container .comparticipacoes tbody th,
  .acc_container .comparticipacoes tbody td { display: block; border: 0; border-top: 1px solid var(--line); }
  .acc_container .comparticipacoes tbody th { border-top: 0; background: var(--panel); padding: 10px 14px; }
  .acc_container .comparticipacoes tbody td { padding: 9px 14px; }
  .acc_container .comparticipacoes tbody td.na { display: none; }
  .acc_container .comparticipacoes tbody td::before {
    content: attr(data-l);
    display: block;
    font: 600 11px/1.5 "Segoe UI", Arial, sans-serif;
    letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  }
  .acc_container .comparticipacoes tbody td.na::before { content: none; }
}

/* --- restored archived imagery, 2026-08-18 --- */
/* THE MAGNETIC RING, and why it must not take the shared media band. `.prod_box p > img` is the
   178px slot every product card uses; a second one inside the Loop System card makes that card
   ~200px taller than the two beside it, and .prod-grid stretches all three to match. The 2013
   sheet gave this cut-out a small floated slot instead (`.prod_box img.displayed`) and that shape
   is right: 85px of picture with the copy running beside it. Below 720px the grid is one column
   and the float still leaves ~230px of measure, so it holds there too. */
.acc_container .prod_box p > img.displayed {
  float: left;
  width: 85px; height: auto;
  margin: 3px 14px 4px 0;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-sizing: border-box;
}
/* THE SUBSIDY LOGOS. The archived Instituição column was logos and nothing else; ours is
   logo-over-name so the phone card layout still has a heading it can render. Capped by HEIGHT,
   not width: the nine marks run from 84x76 to 220x132 and a shared max-width would print the wide
   ones at a 20px cap height and the tall ones twice as big as their neighbours.
   Specificity note: the 2013 sheet's `.acc_container .comparticipacoes img` is (0,2,1) and centres
   every image in the cell with auto margins, so this rule carries the class to outrank it — a
   plain `.inst-logo` would silently lose and the column would come out centred under a
   left-aligned name. */
.acc_container .comparticipacoes img.inst-logo {
  display: block;
  width: auto; height: auto;
  max-width: 130px; max-height: 42px;
  margin: 0 0 7px; padding: 0;
  background: none; border: 0;
}

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

   Finger-sized hit areas. Every anchor below is inline text with no padding, so its box was exactly
   its 16-17px line box - under the 24px WCAG 2.5.8 floor even though the row it sits in is taller.
   Vertical padding on an inline box grows the rectangle the browser hit-tests without changing the
   line box, so no pixel of layout moves. */
.brand-contact a,
.ct-line a,
.pb-line a,
.site-foot a,
.foot-legal a,
.hero-facts a,
.aud-lead a { padding-top: 4px; padding-bottom: 4px; }

/* 11px labels ("Telemóvel (24 h)", "E-mail") are the client's magnifying-glass complaint and the
   gate's hard floor is 12. The masthead was designed around a small caps-and-tracking label, so it
   goes to 12 and keeps its letter-spacing rather than being restyled. */
.brand-contact .lbl, .ct-line .lbl, .pb-line .lbl { font-size: 12px; }