/* tabela-custos — ported verbatim from servicos-custos.html inline <style>.
   Only the .page bg URL is retargeted to the theme asset (../../img/). */

/* ===== Page bg (near-black + microscopy composite) on .page so it aligns 1:1 with the canvas ===== */
.page{background:#040404 url('../../img/servicos-custos-fundo.webp') top center / 100% auto no-repeat}
/* .custos only contains position:absolute children (head + 4 panels), so it collapses to
   near-zero height and the footer (which follows right after in the DOM) renders overlapping
   the panels instead of below them (HK #174). Pin the height to the bottom of the last panel
   (custos__panel--4: top 267.6875rem + height 57.0625rem). Desktop-only — the mobile
   breakpoint switches panels to static flow, where height is natural again. */
/* Absolute children use canvas-absolute PSD y-coords, but .custos starts after
   the 465px header, so each rendered 465px (29.0625rem) too low. Each top below
   is de-offset by the header height; .custos height pins the footer to the design
   y (5289 → 4824px past the header = 301.5rem). */
.custos{background:transparent;position:relative;height:301.5rem}

/* ===== positioning frame: spans the full canvas so children anchor to absolute PSD px ===== */
.custos__head{position:relative}

/* --- SERVIÇOS sidebar box (bbox l779 t376 r1084 b559 = 305x183, hangs below nav) --- */
.custos__sidebar{position:absolute;top:-0.1875rem;left:48.6875rem;width:19.0625rem;background:#278465;border-radius:0 0 0.75rem 0.75rem;list-style:none;margin:0;padding:0.5rem 0}
.custos__sidebar-link{display:flex;align-items:center;min-height:2.5rem;padding:0.35rem 2rem;font-family:var(--font);font-weight:400;font-size:1rem;line-height:1.15;color:#fff;letter-spacing:var(--track)}
.custos__sidebar li + li .custos__sidebar-link{border-top:1px solid rgba(255,255,255,0.45)}
.custos__sidebar-link--active{color:var(--gold)}

/* --- Page title "Tabelas de custos" (bbox l266 t677) — two colored words, italic --- */
.custos__title{position:absolute;top:11.9375rem;left:16.625rem;margin:0;font-family:var(--font);font-style:italic;font-size:3.9rem;line-height:1;letter-spacing:var(--track);text-transform:uppercase;color:#fff;font-weight:300}
.custos__title b{display:block;color:#4EB9AD;font-weight:500}
/* decorative rules flanking the title */
.custos__rule{position:absolute;height:0.3125rem;background:#DBEDE9;border:0}
.custos__rule--l{top:14.5rem;left:-7.1875rem;width:22.8125rem}
.custos__rule--r{top:18.9375rem;left:41.3125rem;width:72.3125rem;height:0.4375rem}

/* spacer reserving head height so the first panel lands at canvas y999 */
.custos__head-spacer{height:62.4375rem}

/* ===== Table panels (rounded teal container per table) ===== */
.custos__panel{position:absolute;left:5rem;width:102.625rem;background:#48BBAE;border-radius:2.5rem;box-sizing:border-box}
.custos__panel--1{top:33.375rem;height:93.375rem}
.custos__panel--2{top:129.875rem;height:33.9375rem}
.custos__panel--3{top:166.9375rem;height:68.5625rem}
.custos__panel--4{top:238.625rem;height:57.0625rem}

/* the actual table sits inside the panel — inner content box (Vector Smart Object bbox) relative to panel */
.custos__table{position:absolute;left:12.4375rem;width:77.6875rem;border-collapse:collapse;font-family:var(--font);table-layout:fixed}
/* per-panel inner top + total height (from PSD Vector Smart Object bbox) */
.custos__panel--1 .custos__table{top:8.1875rem;height:75.125rem}   /* t1130 h1202 */
.custos__panel--2 .custos__table{top:5.4375rem;height:23.125rem}   /* t2630 h370 */
.custos__panel--3 .custos__table{top:5.4375rem;height:57.875rem}   /* t3223 h926 */
.custos__panel--4 .custos__table{top:5.125rem;height:43.3125rem}   /* t4365 h693 */
.custos__table th,.custos__table td{text-align:center;letter-spacing:var(--track);color:#4F4E4F}
.custos__table thead th{background:#337F73;color:#fff;font-weight:700;font-size:1.6rem;line-height:1.15;padding:0.5rem;vertical-align:middle;height:9.5rem}
.custos__table tbody td{font-weight:400;font-size:1.6rem;line-height:1.2;padding:0.5rem;vertical-align:middle}
.custos__table tbody th[scope="row"]{font-weight:400;font-size:1.6rem}   /* row labels match the value cells (were smaller/bold); [scope] beats th:first-child specificity */
/* first column = label, slightly bolder feel matches PSD (regular but distinct) */
.custos__table td:first-child,.custos__table th:first-child{font-weight:700}
/* alternating body rows: light mint / medium green — must include th[scope="row"]
   (the label cell), not just td, or the row-label column stays transparent and
   the row striping breaks visually (HK #171/#172/#173). */
.custos__table tbody tr:nth-child(odd) td,.custos__table tbody tr:nth-child(odd) th{background:#DBEEEA}
.custos__table tbody tr:nth-child(even) td,.custos__table tbody tr:nth-child(even) th{background:#8CCBB0}
/* thin white gutters between columns (matches PSD cell separation) */
.custos__table th,.custos__table td{border-left:0.25rem solid #48BBAE;border-right:0.25rem solid #48BBAE}
.custos__table th:first-child,.custos__table td:first-child{border-left:0}
.custos__table th:last-child,.custos__table td:last-child{border-right:0}
.custos__table tbody tr{border-bottom:0.25rem solid #48BBAE}
.custos__table thead tr{border-bottom:0.375rem solid #48BBAE}

/* column widths tuned to PSD: label wider, gov widest, others equal */
.custos__table col.c-label{width:24%}
.custos__table col.c-num{width:14%}
.custos__table col.c-gov{width:22%}
.custos__table col.c-ext{width:16%}
/* label cells wrap on whole words only — never split a token like "(17h)" */
.custos__table td:first-child,.custos__table th:first-child{overflow-wrap:normal;word-break:normal;hyphens:none}
/* panel 3 has the longest labels ("...horário não comercial. (17h às 08h)") —
   give the label column more room so no token orphans onto its own line */
.custos__panel--3 .custos__table col.c-label{width:32%}
.custos__panel--3 .custos__table col.c-num{width:12%}
.custos__panel--3 .custos__table col.c-gov{width:20%}
.custos__panel--3 .custos__table col.c-ext{width:14%}

/* 2-column training table (panel 4) */
.custos__table--2col col.c-half{width:50%}
.custos__table--2col td,.custos__table--2col th{border-left:0.25rem solid #48BBAE;border-right:0.25rem solid #48BBAE}

/* footnote (bbox l286, italic bold white, below table inside panel) */
.custos__note{position:absolute;left:12.4375rem;font-family:var(--font);font-style:italic;font-weight:700;font-size:1.55rem;line-height:1.2;color:#fff;letter-spacing:var(--track);margin:0}
.custos__note--1{top:86.375rem}
.custos__note--4{top:51rem}

/* ===== Responsive ===== */
@media (max-width:75rem){
  .page{background-position:center top;background-size:cover}
  .custos{height:auto}
  .custos__head{padding:1.5rem 5% 0}
  .custos__sidebar{position:static;width:100%;max-width:22rem;border-radius:0.75rem;margin-bottom:2rem}
  .custos__title{position:static;font-size:2.6rem;margin-bottom:1rem}
  .custos__rule{display:none}
  .custos__head-spacer{display:none}
  .custos__panel{position:static;width:auto;margin:0 4% 2.5rem;height:auto!important;padding:1.5rem 1rem 2.5rem;border-radius:1.5rem;overflow-x:auto}
  .custos__panel .custos__table,
  .custos__panel--1 .custos__table,.custos__panel--2 .custos__table,
  .custos__panel--3 .custos__table,.custos__panel--4 .custos__table{position:static;width:100%;left:auto;top:auto;height:auto;min-width:34rem}
  .custos__table thead th{height:auto}
  .custos__table thead th,.custos__table tbody td,.custos__table tbody th{font-size:1.1rem;padding:0.9rem 0.4rem}
  .custos__note{position:static;font-size:1.1rem;margin-top:1rem}
}