:root {
  --green: #b5e61d;
  --green-dark: #8fb02a;
  --ink: #14140f;
  --paper: #ffffff;
  --muted: #6b6b62;
  --border: #e7e7dd;

  --nav-radius: 8px;
  --morph-duration: 650ms;
  --morph-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  box-sizing: border-box;
}

/* ---------- standalone pages (imprensa.html, carreiras.html, …) ----------
   deliberately not the SPA's sticky secondary-nav: these pages aren't part
   of that scroll-tracked flow, so they get their own small, static,
   non-sticky header instead */
.standalone-header {
  border-bottom: 1px solid var(--border);
}

.standalone-header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem 34px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.standalone-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}

.standalone-brand img {
  height: 28px;
  width: auto;
  display: block;
}

.standalone-brand span {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.standalone-back {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  color: var(--green-dark);
  text-decoration: none;
}

.standalone-back:hover {
  background: var(--border);
}

.standalone-back--footer {
  margin: 0 auto 1rem;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  /* +1pt across the whole site: every rem-based size scales off this */
  font-size: calc(16px + 1pt);
  scroll-behavior: smooth;
}

body {
  font-family: "Lato", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* soft page-margin vignette, fixed to the viewport so it reads on every
   route — a faint book-edge shadow down each side, in the brand green */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(143, 176, 42, 0.22), transparent 8%),
    linear-gradient(to left, rgba(143, 176, 42, 0.22), transparent 8%);
}

h1, h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

p {
  line-height: 1.6;
  color: var(--ink);
}

.placeholder {
  color: var(--muted);
  font-style: italic;
}

a {
  color: inherit;
}

/* ---------- utility bar (topo) ---------- */

.utility-bar {
  border-top: 4px solid var(--green);
  border-bottom: 1px solid var(--border);
}

.utility-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.5rem 34px;
}

.utility-links a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding: 0 0.7rem;
}

.utility-links a:hover {
  color: var(--ink);
}

.utility-divider {
  width: 1px;
  height: 0.9rem;
  background: var(--border);
}

.utility-lang,
.utility-search {
  appearance: none;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
}

.utility-lang:hover,
.utility-search:hover {
  color: var(--ink);
}

/* ---------- secondary nav (menu de referência de layout, Bunge) ---------- */

/* on scroll, the utility bar + header scroll away naturally (they're above
   this nav in the flow) and this nav docks to the top in their place —
   sticky needs no JS for the positioning itself; the box-shadow only shows
   up once .is-stuck is toggled (see app.js), so the nav reads flush with
   the page until it actually docks */
.secondary-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  box-shadow: 0 4px 10px -6px rgba(20, 20, 15, 0);
  transition: box-shadow 0.25s ease;
}

.secondary-nav.is-stuck {
  box-shadow: 0 4px 10px -6px rgba(20, 20, 15, 0.25);
}

.secondary-nav-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.7rem 34px;
  flex-wrap: wrap;
}

/* home only: same breakout box as .header-inner, so this row's content
   starts exactly where the logo does (see body.route-home .header-inner) */
body.route-home .secondary-nav-inner {
  width: 90vw;
  max-width: 1800px;
  margin: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-left: min(4.5vw, 90px);
  padding-right: 0;
}

/* hidden until the bar actually docks — at the top the big logo in the main
   header already shows the brand, so this small one would be redundant */
.secondary-nav-brand {
  display: none;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  margin-right: 0.75rem;
}

.secondary-nav.is-stuck .secondary-nav-brand {
  display: flex;
}

.secondary-nav-brand-mark {
  height: 28px;
  width: auto;
  display: block;
}

.secondary-nav-brand-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  background: var(--border);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0 0.55rem;
  border-radius: 0;
  transition: background-color 0.15s ease;
}

/* like the links, only marks itself green once the bar is actually docked,
   and only while the user is on the home route ("/") */
.secondary-nav.is-stuck .secondary-nav-brand-badge.is-active {
  background: var(--green);
}

.secondary-nav-back {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  padding: 0;
  border-radius: 999px;
}

.secondary-nav-back:hover {
  background: var(--border);
}

.secondary-nav-back[hidden] {
  display: none;
}

.secondary-nav-link {
  display: inline-flex;
  align-items: center;
  height: 22px;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  color: var(--ink);
  padding: 0 0.7rem;
  border-radius: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.secondary-nav-link:hover {
  color: var(--green);
}

/* the active-link highlight only shows once the bar is actually docked
   (.is-stuck) — at the top of the page the main header's own green pill
   already says where you are, so a second green mark here would be redundant */
.secondary-nav.is-stuck .secondary-nav-link.is-active {
  background: var(--green);
  color: var(--ink);
}

/* ---------- header ---------- */

.header-inner {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.75rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.6rem 34px;
}

/* home only: the header row shares the hero image's breakout box exactly
   (see .page-visual--home — same 90vw/1800px, centered) — toggled via
   body.route-home, set by app.js on route change. The row's own edges match
   the hero's edges exactly; padding-left then insets the logo ~5% of the
   hero's width in from that left edge, without changing the hero itself. */
body.route-home .header-inner {
  width: 90vw;
  max-width: 1800px;
  margin: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-left: min(4.5vw, 90px);
  padding-right: 0;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark {
  height: 75px;
  width: auto;
  display: block;
}

/* ---------- nav / liquid highlight ---------- */

.nav {
  /* centered on the header row (and so on the screen — see .header-inner's
     own centering) independent of the logo's width, rather than just
     trailing after it in flex flow */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  /* narrowed from 10.4rem: that width stretched each word's button to fill
     the column, so a horizontal pill (wrapping two words in the same row,
     e.g. FUNDAÇÃO+MODULAR on /modular) spanned the full two-column box even
     though the actual glyphs only fill part of it — made the pill look
     oversized. 8.75rem is the tightest width that still fits the widest
     word at its active font-size (FUNDAÇÃO, ~143px) without clipping. */
  grid-template-columns: 8.75rem 8.75rem;
  /* row height is content-driven (via .nav-word padding) rather than a fixed
     floor — flattened ~6% of the nav's own width (~424px) shorter overall,
     per request, by trimming that padding rather than this row height */
  grid-template-rows: repeat(2, minmax(0, auto));
  grid-template-areas:
    "fundacao modular"
    "decourt  pesquisas";
  row-gap: 3px;
  column-gap: 0.5rem;
}

#word-fundacao  { grid-area: fundacao; }
#word-modular   { grid-area: modular; }
#word-decourt   { grid-area: decourt; }
#word-pesquisas { grid-area: pesquisas; }

.nav-pill {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background: var(--green);
  border-radius: var(--nav-radius);
  z-index: 0;
  pointer-events: none;
  transition:
    left var(--morph-duration) var(--morph-ease),
    top var(--morph-duration) var(--morph-ease),
    width var(--morph-duration) var(--morph-ease),
    height var(--morph-duration) var(--morph-ease),
    border-radius var(--morph-duration) ease;
}

.nav-pill.is-morphing {
  border-radius: 46% / 60%;
}

.nav-word {
  position: relative;
  z-index: 1;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
  padding: 0.02rem 0.7rem;
  border-radius: var(--nav-radius);
  transition: color 300ms ease, transform var(--morph-duration) var(--morph-ease);
  transform: translateX(0);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* modular/pesquisas sit a bit loose from their hub word by default (fundação/
   decourt); pull them horizontally toward the shared center even at rest.
   Vertically they stay centered in their own grid row, same as fundação/
   decourt, so each row reads as a single aligned line (fundação — modular,
   decourt — pesquisas) instead of the two words hugging the row boundary. */
#word-modular,
#word-pesquisas {
  justify-content: flex-start;
}

.nav-word:hover {
  color: var(--green);
}

.nav-word.is-active {
  font-size: 1.19rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.nav-word.is-active:hover {
  color: var(--ink);
}

/* the two words *outside* the green pill (whichever pair is inactive on the
   current route) nudge vertically toward the pill's own center line — fixed
   nudge (not JS-driven, unlike the old CONVERGE system) since each word's
   row position is fixed by its grid-area regardless of which route made it
   active or inactive. Capped at 1px: row-gap is only 3px, and on routes
   where *both* words in a column are inactive at once (e.g. modular+pesquisas
   on "/"), they nudge toward each other from opposite rows — anything much
   bigger than this collides them (tried 5mm/~19px, they overlapped). */
#word-fundacao:not(.is-active),
#word-modular:not(.is-active) {
  transform: translateY(1px);
}

#word-decourt:not(.is-active),
#word-pesquisas:not(.is-active) {
  transform: translateY(-1px);
}

/* DECOURT reads visually smaller than FUNDAÇÃO at the same font-size
   (narrower glyphs, no accents) — bumped so both look the same size when
   paired together in the home pill. Uses transform:scale (not font-size)
   so the layout box — and so the grid row height — stays identical to
   FUNDAÇÃO's, keeping the pill's rows symmetric around its own center.
   Scoped to the home route only: paired with PESQUISAS on /pesquisa, it
   stays the standard active size. */
.nav[data-route="/"] #word-decourt.is-active {
  transform: scale(1.2071);
}

@media (max-width: 520px) {
  .nav {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- layout ---------- */

main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem 34px 4rem;
}

.view {
  animation: fade-in 420ms ease both;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* shared top visual for all 3 pages: historic/current pair (or placeholders),
   full width, with the page's text flowing below it */
.page-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.page-visual picture {
  display: contents;
}

.visual-img {
  width: 100%;
  height: 460px;
  object-fit: contain;
  background: #fafaf5;
  border-radius: 8px;
  display: block;
}

/* pesquisa page: a single large centered image instead of the hero pair.
   display:block overrides .page-visual's 2-column grid — without it the
   lone image sat in just the first column, at half width. */
.page-visual--single {
  display: block;
  margin-bottom: 2rem;
  text-align: center;
}

.page-visual--single .visual-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 640px;
  margin: 0 auto;
  background: none;
  border-radius: 8px;
  object-fit: contain;
}

/* home hero: breaks out of the main content column to occupy 90% of the
   viewport width, capped so it doesn't grow unreasonably large on very
   wide/ultrawide screens. Centered on the viewport, not the padded column. */
.page-visual--home {
  width: 90vw;
  max-width: 1800px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.page-visual--home .visual-img {
  width: 100%;
  max-height: none;
}

/* "A Empresa" intro: text on the left, hero-modern-drawing.png framing
   the right side, side by side with the opening paragraph and stats. */
.empresa-intro {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.empresa-intro-text {
  flex: 1 1 auto;
  min-width: 0;
}

.empresa-intro-img {
  flex: 0 0 560px;
  width: 560px;
  height: auto;
  margin-top: 176px;
  border-radius: 8px;
  background: #fafaf5;
}

@media (max-width: 720px) {
  .empresa-intro {
    flex-direction: column;
  }

  .empresa-intro-img {
    width: 100%;
    flex-basis: auto;
    margin-top: 0;
  }
}

/* Estacas Modulares (/modular): the whole page is two columns — all the
   text sections stacked on the left, both videos stacked on the right.
   The media column stays put (sticky) while the longer text column
   scrolls past it, so the videos stay in view. */
.modular-layout {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
}

.modular-layout-text {
  flex: 1 1 auto;
  min-width: 0;
}

.modular-layout-media {
  flex: 0 0 380px;
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  position: sticky;
  top: 90px;
}

/* sections read as one continuous column of text, not separate blocks —
   no divider line between Vantagens / Desenvolvimentos / Formulação */
.page-section--plain {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 2.5rem;
}

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

/* the Nesma Partners video is portrait (natively ~272x358, not 16:9) —
   forcing it into a widescreen box clipped most of the frame */
.video-embed--portrait {
  padding-bottom: 131.4%;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-credit {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  margin: 0.6rem 0 0;
  line-height: 1.4;
}

.video-credit a {
  color: var(--ink);
}

/* YouTube video: a clickable thumbnail instead of a permanent iframe —
   opens the real embed in a lightbox on click (also sidesteps the
   embed's origin restrictions when the page is opened via file://) */
.video-thumb-btn {
  display: block;
  width: 100%;
  border: none;
  cursor: pointer;
  appearance: none;
  font: inherit;
}

.video-thumb-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  opacity: 0.9;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.video-thumb-btn:hover .video-thumb-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 5vw;
}

.video-modal[hidden] {
  display: none;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 15, 0.85);
}

.video-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 960px;
}

.video-modal-dialog .video-embed {
  padding-bottom: 56.25%;
}

.video-modal-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 900px) {
  .modular-layout {
    flex-direction: column;
  }

  .modular-layout-media {
    width: 100%;
    flex-basis: auto;
    position: static;
  }
}

.visual-placeholder {
  width: 100%;
  height: 460px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: #fafaf5;
  color: var(--muted);
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}

.hero-headline {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3rem;
}

.hero-headline h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.hero-headline-sub {
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.content-block {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}

.content-block p + p {
  margin-top: 1em;
}

/* ---------- page sub-nav + sections (página 1) ---------- */

.page-subnav {
  display: flex;
  gap: 2rem;
  padding: 1rem 0;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.page-subnav a {
  font-weight: 400;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  padding-bottom: 0.2rem;
}

.page-subnav a:hover {
  color: var(--green-dark);
  border-bottom-color: var(--green);
}

.page-section {
  padding-bottom: 3.5rem;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 1.5rem;
}

.page-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.page-section h2 {
  font-size: 1.6rem;
}

.page-section h3 {
  margin: 1.75em 0 0.25em;
  font-size: 1.05rem;
  font-weight: 700;
}

.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 1.75em 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stat {
  display: flex;
  flex-direction: column;
}

.stat-num {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- lâminas (acervo técnico) ---------- */

.lamina-card {
  margin-top: 1.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafaf5;
}

.lamina-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.lamina-card-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.lamina-card p {
  margin: 0;
}

.lamina-card p + p {
  margin-top: 0.75rem;
}

.publications-list {
  margin-top: 1em;
  padding-left: 1.25em;
  font-size: 0.92rem;
  color: var(--muted);
}

.publications-list li {
  padding-left: 0.25em;
}

.publications-list li + li {
  margin-top: 0.7em;
}

.publications-list em {
  color: var(--ink);
  font-style: normal;
}

.tag-em-breve {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--green);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- calculadora do método da rigidez ---------- */

.calc-card {
  margin-top: 2rem;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafaf5;
}

.calc-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.calc-desc {
  color: var(--muted);
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.calc-help {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
}

.calc-help > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--green-dark);
  list-style: none;
}

.calc-help > summary::-webkit-details-marker {
  display: none;
}

.calc-help > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  transition: transform 0.15s ease;
}

.calc-help[open] > summary::before {
  transform: rotate(90deg);
}

.calc-help ol {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.88rem;
  line-height: 1.55;
}

.calc-help ol li + li {
  margin-top: 0.65rem;
}

.calc-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.calc-field label {
  font-weight: 400;
  font-size: 0.9rem;
}

.calc-field input {
  width: 6rem;
}

.calc-field input,
.calc-field select {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--paper);
}

.calc-table-scroll {
  overflow-x: auto;
  margin-bottom: 0.75rem;
}

.calc-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.calc-table th,
.calc-table td {
  padding: 0.4rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.calc-table th {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.calc-table input {
  width: 100%;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--paper);
}

.calc-point-n {
  color: var(--muted);
  width: 2rem;
}

.calc-rigidez {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.calc-remove-row {
  appearance: none;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
}

.calc-remove-row:hover {
  color: var(--ink);
}

.calc-table-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.calc-btn-secondary {
  appearance: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
}

.calc-btn-secondary:hover {
  border-color: var(--green);
  color: var(--green-dark);
}

.calc-chart-wrap {
  margin-bottom: 1.75rem;
}

.calc-chart-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.calc-chart-legend {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.calc-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.calc-chart-legend-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  display: inline-block;
}

.calc-chart-caption {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
  margin: 0.5rem 0 0;
}

.calc-curves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.calc-curve {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
}

.calc-curve h4 {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}

.calc-curve label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 0.55rem;
}

.calc-curve select,
.calc-curve input {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--paper);
  width: 6rem;
}

.calc-run-btn {
  appearance: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 999px;
  background: var(--green);
  color: var(--ink);
}

.calc-run-btn:hover {
  background: var(--green-dark);
}

.calc-results {
  margin-top: 1.5rem;
  overflow-x: auto;
}

.calc-results-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.calc-results-table th,
.calc-results-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.calc-results-table th {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.calc-error {
  color: var(--muted);
  font-style: italic;
}

.calc-tabs {
  margin-top: 1rem;
}

.calc-tabs-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.calc-tabs-label {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-right: 0.35rem;
  margin-bottom: -1px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--border);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.calc-tabs-input:checked + .calc-tabs-label {
  background: var(--paper);
  color: var(--green-dark);
}

.calc-tabs-input:focus-visible + .calc-tabs-label {
  outline: 2px solid var(--green-dark);
  outline-offset: 1px;
}

.calc-tabs-panel {
  display: none;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 0 6px 6px 6px;
  background: var(--paper);
}

.calc-tabs-panel p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink);
}

.calc-tabs-panel p + p {
  margin-top: 0.75rem;
}

#calc-tab-leigos:checked ~ #calc-tabs-panel-leigos,
#calc-tab-tecnicos:checked ~ #calc-tabs-panel-tecnicos {
  display: block;
}

.calc-hint {
  color: var(--muted);
  font-style: italic;
  font-size: 0.9rem;
}

/* ---------- contact form (Fale Conosco) ---------- */

.contact-form {
  max-width: 32rem;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-field label {
  font-size: 0.85rem;
  color: var(--muted);
}

.contact-field input,
.contact-field textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: 2px solid var(--green-dark);
  outline-offset: 1px;
}

.contact-submit {
  align-self: flex-start;
  appearance: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.7rem 1.75rem;
  border: none;
  border-radius: 999px;
  background: var(--green);
  color: var(--ink);
}

.contact-submit:hover {
  background: var(--green-dark);
}

.contact-status {
  font-size: 0.9rem;
  color: var(--green-dark);
}

.advantages-list {
  margin-top: 1em;
  padding-left: 1.25em;
}

.advantages-list li {
  padding-left: 0.25em;
}

.advantages-list li + li {
  margin-top: 0.6em;
}

/* ---------- lâminas retrospectivas (Decourt Pesquisas) ---------- */

/* the deck is a stacked list of accordion cards — every lâmina starts
   closed, showing only its summary row (year, small photo, title, one-line
   description). Opening one closes any other that was open (see
   lamina-deck.js) — only one lâmina fully expanded at a time. Scrolling the
   page is the only navigation; there's no carousel. */
.lamina-deck {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lamina-slide {
  padding: 1.25rem 1.75rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 8px;
  background: #fafaf5;
  transition: border-left-color 0.2s ease;
}

/* a visible cue for which card is currently expanded, scannable while
   skimming down a long stacked list */
.lamina-slide:has(.lamina-accordion[open]) {
  border-left-color: var(--green);
}

.lamina-accordion {
  margin: -1.25rem -1.75rem;
}

.lamina-summary {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.75rem;
  cursor: pointer;
  list-style: none;
}

.lamina-summary::-webkit-details-marker {
  display: none;
}

.lamina-summary-year {
  flex-shrink: 0;
  min-width: 4.25rem;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--green-dark);
  line-height: 1;
}

.lamina-summary-text {
  flex: 1;
  min-width: 0;
}

.lamina-summary-title {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

.lamina-summary-title-sub {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.85em;
}

.lamina-summary-desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.lamina-summary-chevron {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.lamina-summary-chevron svg {
  width: 100%;
  height: 100%;
}

.lamina-accordion[open] .lamina-summary-chevron {
  transform: rotate(180deg);
}

.lamina-accordion-body {
  padding: 0.25rem 1.75rem 1.5rem;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
  padding-top: 1.25rem;
}

.lamina-accordion-body p {
  margin: 0 0 0.9rem;
}

.lamina-accordion-body p:last-child {
  margin-bottom: 0;
}

.lamina-chart {
  margin: 1.25rem 0;
}

.lamina-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

.lamina-chart-caption {
  margin: 0.4rem 0 0 !important;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--muted);
}

.lamina-photo {
  margin: 1.25rem 0;
}

.lamina-photo img {
  display: block;
  max-width: 100%;
  height: 180px;
  width: auto;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

.lamina-photo-caption {
  margin: 0.5rem 0 0 !important;
  font-size: 0.78rem;
  color: var(--muted);
}

.lamina-accordion-body ul {
  margin: 0 0 0.9rem;
  padding-left: 1.25em;
}

.lamina-accordion-body li + li {
  margin-top: 0.5em;
}

.lamina-close-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 1.25rem 0 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fafaf5;
  color: var(--muted);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lamina-close-btn:hover {
  background: var(--green);
  color: var(--ink);
  border-color: var(--green);
}

.lamina-close-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.lamina-inline-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.lamina-inline-link:hover {
  color: var(--ink);
}

.lamina-data-table-wrap {
  margin: 1.25rem 0;
  overflow-x: auto;
}

.lamina-data-table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.lamina-data-table th,
.lamina-data-table td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.lamina-data-table th {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (max-width: 720px) {
  .page-visual {
    grid-template-columns: 1fr;
  }
  .visual-img,
  .visual-placeholder {
    height: 220px;
  }
  .page-visual--single .visual-img {
    max-height: 280px;
  }
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.25rem;
  }
  /* undo the desktop screen-centering: on narrow screens the nav should
     stay in normal flow, stacked under the logo like everything else in
     this column layout, not floating centered over it */
  .nav {
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }
  main {
    padding: 2rem 1.25rem 3rem;
  }
  .utility-links {
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.6rem 1.25rem;
  }
  .secondary-nav-inner {
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0.9rem 1.25rem;
    gap: 0.25rem;
  }
  /* one link per line on mobile — order in the markup already runs
     A Empresa → ... → Acervo, so this alone reproduces that list */
  .secondary-nav-link {
    flex: 1 1 100%;
    height: auto;
    padding: 0.5rem 0.2rem;
  }
  .hero-headline h1,
  .hero-headline-sub {
    font-size: 1.75rem;
  }
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.site-footer .copy {
  margin-top: 0.5rem;
}