/* 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/tabela-custos-psd.jpg') top center / 100% auto no-repeat} /* asset do protótipo */
/* .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:13.25rem;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 */
/* opacity:1 beats bootstrap's `hr{opacity:.25}` (client QA 27/08: washed-out lines);
   --r clamped to the 1800 canvas — the old 72.3125rem width overflowed to x1818. */
.custos__rule{position:absolute;height:0.3125rem;background:#DBEDE9;border:0;opacity:1}
.custos__rule--l{top:13.625rem;left:-7.1875rem;width:22.8125rem}
.custos__rule--r{top:18.125rem;left:41.3125rem;width:71.1875rem;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:#2E4C45;line-height:1.15}
.custos__table thead th{background:#348074;color:#fff;font-weight:700;font-size:2.25rem;line-height:1.15;padding:3.3125rem 0.625rem 0.375rem;vertical-align:top;height:11.5625rem}
.custos__table tbody td{font-weight:400;font-size:2.25rem;line-height:1.15;padding:0.875rem 0.625rem 0.375rem;vertical-align:middle}
.custos__table tbody th[scope="row"]{font-weight:400;font-size:2.25rem}   /* 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 thead 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:#8CCAAF}

/* thin white gutters between columns (matches PSD cell separation) */
.custos__table th,.custos__table td{border-left:0.125rem solid #fff;border-right:0.125rem solid #fff}
.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:23.3%}
.custos__table col.c-num{width:15.1%}
.custos__table col.c-num + col.c-num{width:15.9%}
.custos__table col.c-gov{width:27.5%}
.custos__table col.c-ext{width:18.1%}
/* 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}
/* Client QA 27/08 item 12: breathing room between table bottom and the asterisk note. */
.custos__note--1{top:87.625rem}
.custos__note--4{top:52.25rem}

/* ===== 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}
  /* mobile QA 02/09: the PSD-exact row heights (declared AFTER this block) and the
     2.25rem th[scope=row] labels won the cascade on phones — 185px-tall rows and
     36px equipment names made the table unreadable. Compact + auto heights. */
  .custos__table thead th{height:auto}
  .custos__table thead th,.custos__table tbody td,.custos__table tbody th{font-size:0.95rem;padding:0.7rem 0.5rem;height:auto!important}
  .custos__table tbody th[scope="row"]{font-size:1rem;font-weight:700}
  .custos__panel .custos__table,
  .custos__panel--1 .custos__table,.custos__panel--2 .custos__table,
  .custos__panel--3 .custos__table,.custos__panel--4 .custos__table{min-width:28rem}
  .custos__note{position:static;font-size:1.1rem;margin-top:1rem}
}
@media (max-width:32rem){
  /* table (min 28rem) is wider than the panel: make the side-scroll discoverable */
  .custos__scroll-hint{display:block;margin:0 4% 0.75rem;font-family:var(--font);font-style:italic;font-size:0.95rem;color:var(--teal);letter-spacing:var(--track)}
}


.custos__scroll-hint{display:none}

/* Row heights per block — prototype/PSD exact (rem = px/16 @1800) */
.custos__panel--1 tbody tr:nth-child(1) td,.custos__panel--1 tbody tr:nth-child(1) th{height:8.625rem}
.custos__panel--1 tbody tr:nth-child(n+2):nth-child(-n+5) td,.custos__panel--1 tbody tr:nth-child(n+2):nth-child(-n+5) th{height:11.5625rem}
.custos__panel--1 tbody tr:nth-child(6) td,.custos__panel--1 tbody tr:nth-child(6) th{height:8.6375rem}
.custos__panel--2 tbody td,.custos__panel--2 tbody th{height:11.5625rem}
.custos__panel--3 tbody tr:nth-child(1) td,.custos__panel--3 tbody tr:nth-child(1) th{height:17.25rem}
.custos__panel--3 tbody tr:nth-child(2) td,.custos__panel--3 tbody tr:nth-child(2) th{height:17.375rem}
.custos__panel--3 tbody tr:nth-child(3) td,.custos__panel--3 tbody tr:nth-child(3) th{height:11.5625rem}
.custos__panel--4 tbody td,.custos__panel--4 tbody th{height:17.34375rem}