/* ===================================================================================

* Theme Name: Archidex Child
* Theme URI: https://wp.ravextheme.com/archidex/
* Author: ravextheme
* Author URI: https://themeforest.net/user/ravextheme
* Description: Archidex - Architecture Interior WordPress Theme
* Version: 1.0.0
* Tested up to: 6.9
* Requires PHP: 7.4
* Template: archidex
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of future updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */

/* =========================================================================
   0) SYNTHETIC NAV — pages without a native .portfolio-nav
   Pages built with the "Elementor Full Width" template (e.g. /servicos/)
   render an Elementor Archidex Header widget at the top of the page
   content instead of the theme's lateral nav. JS injects a synthetic
   .portfolio-nav (class `.trc-synthetic-nav`) so the same blur bar appears
   everywhere; hide the Elementor-built header here so the two don't stack.
   ========================================================================= */
.trc-has-synthetic-nav .header-area-3,
.trc-has-synthetic-nav .elementor-widget-archidex_header_one,
.trc-has-synthetic-nav header.header-area-3 {
  display: none !important;
}

/* =========================================================================
   1) TOP BAR (.portfolio-nav) — UNIFIED across all pages
   - Fixed horizontal top bar (replaces the lateral strip used on home).
   - Glassmorphism (translucent + backdrop-filter blur) so hero/banner
     imagery shows through but the bar reads as a defined element.
   - Layout: 3 flex children with space-between gives:
       [ logo / home-icon (left) ] [ inline menu (center) ] [ mail (right) ]
   ========================================================================= */
.portfolio-nav {
  /* !important here to defeat both the parent theme's lateral defaults
     (column, 100vh, fixed left strip) and any responsive media-query
     overrides that would otherwise win on specificity. */
  width: 100vw !important;
  height: 86px !important;
  /* Unified dark glass tint across ALL pages (was home-only before).
     The bar sits over either the hero slider (home) or the breadcrumb /
     content sections (inner pages); the dark wash + blur keeps the menu
     contrast consistent everywhere. */
  background: rgba(40, 40, 40, 0.28) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-right: none !important;
  border-bottom: 1px solid rgba(235, 234, 228, 0.18) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1100 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* Alinhado pelos limites da coluna de conteúdo (1620px): home icon/logo
     no limite esquerdo (= título do projecto / imagens) e menu a terminar
     no limite direito (= fim do texto de informação). Mínimo 40px em
     ecrãs estreitos. Aplica-se a todo o site (a barra é única). */
  padding: 0 max(40px, calc((100vw - 1620px) / 2)) !important;
}

/* =========================================================================
   2) LOGO (TRC monogram SVG, white strokes, natural portrait orientation)
   - Hide the existing demo PNG, paint our SVG as background instead.
   - mix-blend-mode: difference -> bright on dark, dark on white (adaptive).
   ========================================================================= */
.portfolio-nav .logo img {
  display: none;
}
.portfolio-nav .logo {
  display: block;
  width: 42px;
  height: 50px;
  align-self: center;
  background-image: url('assets/logo.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: none;
  transform-origin: center center;
  /* No vertical margin — the bar is 86px and centers the logo via flex
     align-items. Previous lateral layout used margin: 24px 0 to space the
     logo from the menu trigger below it; not needed in the horizontal bar. */
  margin: 0;
  mix-blend-mode: difference;
}
/* Inner pages: hide the logo entirely — the home icon (injected by JS into
   .trc-left-cluster) takes its place on the left of the bar. */
body:not(.home) .portfolio-nav .logo {
  display: none !important;
}

/* =========================================================================
   3) MENU TRIGGER ICON (circular, minimalist)
   - 36px circle outline, 2 short dashes inside (replaces 3 white bars).
   - Hover: solid black fill, border black, dashes stay white.
   ========================================================================= */
.portfolio-nav .header__navicon .side-toggle .bar-icon {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(235, 234, 228, 0.85);
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.portfolio-nav .header__navicon .side-toggle .bar-icon span {
  width: 14px;
  height: 1.5px;
  margin: 0;
  background: var(--trc-ivory);
  transition: background-color 0.3s ease;
}
.portfolio-nav .header__navicon .side-toggle .bar-icon span:nth-child(2) {
  margin-left: 0;
}
.portfolio-nav .header__navicon .side-toggle .bar-icon span:nth-child(3) {
  display: none;
}
.portfolio-nav .header__navicon .side-toggle .bar-icon:hover {
  background-color: #000;
  border-color: #000;
}
.portfolio-nav .header__navicon .side-toggle .bar-icon:hover span {
  background-color: var(--trc-ivory);
}

/* =========================================================================
   5) OFFCANVAS MENU (.side-info-4)
   - Translucent cream + 6px backdrop blur (light glassmorphism).
   - Reveal direction changed from top->bottom to left->right via clip-path.
   ========================================================================= */
.side-info-4 {
  background: rgba(237, 236, 232, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Reveal direction is conditional on page type:
   - Home: left -> right wipe.
   - Inner pages: top -> bottom drop (fits a horizontal top header). */
body.home .side-info-4 {
  clip-path: inset(0 100% 0 0);
}
body.home .side-info-4.info-open,
body:not(.home) .side-info-4.info-open {
  clip-path: inset(0);
}
body.home .side-info-4.closing {
  clip-path: inset(0 100% 0 0);
}
body:not(.home) .side-info-4 {
  clip-path: inset(0 0 100% 0);
}
body:not(.home) .side-info-4.closing {
  clip-path: inset(0 0 100% 0);
}

/* =========================================================================
   TOP BAR — left/center/right children layout (universal)
   The bar's flex children are arranged left → right via space-between:
     [ .trc-left-cluster | .logo ]   [ .trc-top-menu ]   [ .portfolio-nav__content ]
   The hamburger trigger (.header__navicon) is hidden on desktop — see the
   @media block further down — so it's not part of the visible layout.
   ========================================================================= */
/* Left cluster: groups [logo + home icon] on inner pages.
   On home there is no cluster — the bare .logo sits as the first flex child. */
.trc-left-cluster {
  display: flex;
  align-items: center;
  gap: 24px;
}
.trc-left-cluster .logo {
  display: none !important;
}
/* Home icon — mirrors the mail icon's circular button style.
   White stroke/glyph over the dark glass bar. Hover inverts to white fill
   with dark glyph (matches the menu pill hover). */
.trc-home-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--trc-ivory);
  border-radius: 50%;
  color: var(--trc-ivory);
  background-color: transparent;
  text-decoration: none;
  position: relative;
  z-index: 5;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.trc-home-icon i {
  font-size: 14px;
  color: inherit;
  line-height: 1;
}
.trc-home-icon:hover {
  background-color: var(--trc-ivory);
  border-color: var(--trc-ivory);
  color: #1c1c25;
}

/* Right cluster (.portfolio-nav__content) — REMOVED per request.
   The mail icon used to live here; now hidden so the bar shows only
   [ logo / home-icon (left) ]   [ inline menu (centered absolutely) ]. */
.portfolio-nav .portfolio-nav__content {
  display: none !important;
}
/* Menu trigger margin reset (still visible on mobile via @media below). */
.portfolio-nav .header__navicon {
  margin: 0 !important;
}
.portfolio-nav .bar-icon {
  border-color: var(--trc-ivory) !important;
}
.portfolio-nav .bar-icon span {
  background-color: var(--trc-ivory) !important;
}
.portfolio-nav .bar-icon:hover {
  background-color: var(--trc-ivory) !important;
  border-color: var(--trc-ivory) !important;
}
.portfolio-nav .bar-icon:hover span {
  background-color: #1c1c25 !important;
}

/* Hamburger trigger: hidden on desktop (the inline .trc-top-menu replaces
   it). Restored on tablet/mobile breakpoints where the inline menu wraps
   awkwardly — users tap the hamburger and use the offcanvas instead. */
@media (min-width: 992px) {
  .portfolio-nav .header__navicon {
    display: none !important;
  }
}
@media (max-width: 991px) {
  .trc-top-menu {
    display: none !important;
  }
}

/* =========================================================================
   TOP-BAR INLINE MENU (.trc-top-menu)
   Five nav links rendered inline in the center of the bar, each with the
   theme's letter-slide hover (same mechanic used on the footer's "Let's
   work now" .rr-btn-primary). JS (`injectTopMenu`) builds the markup from
   the offcanvas menu links so the routing stays driven by the WP menu.
   ========================================================================= */
.trc-top-menu {
  display: flex;
  align-items: center;
  gap: 32px;
  /* Right-aligned in the bar (was centered before). Pinned to the same
     40px inset that .portfolio-nav uses for its horizontal padding. */
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
}
.trc-top-menu .trc-top-menu-link {
  text-decoration: none;
  /* White text in the default state — bar background is dark glass on every
     page, so white labels read with strong contrast. */
  color: var(--trc-ivory);
  /* Typography matched 1-to-1 with the Archidex default-header menu used on
     /servicos/ (Bai Jamjuree, 16px / 500 / capitalize / letter-spacing -0.48). */
  font-family: "Bai Jamjuree", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.48px;
  text-transform: capitalize;
  position: relative;
  display: inline-flex;
  line-height: 1;
  /* Pill removed — items are bare text links. Small vertical pad keeps the
     click target comfortable without forcing a button look. */
  padding: 6px 0;
  /* Hover effect = subtle scale-up of the whole label.
     transform-origin: center makes the growth visually balanced (the link
     expands evenly outward, not sliding to one side). */
  transform-origin: center;
  transition: transform 0.25s ease;
}
/* Hover: text grows a touch — no background, no color flip. */
.trc-top-menu .trc-top-menu-link:hover {
  transform: scale(1.12);
}
.trc-top-menu .trc-top-menu-link .trc-menu-text {
  position: relative;
  display: inline-flex;
}
.trc-top-menu .trc-top-menu-link .trc-menu-text > span {
  /* Letter-slide animation REMOVED per request. Chars stay static — only
     the hover transform applies to the whole link. The <span> wrapping is
     left in place (no visual cost) so the effect can be re-enabled later
     without re-running the JS. */
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
  display: inline-block;
  /* IMPORTANT: each character lives in its own <span>, so the parent's
     `text-transform: capitalize` would treat EVERY span as a new "word"
     and capitalize its single letter — making "Projectos" render as
     "PROJECTOS". Override to none so each span shows its source case
     (P, r, o, j, e, c, t, o, s) verbatim. */
  text-transform: none !important;
}

/* =========================================================================
   PAGE TITLE — slide in from right + sit at the bottom of the banner.
   mix-blend-mode: difference makes the title automatically invert against
   its backdrop: bright over the dark hero image, black over the white area
   below — so descenders (j, p, g, q, y) overflowing onto the white become
   black for free. */
@keyframes trc-slide-in-right {
  from { transform: translateX(40vw); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
body:not(.home) .elementor-element-09ae9c3 {
  position: relative;
  overflow: visible !important;
}
body:not(.home) .elementor-element-09ae9c3 > * {
  overflow: visible !important;
}
/* Elementor wraps each widget in a .elementor-element (position:relative)
   which would become the positioning context. Force them static so the
   absolute title positions relative to .elementor-element-09ae9c3 (the
   section) instead of the widget's collapsed 0-height box. */
body:not(.home) .elementor-element-09ae9c3 .elementor-element-4e422d1,
body:not(.home) .elementor-element-09ae9c3 .elementor-widget-container {
  position: static !important;
}
body:not(.home) .archidex-page-title {
  position: absolute;
  bottom: 0;
  left: 40px;
  margin: 0 !important;
  padding: 0;
  color: var(--trc-ivory);
  animation: trc-slide-in-right 2s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

/* =========================================================================
   SUBTITLE — fade in (moderate 1.5s) + align right edge with the mail icon
   (40px from page right; current natural right offset is ~7px so pull
   inward by ~33px via margin-right). */
@keyframes trc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body:not(.home) .elementor-element-95ff6db,
body:not(.home) .breadcrumb-01 .elementor-widget-heading {
  animation: trc-fade-in 1.5s ease-out 0.3s both;
}

/* =========================================================================
   .breadcrumb-01 — reusable hero/breadcrumb pattern.
   Apply via Elementor: edit the SECTION, Advanced -> CSS Classes -> add
   `breadcrumb-01`. Subtitle aligns right (with mail icon), title aligns
   left (with logo). Element ID also targeted for immediate effect on /projectos/. */
.breadcrumb-01 .elementor-widget-heading,
.breadcrumb-01 h6.elementor-heading-title,
.elementor-element-95ff6db .elementor-heading-title {
  text-align: right !important;
}
.breadcrumb-01 .elementor-widget-heading,
.elementor-element-95ff6db {
  margin-left: auto !important;
  margin-right: 20px !important;
}

/* /projectos/ — collapse the empty spacer section between hero and project
   grid (theme had height: 380px hardcoded). Match the gap used on /sobre-nos/
   (170px from padding-top on its content section). */
.elementor-element-2b47b7d,
.elementor-element-6e6544a {
  height: 170px !important;
  min-height: 0 !important;
}

/* Project detail pages + /projectos/ — kill the demo `breadcrumb-2.jpg`
   so it doesn't flash on load. JS sets the actual image afterwards
   (a random project image on /projectos/, the project's own image on
   detail pages). Add new page-ids here as projects are created. */
/* (2026-07-03) Regra que anulava o fundo do banner em /projectos/ e no Rato
   REMOVIDA: a imagem demo do tema já não existe no template 499 e o banner
   base vem agora da imagem de destaque (trc_hero_banner_css). O JS
   setProjectsListBannerRandom/setProjectBannerImage continua a sobrepor
   uma imagem de projecto quando disponível. */
body.page-id-113 .elementor-element-b791298,
body.page-id-137 .elementor-element-b791298 {
  background-color: #1c1c25 !important; /* base escura sob a imagem */
}

/* Project cards: only the image and the "Ver projecto" button are
   clickable — card body itself uses the default cursor. */
.elementor-element-4b754e0 > .e-con-full {
  cursor: default;
}
/* Text-column layout: title at top, then a flexible gap, then the
   Year/Location row stuck to the button at the bottom. Achieved with
   `margin-top: auto` on the Year/Location row (2nd flex child) — it
   absorbs the available space and pulls the button along with it. */
.elementor-element-4b754e0 > .e-con-full > .e-con-full {
  justify-content: flex-start !important;
  gap: 12px;
}
.elementor-element-4b754e0 > .e-con-full > .e-con-full > .e-con-full:nth-of-type(2) {
  margin-top: auto !important;
}
.trc-card-cta.rr-btn-primary {
  margin-top: 0 !important;
}

/* Project card CTA — uses the theme's .rr-btn-primary letter-slide button.
   We override padding so it fits inside the card column (default is the
   tall 26px 35px pill used in the footer call-to-action). */
.trc-card-cta.rr-btn-primary {
  margin-top: 20px;
  padding: 14px 22px;
}

/* /apartamento-rato/ — shift the "We work closely with builders..."
   description box up by ~108px (≈20% of its 540px section height) so it
   sits closer to the project banner. Also nudge it 40px to the right so
   its left edge aligns with the "Apartamento Rato" title above. */
body.page-id-137 .elementor-element-a153f06 {
  margin-top: -108px !important;
  padding-left: 40px !important;
}

/* =========================================================================
   6) OFFCANVAS MENU LINKS — white wash on hover.
   - .side-info-4 prefix raises specificity over the meanmenu plugin's
     .mean-container .mean-nav ul li a:hover (specificity 0,3,3), which would
     otherwise pin the hover to its own 0.1 alpha value.
   ========================================================================= */
.side-info-4 .archidex-offcanvas-menu a.nav-links {
  transition: background-color 0.25s ease;
}
.side-info-4 .archidex-offcanvas-menu a.nav-links:hover,
.side-info-4 .mean-container .mean-nav ul li a:hover {
  background-color: rgba(235, 234, 228, 0.2);
}

/* =========================================================================
   7) OFFCANVAS GRID — center the Menu column.
   The theme uses `grid-template-columns: 325px 500px 170px` with
   `justify-content: space-between`, which makes the gaps equal between
   columns. Because the social column (325) is wider than the mail column
   (170), the menu ends up shifted ~77px to the right of viewport center.
   Switch to `1fr 500px 1fr` so the side tracks are equal width and the
   menu is mathematically centered regardless of viewport size.
   ========================================================================= */
/* =========================================================================
   GRID LAYOUT: narrow social column (left) | menu (auto) | spacer (1fr)
   - Social column drops from 325px to 140px because we collapse it to a
     horizontal icon row stacked at the bottom (above the Fechar button).
   - Menu uses `auto` so it sizes to its widest item and stays left-aligned.
   - Right track is `1fr` so the empty area extends to the right edge.
   ========================================================================= */
.side-info-4 .offcanvas-4 .contact-meta {
  grid-template-columns: 140px auto 1fr;
}

/* =========================================================================
   MENU COLUMN: vertical line on the right + black/white inverse hover
   - Padding-right 10px + border-right 1px = the "10px gap then vertical line"
   - Link hover fills its full box (width of column inc. padding) with black
     and turns the text white — same inverse logic as the close button.
   ========================================================================= */
.side-info-4 .archidex-offcanvas-menu {
  padding-right: 10px;
  border-right: 1px solid rgba(46, 45, 45, 0.42);
}
/* Strip every divider line: theme draws them via border-top on <li> AND
   border-bottom on <a>. Kill both. */
.side-info-4 .archidex-offcanvas-menu li.menu-item,
.side-info-4 .archidex-offcanvas-menu a.nav-links,
.side-info-4 .mean-container .mean-nav ul li,
.side-info-4 .mean-container .mean-nav ul li a {
  border-top: none !important;
  border-bottom: none !important;
}

.side-info-4 .archidex-offcanvas-menu a.nav-links,
.side-info-4 .mean-container .mean-nav ul li a:not(.mean-expand) {
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.side-info-4 .archidex-offcanvas-menu a.nav-links:hover,
.side-info-4 .mean-container .mean-nav ul li a:not(.mean-expand):hover {
  /* Brighter white wash. Extend edge-to-edge via two horizontal box-shadows
     so the hover bg visually spans the full viewport width, not just the
     link's natural column. */
  background-color: rgba(235, 234, 228, 0.35);
  box-shadow:
    100vmax 0 0 rgba(235, 234, 228, 0.35),
    -100vmax 0 0 rgba(235, 234, 228, 0.35);
  color: #1c1c25;
}

/* Letter-slide hover effect on menu links — replicates the .rr-btn-primary
   letter behaviour. JS wraps each character in a <span> inside .trc-menu-text. */
.side-info-4 .archidex-offcanvas-menu a.nav-links .trc-menu-text {
  position: relative;
  display: inline-flex;
  z-index: 1;
}
.side-info-4 .archidex-offcanvas-menu a.nav-links .trc-menu-text > span {
  opacity: 1;
  transition: none;
  display: inline-block;
  transform: translateX(0) scale(1);
}
.side-info-4 .archidex-offcanvas-menu a.nav-links:hover .trc-menu-text > span {
  opacity: 0;
  transform: translateX(-10px) scale(1.2);
}
.side-info-4 .archidex-offcanvas-menu a.nav-links:hover .trc-menu-text > span.animate {
  opacity: 1;
  color: #1c1c25;
  transform: translateX(0) scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

/* =========================================================================
   SOCIAL COLUMN -> horizontal row of icon buttons at bottom (above Fechar)
   - Hide the "Social Media" heading.
   - Stack column flex with justify-content: flex-end so icons sit bottom.
   - Icons via Font Awesome 5 Brands glyphs added by ::before pseudo.
   - Hover mirrors the menu hover: black fill + white glyph.
   - Order in markup: 1) LinkedIn, 2) Instagram, 3) Facebook
     (matching the user's current WP menu — change here if reordering).
   ========================================================================= */
.side-info-4 .offcanvas-4 .contact-item.archidex-offcanvas-social {
  position: static;
}
.side-info-4 .offcanvas-4 .contact-item.archidex-offcanvas-social > .title {
  display: none;
}
/* Position the social row absolute relative to the offcanvas viewport
   (.side-info-4 is position:fixed) and align it on the same y-axis as the
   round close button at the bottom-right, sitting just to its left. */
.side-info-4 .offcanvas-4 .contact-item.archidex-offcanvas-social ul.socail-media {
  position: absolute;
  left: 100px;
  right: auto;
  bottom: 37px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.side-info-4 .offcanvas-4 .contact-item.archidex-offcanvas-social ul.socail-media li {
  margin: 0;
}
.side-info-4 .offcanvas-4 .contact-item.archidex-offcanvas-social ul.socail-media li a {
  font-size: 0 !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid #1c1c25;
  border-radius: 50%;
  color: #1c1c25;
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.side-info-4 .offcanvas-4 .contact-item.archidex-offcanvas-social ul.socail-media li a::before {
  font-family: "Font Awesome 5 Brands" !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
}
.side-info-4 .offcanvas-4 .contact-item.archidex-offcanvas-social ul.socail-media li:nth-child(1) a::before { content: "\f0e1" !important; } /* LinkedIn */
.side-info-4 .offcanvas-4 .contact-item.archidex-offcanvas-social ul.socail-media li:nth-child(2) a::before { content: "\f16d" !important; } /* Instagram */
.side-info-4 .offcanvas-4 .contact-item.archidex-offcanvas-social ul.socail-media li:nth-child(3) a::before { content: "\f09a" !important; } /* Facebook */
.side-info-4 .offcanvas-4 .contact-item.archidex-offcanvas-social ul.socail-media li a:hover {
  background-color: #1c1c25;
  color: var(--trc-ivory);
  border-color: #1c1c25;
}

/* =========================================================================
   FECHAR (close) button -> minimalist round X on the bottom-right.
   Theme uses `.side-info-4 .offcanvas-4 .side-info-close` (specificity 0,3,0)
   and sets width/height/padding/border-radius. !important here to defeat it.
   - Hide the "Fechar" text via font-size:0 + color: transparent.
   - Re-enable the icon's font-size explicitly so the X stays visible.
   - Hover mirrors the menu icon: black fill + white X. */
.side-info-4 .offcanvas-4 .side-info-close {
  position: absolute !important;
  bottom: 30px !important;
  right: 30px !important;
  left: auto !important;
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: 1.5px solid #1c1c25 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  color: transparent !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.side-info-4 .offcanvas-4 .side-info-close i.fa-times,
.side-info-4 .offcanvas-4 .side-info-close i.fas {
  font-size: 16px !important;
  color: #1c1c25 !important;
  line-height: 1;
  display: inline-block;
  transition: color 0.3s ease;
}
.side-info-4 .offcanvas-4 .side-info-close:hover {
  background-color: #1c1c25 !important;
  border-color: #1c1c25 !important;
}
.side-info-4 .offcanvas-4 .side-info-close:hover i.fa-times,
.side-info-4 .offcanvas-4 .side-info-close:hover i.fas {
  color: var(--trc-ivory) !important;
}

/* =========================================================================
   "MOSTRAR MAIS" / "SHOW MORE" / "VER PROJECTO" BUTTON
   - Outline + hover mirrors the menu icon (black fill, white arrow on hover).
   - Pull the button up so it aligns vertically with the right-side
     navigation arrows (.portfolio-arrow at ~mid-slide height) instead of
     sitting at the very bottom of the slide content. */
/* Theme sets margin-top: 250px on .portfolio__item .content .show (0,3,0)
   which puts the button at the very bottom of the slide. Pull it up so it
   sits near the same y as the right-side slider arrows. */
.portfolio__item .content a.show {
  margin-top: 110px !important;
}
.swiper-slide a.show span {
  background-color: transparent !important;
  border: 1.5px solid rgba(235, 234, 228, 0.85);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.swiper-slide a.show span i {
  color: var(--trc-ivory) !important;
  transition: color 0.3s ease;
}
.swiper-slide a.show:hover span {
  background-color: var(--trc-oatmeal) !important;
  border-color: var(--trc-oatmeal);
}
.swiper-slide a.show:hover span i {
  color: var(--trc-ink) !important;
}

/* =========================================================================
   HERO SLIDER — keep image aspect ratio
   The theme uses `object-fit: fill` which distorts images that don't match
   the container's aspect. Switch to `cover` so the image fills the box
   while preserving aspect (cropping equally on top/bottom if needed).
   ========================================================================= */
.swiper-slide img,
.archidex_hero_slider img {
  object-fit: cover;
  object-position: center;
}

/* =========================================================================
   PROJECTOS CPT — listing grid (shortcode [trc_projectos])
   Drop this shortcode into an Elementor Text Editor / Shortcode widget on
   /projectos/ in place of the existing static cards. Each card is a real
   WP CPT entry, so the grid populates itself from the admin.
   ========================================================================= */
.trc-projectos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 80px 40px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 60px 40px 100px;
  list-style: none;
}
.trc-projectos-empty {
  padding: 60px 40px;
  text-align: center;
  color: #777;
}

.trc-projecto-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.trc-projecto-image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: #f1f0eb;
}
.trc-projecto-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.trc-projecto-image:hover img {
  transform: scale(1.04);
}
.trc-projecto-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.trc-projecto-category {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1c1c25;
}
.trc-projecto-title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
}
.trc-projecto-title a {
  color: #1c1c25;
  text-decoration: none;
  transition: color 0.25s ease;
}
.trc-projecto-title a:hover { color: #555; }

.trc-projecto-meta {
  display: flex;
  gap: 48px;
  margin-top: auto;
  padding-top: 24px;
}
.trc-projecto-meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trc-projecto-meta .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #888;
}
.trc-projecto-meta .value {
  font-size: 15px;
  font-weight: 500;
  color: #1c1c25;
}
.trc-projecto-cta {
  margin-top: 18px;
  align-self: flex-start;
  padding: 14px 22px;
}

/* =========================================================================
   SINGLE PROJECTO — detail page template (single-projecto.php)
   1-to-1 visual replica of the original /apartamento-rato/ Elementor page.
   - Banner 414px, project image as bg, dark fallback when no image set
   - Title (130px, white, weight 600) at bottom-left
   - "What architectural services..." subtitle at top-right
   - Description box pulled −108px so it overlaps the bottom of the banner
   ========================================================================= */
.trc-projecto-single {
  /* Push content below the 86px fixed top bar so the hero isn't covered. */
  padding-top: 86px;
}

.trc-projecto-hero {
  position: relative;
  width: 100%;
  height: 414px;
  /* Dark fallback so the banner is still visible (with the title legible)
     when the user hasn't uploaded a featured image yet — instead of a
     flat-black empty page. */
  background-color: #1c1c25;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: visible; /* allow the title's descenders to bleed below the bar */
}

/* "What architectural services we're providing your" — top-right corner.
   Matches the original Elementor breadcrumb subtitle position (top: 250,
   right: 40 in the original layout, but anchored from the top of the hero
   so it adapts cleanly to different hero heights). */
.trc-projecto-hero-subtitle {
  position: absolute;
  top: 164px;        /* 250 page-top minus the 86 top-bar offset */
  right: 40px;
  color: var(--trc-ivory);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: right;
  animation: trc-fade-in 1.5s ease-out 0.3s both;
}

/* Project title — huge, white, anchored to the bottom-left of the hero.
   `!important` on color because the theme's default h1 rule (specificity
   higher than `.trc-projecto-hero-title`) was forcing dark `#111`. */
.trc-projecto-hero-title {
  position: absolute;
  left: 40px;
  bottom: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(72px, 11vw, 180px) !important;
  font-weight: 600 !important;
  line-height: 0.9 !important;
  color: var(--trc-ivory) !important;
  white-space: nowrap;
  animation: trc-slide-in-right 2s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 2;
}
/* Same defensive override for the subtitle text so the right-aligned
   "What architectural services..." stays white regardless of theme defaults. */
.trc-projecto-hero-subtitle {
  color: var(--trc-ivory) !important;
}

/* SECTION 2 — Description / intro paragraph.
   Pulled up −108px to overlap the bottom of the banner exactly like the
   original Apartamento Rato page. The GSAP rr_title_anim line-flip is
   applied by `animateProjectDescriptions()` in offcanvas-escape.js. */
.trc-projecto-intro {
  max-width: 1650px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}
.trc-projecto-intro-inner {
  margin-top: -108px;
  padding-left: 40px;
  max-width: 820px;
  font-size: 18px;
  line-height: 1.7;
  color: #1c1c25;
  position: relative;
  z-index: 3;
}
.trc-projecto-intro-inner p {
  margin: 0 0 1.2em;
}

/* SECTION 3 — Parallax image (single big visual).
   `background-attachment: fixed` gives the subtle parallax feel without
   needing extra JS. On mobile we fall back to scroll (fixed breaks on iOS). */
.trc-projecto-parallax {
  width: 100%;
  height: 843px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-top: 80px;
}
@supports (-webkit-touch-callout: none) {
  /* iOS — fixed backgrounds glitch, switch to scroll. */
  .trc-projecto-parallax { background-attachment: scroll; }
}

/* SECTION 4 — Details (icon-box style rows + secondary image).
   2-column grid on desktop: details on the left, image on the right. */
.trc-projecto-details {
  width: 100%;
  padding: 120px 40px;
  background: var(--trc-ivory);
}
.trc-projecto-details-inner {
  max-width: 1650px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.trc-projecto-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 64px;
}
.trc-projecto-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 18px;
  border-left: 2px solid #1c1c25;
}
.trc-projecto-detail-label {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
  margin: 0;
}
.trc-projecto-detail-value {
  font-size: 22px;
  font-weight: 500;
  color: #1c1c25;
  margin: 0;
  line-height: 1.3;
}
.trc-projecto-details-image {
  width: 100%;
  height: 100%;
  min-height: 540px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
}

/* SECTION 5 — Image gallery (responsive grid, clickable thumbs). */
.trc-projecto-gallery {
  width: 100%;
  padding: 0 40px 120px;
  background: var(--trc-ivory);
}
.trc-projecto-gallery-grid {
  max-width: 1650px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
.trc-projecto-gallery-item {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: #f1f0eb;
}
.trc-projecto-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.trc-projecto-gallery-item:hover img {
  transform: scale(1.04);
}
/* First gallery item spans full width — same "feature image" pattern as
   the original Apartamento Rato gallery layout. */
.trc-projecto-gallery-item:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

/* BACK BUTTON */
.trc-projecto-back-wrap {
  padding: 60px 40px 140px;
  text-align: center;
}
.trc-projecto-back-btn {
  display: inline-flex !important;
  padding: 14px 22px;
}

/* Responsive ============================================================ */
@media (max-width: 1024px) {
  .trc-projecto-details-inner {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .trc-projecto-details-image {
    min-height: 380px;
    aspect-ratio: 4/3;
  }
}
@media (max-width: 768px) {
  .trc-projecto-hero {
    height: 320px;
  }
  .trc-projecto-hero-title {
    left: 24px;
    font-size: clamp(48px, 13vw, 100px) !important;
  }
  .trc-projecto-hero-subtitle {
    right: 24px;
    top: 110px;
  }
  .trc-projecto-intro {
    padding: 0 24px;
  }
  .trc-projecto-intro-inner {
    margin-top: -60px;
    padding-left: 0;
  }
  .trc-projecto-parallax {
    height: 480px;
  }
  .trc-projecto-details {
    padding: 60px 24px;
  }
  .trc-projecto-details-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .trc-projecto-detail-value {
    font-size: 18px;
  }
  .trc-projecto-gallery {
    padding: 0 24px 60px;
  }
  .trc-projecto-gallery-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .trc-projecto-gallery-item:first-child {
    grid-column: auto;
    aspect-ratio: 4/3;
  }
}

/* =========================================================================
   9) PROJECTOS GRID — tamanho de imagem FIXO em todos os cards
   O widget archidex_parallax_image (id 38deb46, partilhado por todos os
   cards dinâmicos) renderiza o <img> ao rácio natural, por isso fontes
   portrait ficavam maiores. Fixamos um rácio quadrado + cover para que
   cada imagem de card seja idêntica, respeitando a grelha.
   ========================================================================= */
.elementor-element-38deb46 .expertise__media {
  aspect-ratio: 1155 / 750; /* rácio do template original (imagens demo gallery 1155x750 ≈ 3:2) */
  overflow: hidden;
}
.elementor-element-38deb46 .expertise__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =========================================================================
   10) INTERIOR DO PROJECTO — respeitar layout original (rácios fixos)
   Hero (7846877) + detalhe (f26dbd2) parallax + galeria (cf5e143). As fontes
   portrait (projectos novos) partiam o layout; fixamos ao rácio original
   (imagens 2730x1536 ≈ 16:9) com cover.
   ========================================================================= */
.elementor-element-7846877 .expertise__media,
.elementor-element-f26dbd2 .expertise__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.elementor-element-7846877 .expertise__media img,
.elementor-element-f26dbd2 .expertise__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Galeria — cada imagem cobre uma caixa de rácio fixo (3:2, como as demo) */
.elementor-element-cf5e143 .portfolio-gallery img {
  aspect-ratio: 1155 / 750;
  width: 100% !important;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  cursor: zoom-in;
}

/* =========================================================================
   11) CARD CLICK — o link da imagem (parallax) era inline → área de clique
   não cobria a imagem. Torná-lo bloco a preencher a caixa do media.
   ========================================================================= */
.elementor-element-38deb46 .expertise__media { position: relative; }
.elementor-element-38deb46 .expertise__media > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* =========================================================================
   12) LIGHTBOX da galeria de projecto (trc-gallery-lightbox.js)
   ========================================================================= */
.trc-lightbox { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; }
.trc-lightbox.is-open { display: flex; }
.trc-lb-backdrop { position: absolute; inset: 0; background: rgba(20,20,25,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.trc-lb-stage { position: relative; margin: 0; z-index: 1; display: flex; }
.trc-lb-img { max-width: 88vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 24px 70px rgba(0,0,0,.45); display: block; }
.trc-lb-close { position: absolute; top: 22px; right: 30px; z-index: 3; background: none; border: 0; color: var(--trc-ivory); font-size: 42px; line-height: 1; cursor: pointer; opacity: .85; transition: opacity .2s; }
.trc-lb-prev, .trc-lb-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: none; border: 0; color: var(--trc-ivory); font-size: 54px; line-height: 1; cursor: pointer; opacity: .8; padding: 12px 22px; transition: opacity .2s; }
.trc-lb-prev { left: 6px; } .trc-lb-next { right: 6px; }
.trc-lb-close:hover, .trc-lb-prev:hover, .trc-lb-next:hover { opacity: 1; }
.trc-lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3; color: var(--trc-ivory); font-size: 12px; letter-spacing: .14em; opacity: .8; }
@media (max-width: 600px) { .trc-lb-prev, .trc-lb-next { font-size: 38px; padding: 8px 12px; } .trc-lb-img { max-width: 94vw; } }

/* =========================================================================
   13) NAVEGAÇÃO PROJECTO ANTERIOR / SEGUINTE (the_content)
   ========================================================================= */
/* Opção A — repouso minimal (só tipografia), render revela-se no hover. */
.trc-project-nav {
  max-width: 1620px;            /* = largura da coluna de conteúdo do site */
  margin: 0 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--trc-line);
}
.trc-pn-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  padding: 48px 56px;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;       /* mantém o fundo (z-index:-1) dentro do painel */
  box-sizing: border-box;
}
.trc-pn-prev { border-right: 1px solid var(--trc-line); align-items: flex-start; }
.trc-pn-next { align-items: flex-end; text-align: right; }
.trc-pn-bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.08);
  transition: opacity .55s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.trc-pn-bg::after {        /* escurecimento para legibilidade do texto claro */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,20,28,.22), rgba(20,20,28,.62));
}
.trc-pn-item:hover .trc-pn-bg { opacity: 1; transform: scale(1); }
.trc-pn-text { display: flex; flex-direction: column; max-width: 100%; }
.trc-pn-next .trc-pn-text { align-items: flex-end; }
.trc-pn-label {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 500; color: #9a9a93; margin-bottom: 14px;
  transition: color .4s ease;
}
.trc-pn-title {
  font-size: clamp(26px, 3vw, 40px); line-height: 1.04; font-weight: 500;
  color: #1c1c25; transition: color .4s ease;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trc-pn-arrow {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #9a9a93; transition: color .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.trc-pn-ico { display: block; }
.trc-pn-item:hover .trc-pn-label,
.trc-pn-item:hover .trc-pn-title,
.trc-pn-item:hover .trc-pn-arrow { color: #f1f0eb; }
.trc-pn-next:hover .trc-pn-arrow { transform: translateX(7px); }
.trc-pn-prev:hover .trc-pn-arrow { transform: translateX(-7px); }
@media (hover: none) {           /* touch: render sempre visível, texto claro */
  .trc-pn-bg { opacity: 1; transform: none; }
  .trc-pn-title, .trc-pn-arrow { color: #f1f0eb; }
  .trc-pn-label { color: rgba(241,240,235,.82); }
}
@media (max-width: 700px) {
  .trc-project-nav { grid-template-columns: 1fr; }
  .trc-pn-prev { border-right: 0; border-bottom: 1px solid var(--trc-line); }
  .trc-pn-next { text-align: left; align-items: flex-start; }
  .trc-pn-next .trc-pn-text { align-items: flex-start; }
  .trc-pn-item { min-height: 188px; padding: 40px 28px; }
  .trc-pn-title { font-size: 26px; }
}

/* =========================================================================
   14) FOOTER — alinhar a linha de topo com a navegação de projectos.
   A borda estava no container full-width (#4ce22f9), por isso ia de ponta a
   ponta. As colunas do footer (#5fe0426) já estão numa caixa de 1620px — a
   mesma largura da .trc-project-nav. Passa-se a linha para essa caixa para
   ficar alinhada com a linha de separação dos botões.
   ========================================================================= */
.elementor-element-4ce22f9 { border-top: 0 !important; }
.elementor-element-5fe0426 { border-top: 1px solid var(--trc-line) !important; }

/* As 4 colunas do footer com largura exatamente igual → o divisor central
   (Quick Links | Social) cai no centro, alinhado com o divisor dos dois botões
   (que continua para baixo como uma só linha vertical). A coluna Subscribe era
   mais larga (formulário) e desviava o divisor para a direita. */
@media (min-width: 1025px) {
  .elementor-element-a9b024e,
  .elementor-element-bec1b89,
  .elementor-element-9bcc123,
  .elementor-element-f8569f0 {
    flex: 0 0 25% !important;   /* basis em 25% da CAIXA (border-box), não 0 */
    width: 25% !important;
    max-width: 25% !important;
    min-width: 0 !important;
  }
}

/* =========================================================================
   15) HERO DE PROJECTO +30% — banner, caixa do título e imagem full
   Pedido 2026-06-10: estender o conjunto do topo 30% para baixo nas páginas
   de projecto (filhos de /projectos/). Alturas base @desktop: banner 414px,
   secção do título 540px, imagem parallax 1025px → ×1.3.
   ========================================================================= */
/* Banner +30% em TODAS as páginas interiores. Cada página tem o seu banner
   com IDs próprios mas estrutura igual:
     e-parent (bg imagem) > e-con-boxed > e-con-inner > e-con-full (pad 250)
       > widget título (.archidex-page-title, ancorado ao fundo) + texto lateral
   Generalizado via :has() — apanha o banner em qualquer página interior
   (a home não tem .archidex-page-title). Conteúdo desce com a nova altura:
   wrappers esticam e o padding-top 250px escala para 326px (+30%). */
.e-con.e-parent:has(.archidex-page-title) {
  min-height: 540px !important;
}
.e-con.e-parent:has(.archidex-page-title) .e-con-boxed:has(.archidex-page-title) {
  flex-grow: 1 !important;
  min-height: 100% !important;
}
.e-con.e-parent:has(.archidex-page-title) .e-con-boxed:has(.archidex-page-title) > .e-con-inner {
  min-height: 100% !important;
}
.e-con.e-parent:has(.archidex-page-title) .e-con-full.e-child:has(.archidex-page-title) {
  flex-grow: 1 !important;
  min-height: 100% !important;
  padding-top: 326px !important;
}
/* Caixa do título: continha apenas o texto demo (removido a pedido) —
   colapsada para o grupo de detalhes subir para o lugar dele. */
body.parent-pageid-113 .elementor-element-a153f06 {
  display: none !important;
}
/* Imagem "full screen" do projecto: SÓ no desktop. No telemóvel a caixa de
   1330px deixava a imagem pequena no topo + um vazio enorme — aí a imagem
   colapsa à altura natural (como a galeria), via §45 mobile. */
@media (min-width: 992px) {
  body.parent-pageid-113 .elementor-element-7846877,
  body.parent-pageid-113 .elementor-element-7846877 .elementor-widget-container,
  body.parent-pageid-113 .elementor-element-7846877 .expertise__media {
    min-height: 1330px !important;
  }
  body.parent-pageid-113 .elementor-element-7846877 img {
    height: 1330px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}

/* =========================================================================
   16) AJUSTES 2026-06-10 (2ª ronda)
   ========================================================================= */
/* 1) Projecto: posição da imagem full. Histórico: -266px (20% cima),
   +200px (15% baixo). Com a troca de ordem (detalhes acima, imagem full
   abaixo — pedido 2026-06-10) a calibração da dobra deixou de se aplicar:
   margem neutra. */
body.parent-pageid-113 .elementor-element-e222256 {
  /* afastamento = gap da galeria (20px), acima e abaixo */
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

/* Texto demo do template removido da caixa do título (todos os projectos):
   "We work closely with builders... dynamic businesses." (widget 980c595) */
body.parent-pageid-113 .elementor-element-980c595 {
  display: none !important;
}

/* 2) Composição do banner em TODAS as páginas interiores (generalizado
   via :has — cada página tem IDs próprios): título encostado ao fundo do
   banner como nos projectos; o texto do template vai para a direita, em
   cima. Excluem-se os projectos, onde o tema já ancora o título ao fundo. */
body:not(.parent-pageid-113) .e-con-full.e-child:has(.archidex-page-title) > .elementor-widget:has(.archidex-page-title) {
  margin-top: auto !important;
  margin-bottom: -70px !important;  /* compensa o padding-bottom do container */
}
body:not(.parent-pageid-113) .e-con-full.e-child:has(.archidex-page-title) > .elementor-widget:not(:has(.archidex-page-title)) {
  margin-left: auto !important;
  text-align: right !important;
}

/* =========================================================================
   17) /PROJECTOS/ — zona de informação do card (redesign 2026-06-10)
   Híbrido aprovado: número fantasma + ficha (opção B) com a meta em colunas
   label-sobre-valor (opção A) e CTA "rows-as-links". Substitui a pill da
   categoria e o botão-cápsula.
   ========================================================================= */
/* Categoria: pill → eyebrow tipográfico (a cápsula vive no wrapper do widget) */
.elementor-element-4b754e0 .elementor-element-f15d2d1 {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: none !important;
  margin: 0 0 12px !important;
}
.elementor-element-4b754e0 .elementor-element-f15d2d1 .elementor-heading-title {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: none !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: #9a9a93 !important;
}
/* Número fantasma (01–12) via CSS counter, primeiro elemento da coluna */
.elementor-element-4b754e0 { counter-reset: trcproj; }
.elementor-element-4b754e0 > .e-con { counter-increment: trcproj; }
.elementor-element-4b754e0 .elementor-element-439b594::before {
  content: counter(trcproj, decimal-leading-zero);
  /* o tema põe os ::before dos e-con em position:absolute (overlay) —
     forçar static para entrar no flex column como primeiro item */
  position: static !important;
  height: auto !important;
  width: auto !important;
  inset: auto !important;
  border: 0 !important;       /* o tema dá border-top aos ::before dos e-con —
                                  era a "linha duplicada" no topo do card */
  font-size: 64px;
  line-height: .9;
  font-weight: 300;
  letter-spacing: -.02em;
  color: #ecebe5;
  display: block;
  margin: -4px 0 10px;
}
/* Meta empurrada para o fundo da coluna, organizada como colunas A:
   linha fina por cima, label pequena sobre valor */
.elementor-element-4b754e0 .elementor-element-b2c848f {
  margin-top: auto !important;
  border-top: 1px solid var(--trc-line) !important;
  padding-top: 16px !important;
  gap: 28px !important;
}
.elementor-element-4b754e0 .elementor-element-e3c7c2b .elementor-heading-title,
.elementor-element-4b754e0 .elementor-element-53c690c .elementor-heading-title {
  font-size: 10.5px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: #9a9a93 !important;
  margin-bottom: 4px !important;
}
.elementor-element-4b754e0 .elementor-element-ddc83e6 .elementor-heading-title,
.elementor-element-4b754e0 .elementor-element-c3ddaaf .elementor-heading-title {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #1c1c25 !important;
}
/* CTA: botão-cápsula → linha-link (rows-as-links) */
/* CTA do card — PÍLULA CLARA unificada (= "Ver serviço"), à direita (2026-06-11) */
.elementor-element-4b754e0 .trc-card-cta {
  border: 1px solid rgba(46, 45, 45, 0.10) !important;
  border-radius: 999px !important;
  background: var(--trc-ivory) !important;
  width: fit-content !important;
  align-self: flex-end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 44px;
  padding: 0 26px !important;
  margin-top: 18px !important;
  font-size: 13px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--trc-soft) !important;
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, transform .4s ease !important;
}
.elementor-element-4b754e0 .trc-card-cta span,
.elementor-element-4b754e0 .trc-card-cta .text {
  color: var(--trc-soft) !important;
  transition: color .4s ease !important;
}
/* hover Oatmeal uniforme — reage ao hover do CTA ou do cartão inteiro */
.elementor-element-4b754e0 .trc-card-cta:hover,
.elementor-element-4b754e0 > .e-con:hover .trc-card-cta {
  background-color: var(--trc-oatmeal) !important;
  border-color: var(--trc-oatmeal) !important;
  transform: translateY(-2px);
}
.elementor-element-4b754e0 .trc-card-cta:hover span,
.elementor-element-4b754e0 .trc-card-cta:hover .text,
.elementor-element-4b754e0 > .e-con:hover .trc-card-cta span,
.elementor-element-4b754e0 > .e-con:hover .trc-card-cta .text { color: var(--trc-ivory) !important; }
.elementor-element-4b754e0 .trc-card-cta i {
  font-size: 15px;
  color: var(--trc-oatmeal) !important;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), color .4s ease;
}
.elementor-element-4b754e0 .trc-card-cta:hover i,
.elementor-element-4b754e0 > .e-con:hover .trc-card-cta i {
  color: var(--trc-ivory) !important;
  transform: translateX(6px);
}

/* 17b) Acertos do card: colunas da meta com largura natural (a col. Ano vinha
   espremida do template e partia "Ano"/"2026"); ordem explícita dos filhos
   para o CTA ficar SEMPRE no fundo, depois da meta (o ::before do número tem
   order 0 e fica no topo). */
.elementor-element-4b754e0 .elementor-element-09e0170,
.elementor-element-4b754e0 .elementor-element-ea3041a {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}
.elementor-element-4b754e0 .elementor-element-439b594 > .elementor-element-39b0b07 { order: 1 !important; }
.elementor-element-4b754e0 .elementor-element-439b594 > .elementor-element-b2c848f { order: 2 !important; }
.elementor-element-4b754e0 .elementor-element-439b594 > .trc-card-cta { order: 3 !important; }

/* 18) Banner — título alinhado à esquerda da coluna do site (mesma
   vertical das imagens/conteúdo), fixo (sem o deslize horizontal do tema).
   GLOBAL: todas as páginas com banner. */
.archidex-page-title {
  left: 0 !important;
  transform: none !important;
}

/* 19) Menu da barra do topo — é position:absolute (right:40px), ignorava o
   padding da barra. Ancorado ao mesmo limite direito da coluna de 1620px,
   site inteiro. */
.portfolio-nav .trc-top-menu {
  right: max(40px, calc((100vw - 1620px) / 2)) !important;
}


/* 17c) /projectos/ — o template tinha um divider (6e6544a) imediatamente
   acima do grid, que duplicava com a linha de topo do primeiro card. */
.elementor-element-6244424 .elementor-element-6e6544a {
  display: none !important;
}

/* =========================================================================
   17d) /PROJECTOS/ — coluna de info afinada (ui-ux-pro-max: "Exaggerated
   Minimalism" para portfólio de arquitectura — tipografia sobredimensionada,
   espaço negativo assumido, ritmo 8pt, figuras tabulares na meta).
   ========================================================================= */
/* Título com escala de statement: o espaço vazio da coluna passa a espaço
   negativo intencional em torno de tipografia com presença */
.elementor-element-4b754e0 .elementor-element-3f3d9be .elementor-heading-title {
  font-size: clamp(32px, 2.4vw, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
}
.elementor-element-4b754e0 .elementor-element-3f3d9be .elementor-heading-title a {
  transition: opacity .3s ease;
}
.elementor-element-4b754e0 .elementor-element-3f3d9be .elementor-heading-title a:hover {
  opacity: .55;
}
/* Número-índice maior (statement index) */
.elementor-element-4b754e0 .elementor-element-439b594::before {
  font-size: 88px !important;
  margin: -8px 0 14px !important;
}
/* Ritmo vertical 8pt */
.elementor-element-4b754e0 .elementor-element-f15d2d1 {
  margin-bottom: 16px !important;
}
/* Meta: figuras tabulares (ano alinha perfeito), valores com um ponto a mais */
.elementor-element-4b754e0 .elementor-element-ddc83e6 .elementor-heading-title,
.elementor-element-4b754e0 .elementor-element-c3ddaaf .elementor-heading-title {
  font-variant-numeric: tabular-nums;
  font-size: 15px !important;
}

/* =========================================================================
   21) PALETA SAND — sistema global (Fase 2, aprovado 2026-06-10)
   Substitui o branco puro por off-white quente (o branco cansa).
   Dourado aposentado. Ivory base · Crème secções · Oatmeal acentos ·
   Moondrop ink. Tokens reutilizáveis nas fases seguintes.
   ========================================================================= */
:root,
body.elementor-kit-4360 {
  --trc-ivory: #EBEAE4;
  --trc-creme: #DBD9D0;
  --trc-oatmeal: #A09889;
  --trc-ink: #2E2D2D;
  --trc-soft: #6f6c66;
  --trc-line: #9a9182;
}
/* Fundo base: off-white quente em vez de var(--trc-ivory) */
html body.elementor-kit-4360 { background-color: var(--trc-ivory) !important; }

/* Footer: era branco → Crème (separa do Ivory do body). Texto fica ink. */
.elementor-element-4ce22f9 { background-color: var(--trc-creme) !important; }

/* =========================================================================
   22) /PROJECTOS/ — seletor de vista Lista(default)/Grelha-4/Categoria
   Toolbar + JS em offcanvas-escape.js (setupProjectViewModes). Lista = sem
   classe (default do tema). Grelha e Categoria = CSS grid de 4 colunas.
   ========================================================================= */
.trc-proj-toolbar {
  display: flex; gap: 8px; justify-content: flex-end; width: 100%;
  max-width: 1620px; margin: 0 auto 30px; padding: 0 24px; box-sizing: border-box;
}
.trc-view-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: 1px solid var(--trc-line); border-radius: 0;
  color: var(--trc-soft); padding: 9px 15px;
  font-family: inherit; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  transition: color .4s ease, border-color .4s ease, background-color .4s ease;
}
.trc-view-btn svg { display: block; }
/* hover movido para §41 */
/* is-active movido para §41 (pílula oatmeal) */

/* GRELHA + CATEGORIA: 4 colunas */
.elementor-element-4b754e0.trc-view-grid,
.elementor-element-4b754e0.trc-view-cat {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 44px 28px !important;
  align-items: start !important;
}
.trc-view-grid > .e-con, .trc-view-cat > .e-con {
  flex-direction: column !important; width: auto !important;
}
/* imagem no topo, rácio fixo */
.trc-view-grid .elementor-element-ca1554b, .trc-view-cat .elementor-element-ca1554b { order: -1; width: 100% !important; }
.trc-view-grid .elementor-element-38deb46, .trc-view-cat .elementor-element-38deb46,
.trc-view-grid .elementor-element-38deb46 .expertise__media, .trc-view-cat .elementor-element-38deb46 .expertise__media {
  aspect-ratio: 4 / 3 !important; height: auto !important; min-height: 0 !important;
}
/* coluna de info compacta: eyebrow + título; meta/CTA escondidos (cartão clicável pela imagem/título) */
.trc-view-grid .elementor-element-439b594, .trc-view-cat .elementor-element-439b594 {
  width: 100% !important; padding: 14px 2px 0 !important;
}
.trc-view-grid .elementor-element-439b594::before, .trc-view-cat .elementor-element-439b594::before {
  font-size: 30px !important; margin: 0 0 6px !important;
}
.trc-view-grid .elementor-element-3f3d9be .elementor-heading-title,
.trc-view-cat .elementor-element-3f3d9be .elementor-heading-title { font-size: clamp(18px, 1.4vw, 22px) !important; }
.trc-view-grid .elementor-element-b2c848f, .trc-view-cat .elementor-element-b2c848f,
.trc-view-grid .trc-card-cta, .trc-view-cat .trc-card-cta { display: none !important; }
/* cabeçalho de categoria (linha completa) */
.trc-cat-head {
  grid-column: 1 / -1; font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--trc-soft); border-top: 1px solid var(--trc-line); padding-top: 16px; margin-top: 10px;
}
.trc-cat-head:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
@media (max-width: 1024px) {
  .elementor-element-4b754e0.trc-view-grid, .elementor-element-4b754e0.trc-view-cat { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .elementor-element-4b754e0.trc-view-grid, .elementor-element-4b754e0.trc-view-cat { grid-template-columns: 1fr !important; }
  .trc-proj-toolbar { justify-content: flex-start; }
}

/* =========================================================================
   23) FASES 3+5 — acessibilidade, dead-ends, contraste sand
   ========================================================================= */
/* Focus visível em todo o lado (teclado) — sand/ink */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--trc-ink) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}
/* Contraste: eyebrows/labels claros sobre sand falhavam AA → soft escuro */
.trc-pn-label, .elementor-element-4b754e0 .elementor-element-f15d2d1 .elementor-heading-title,
.elementor-element-4b754e0 .elementor-element-e3c7c2b .elementor-heading-title,
.elementor-element-4b754e0 .elementor-element-53c690c .elementor-heading-title,
.trc-cat-head, .trc-view-btn {
  color: #5f5c56 !important;
}
.trc-pn-arrow { color: #5f5c56; }

/* DEAD-END 1 — navegação no fim de cada artigo (the_content, acima dos comentários) */
.trc-article-nav {
  max-width: 1620px; margin: 56px auto 0; padding: 28px 24px 0; box-sizing: border-box;
  border-top: 1px solid var(--trc-line);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.trc-art-back, .trc-art-next {
  text-decoration: none; color: var(--trc-ink);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  transition: color .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.trc-art-next { text-align: right; display: flex; flex-direction: column; gap: 4px; }
.trc-art-next .l { color: #5f5c56; }
.trc-art-next .t { font-size: 15px; letter-spacing: -.01em; text-transform: none; font-weight: 500; }
.trc-art-back:hover { color: #5f5c56; transform: translateX(-6px); }
.trc-art-next:hover { color: #5f5c56; }
.trc-art-next:hover .t { opacity: .6; }

/* DEAD-END 2 — banda de CTA de fecho (injetada por JS antes do footer) */
.trc-closing-cta {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; background: var(--trc-creme);
  padding: 72px 24px; text-align: center;
  transition: background-color .45s ease;
}
.trc-closing-cta:hover { background: var(--trc-oatmeal); }
.trc-closing-cta:hover .l { color: rgba(235, 234, 228, 0.8) !important; }
.trc-closing-cta:hover .t { color: var(--trc-ivory) !important; }
.trc-closing-cta .l { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #5f5c56; }
.trc-closing-cta .t {
  font-size: clamp(28px, 3.4vw, 46px); font-weight: 300; letter-spacing: -.02em; color: var(--trc-ink);
  display: inline-flex; align-items: center; gap: 14px;
}
.trc-closing-cta .t svg { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.trc-closing-cta:hover .t svg { transform: translateX(8px); }

/* =========================================================================
   24) CONTRASTE + PALETA SAND (2026-06-10) — sem branco puro.
   Títulos/eyebrow do banner e elementos claros passam a Ivory; labels
   (global "Gray 1") darkened para AA via Elementor. Linhas reforçadas (§21).
   ========================================================================= */
body:not(.home) .archidex-page-title,
.trc-projecto-hero-title,
.trc-projecto-hero-subtitle,
.trc-projecto-hero-subtitle .elementor-heading-title,
.e-con.e-parent:has(.archidex-page-title) .elementor-heading-title {
  color: var(--trc-ivory) !important;
}
/* Labels dos campos do projecto: garantir AA mesmo que o global falhe */
.elementor-icon-box-content .elementor-icon-box-title,
.elementor-icon-box-content .elementor-icon-box-title a {
  color: var(--trc-soft) !important;
}

/* =========================================================================
   25) HOME hero slider — sem branco puro + conteúdo alinhado à coluna
   (2026-06-10). Título/eyebrow/contador/"Ver projecto"/setas passam a Ivory.
   O bloco .content e o .portfolio-counter alinham ao mesmo eixo da coluna
   1620 que a top bar usa (max(40px, calc((100vw - 1620px)/2))) — começam
   por baixo do logótipo, em vez do indent fixo de 250px do tema.
   ========================================================================= */
.portfolio h6.sub-title,
.portfolio h1.title,
.portfolio h1.title a,
.portfolio .content a,
.portfolio a.show,
.portfolio .portfolio-counter,
.portfolio .portfolio-counter span,
.portfolio .portfolio-arrow button,
.portfolio .portfolio-arrow i {
  color: var(--trc-ivory) !important;
}
.portfolio .portfolio__item .content,
.portfolio .portfolio-counter {
  left: max(40px, calc((100vw - 1620px) / 2)) !important;
}

/* =========================================================================
   26) HOME slider — "Ver projecto" na mesma linha das setas (2026-06-10).
   As setas (.portfolio-arrow) estão a bottom:115px do hero; o bloco .content
   acaba a 279px do fundo. Ancorar o botão ao fundo do .content (bottom:-164px
   = 279-115) põe-no exactamente na linha das setas, e o ancoramento ao fundo
   acompanha a altura do hero (tal como as setas). Só desktop.
   ========================================================================= */
@media (min-width: 1025px) {
  .portfolio .portfolio__item .content a.show {
    position: absolute;
    left: 0;
    bottom: -272px;   /* posição-base na linha das setas (títulos 1 linha); JS afina 2 linhas */
    margin-top: 0 !important;
  }
}

/* =========================================================================
   27) Nav nas páginas Full-Width (Sobre/Serviços/LANDSCOPE/FAQ/Notícias) —
   não acompanha o scroll (a pedido). A nav sintética estava em position:fixed
   (seguia o scroll); passa a absolute → fica no topo e sai com o conteúdo,
   como nas páginas-banner. (As páginas com banner nativo mantêm-se.)
   ========================================================================= */
.trc-has-synthetic-nav .portfolio-nav,
.portfolio-nav.trc-synthetic-nav {
  position: absolute !important;
  top: 22px !important;
  left: max(40px, calc((100vw - 1620px) / 2)) !important;
  right: max(40px, calc((100vw - 1620px) / 2)) !important;
}

/* =========================================================================
   28) HOME slider — título do projecto um pouco mais abaixo (2026-06-11).
   Estava demasiado perto da numeração "01/06"/eyebrow. Desce ~20% da sua
   própria altura (0.2em) para não se sobrepor.
   ========================================================================= */
.portfolio .portfolio__item .content h1.title {
  margin-top: 0.2em;
}

/* =========================================================================
   29) /projectos/ grelha — parallax das thumbnails REMOVIDO na origem.
   O parallax (data-speed) era removido aqui à força (transform:none) porque
   o GSAP empurrava a imagem para fora do frame ao reordenar (vista Categoria).
   Desde 2026-06-12 o atributo data-speed é retirado no functions.php (widget
   38deb46), por isso o GSAP já não gere estas imagens — não é preciso forçar
   transform:none e isso libertava o transform para o zoom em hover (§48).
   Mantém-se só `translate:none` como salvaguarda de qualquer inline residual.
   ========================================================================= */
.elementor-element-4b754e0 .expertise__media img { translate: none !important; }

/* =========================================================================
   29-bis) /projectos/ grelha — PARALLAX RESTAURADO (2026-06-25, a pedido).
   data-speed contido (0.85) reposto no functions.php (widget 38deb46). A
   imagem ganha folga vertical (120%, centrada a ±10%) para o offset do
   parallax NUNCA revelar moldura vazia (o bug antigo da vista categoria); o
   frame .expertise__media já recorta com overflow:hidden. O zoom-hover (§48)
   mantém-se (usa a propriedade `scale`, independente do `transform` do GSAP).
   ========================================================================= */
.elementor-element-38deb46 .expertise__media img {
  height: 130% !important;
  position: relative;
  top: -15%;
  will-change: transform;
}

/* =========================================================================
   30) CURSOR PERSONALIZADO — REMOVIDO (2026-06-11, a pedido do utilizador).
   Voltou ao cursor nativo do sistema. (Tinha sido: bola Oatmeal → lente de
   vidro com blur.) Mantido o número da secção para não partir referências.
   ========================================================================= */

/* =========================================================================
   31) SCROLL DO RATO NAS PÁGINAS INTERIORES — FIX (2026-06-11).

   Sintoma: nas páginas de projecto (e outras com conteúdo), a roda do rato
   não fazia scroll ao carregar a página — só o Space/teclado funcionava
   (sobretudo no Safari).

   Causa: o tema-pai (archidex/assets/css/archidex-unit.css) põe
       #smooth-content { overflow-x: hidden !important; overflow-y: visible; }
   Pela spec do CSS, um par overflow-x:hidden + overflow-y:visible promove o
   overflow-y a `auto` → o #smooth-content (que envolve a página toda) passa a
   ser um CONTENTOR DE SCROLL. O GSAP ScrollSmoother corre com
   normalizeScroll:{allowNestedScroll:true} → a roda é "engolida" por esse
   contentor aninhado (que não tem nada para scrollar) em vez de scrollar a
   página. O teclado não passa pelo normalizer, por isso o Space funcionava.

   O próprio GSAP define #smooth-content em overflow:visible inline — o tema
   estava a contrariá-lo. Repomos visible. O #smooth-wrapper é
   position:fixed; overflow:hidden, por isso o overflow horizontal continua
   recortado (não volta o scroll lateral). Especificidade 2 IDs > 1 ID do
   tema-pai → ganha de certeza.
   ========================================================================= */
#smooth-wrapper > #smooth-content {
  overflow: visible !important;
}

/* =========================================================================
   32) FOOTER — separadores invisíveis (2026-06-11).

   O footer (template Elementor 1312, igual em todas as páginas) assenta num
   fundo creme #DBD9D0 (--trc-creme). As divisórias entre colunas e as linhas
   dos campos do newsletter usavam o cinza do tema-pai #DADADA (rgb 218,218,218)
   — quase idêntico ao creme → invisíveis. A linha de topo do footer já usa
   --trc-line (#9A9182) e lê-se bem; alinhamos as restantes ao mesmo token.
   Scoped a :is(.elementor-1312,.elementor-5181,.elementor-5182) → corrige o footer em todo o site numa só regra.
   ========================================================================= */
:is(.elementor-1312,.elementor-5181,.elementor-5182) .e-con-full { border-color: var(--trc-line) !important; }   /* divisórias de coluna */
:is(.elementor-1312,.elementor-5181,.elementor-5182) .input-group,
:is(.elementor-1312,.elementor-5181,.elementor-5182) .input-group input { border-color: var(--trc-line) !important; }   /* campos do newsletter */

/* =========================================================================
   33) CTAs — NENHUM preenchimento a preto (2026-06-11).

   Regra de contraste do site: o preenchimento dos CTAs é Oatmeal (--trc-oatmeal)
   com texto Ink (--trc-ink). O botão primário do tema (.rr-btn-primary) vinha
   preenchido a #1c1c25 (quase preto) por defeito com texto branco — usado no
   "Enviar" do formulário de contacto e no CTA "Let's Talk" do header. O hover
   do CTA do header ia a #212529. Os botões letter-slide do tema (.rr-btn-border)
   e os botões Gutenberg (.wp-block/.wp-element-button) também preenchem a preto/
   escuro por defeito. Tudo passa a Oatmeal + Ink.

   Excepção: .trc-card-cta ("Ver projecto" dos cartões) já tem o seu próprio
   estilo (transparente por defeito, fill Oatmeal no hover) — fica de fora via
   :not(.trc-card-cta).
   ========================================================================= */
.rr-btn-primary:not(.trc-card-cta) {
  background-color: var(--trc-oatmeal) !important;
  color: var(--trc-ink) !important;
}
.rr-btn-primary:not(.trc-card-cta) span,
.rr-btn-primary:not(.trc-card-cta) span > span { color: var(--trc-ink) !important; }   /* spans do letter-slide eram brancos */
.rr-btn-primary:not(.trc-card-cta):hover,
.header-area .header-right .rr-btn-primary:hover {
  background-color: var(--trc-oatmeal) !important;
  color: var(--trc-ink) !important;
}
/* botões letter-slide do tema — overlay/pseudos preenchiam a preto puro */
.rr-btn-border .bg-overlay,
.rr-btn-border::before, .rr-btn-border::after,
.rr-btn-border span::before, .rr-btn-border span::after { background-color: var(--trc-oatmeal) !important; }
.rr-btn-border:hover, .rr-btn-border:hover span { color: var(--trc-ink) !important; }
/* botões Gutenberg/bloco (default escuro #32373C) — caso surjam em artigos */
.wp-block-button__link, .wp-element-button {
  background-color: var(--trc-oatmeal) !important;
  color: var(--trc-ink) !important;
}

/* =========================================================================
   34) NAVBAR — pílula creme (ref. Heva), 2026-06-11.

   Substitui a barra dark-glass full-width por uma CÁPSULA clara a flutuar,
   alinhada à coluna 1620px (afastamentos = gutter da estrutura). Proporções
   da referência: pílula ~64px, conteúdo ~44px (respira no topo/fundo), cantos
   totalmente arredondados. Layout: logótipo escuro (esq) · menu em texto ink ·
   CTA "Fale Connosco" Oatmeal (dir). Coerente em TODAS as páginas (o mesmo
   .trc-brand + .trc-top-menu em home e interiores).
   Posição: fixed na home; absolute nas páginas Full-Width (§27) — não segue
   o scroll, a pedido.
   ========================================================================= */
.portfolio-nav {
  width: auto !important;
  height: 64px !important;
  top: 22px !important;
  /* Alinhada aos limites acordados — pílula encosta à coluna 1620px
     (logo no limite esquerdo, CTA no direito), como o resto do site. */
  left: max(40px, calc((100vw - 1620px) / 2)) !important;
  right: max(40px, calc((100vw - 1620px) / 2)) !important;
  background: rgba(235, 234, 228, 0.25) !important;     /* ivory bem transparente (−15 → realça o blur) */
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
  border: 1px solid rgba(46, 45, 45, 0.10) !important;
  border-bottom: 1px solid rgba(46, 45, 45, 0.10) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 34px rgba(46, 45, 45, 0.13) !important;
  padding: 0 16px 0 30px !important;
}
/* esconder elementos de marca antigos — o .trc-brand unifica todas as páginas */
.portfolio-nav .trc-left-cluster,
.portfolio-nav .logo,
.portfolio-nav .trc-home-icon { display: none !important; }
/* logótipo escuro (monograma TRC, assets/logo.svg pintado a ink) */
.portfolio-nav .trc-brand {
  display: block !important;
  width: 40px; height: 54px;        /* monograma TRC oficial (svg File1 → logo-mark.svg), só a marca */
  flex: 0 0 auto;
  /* máscara → a cor vem do background-color (controlável/adaptável via classe) */
  background-color: var(--trc-oatmeal);
  -webkit-mask: url('assets/logo-mark.svg') center / contain no-repeat;
  mask: url('assets/logo-mark.svg') center / contain no-repeat;
  mix-blend-mode: normal !important;
  transition: background-color .4s ease;
}
.portfolio-nav .trc-brand:hover { opacity: 1; }
/* menu: flui à direita (não absoluto), texto ink */
.portfolio-nav .trc-top-menu {
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  gap: 6px !important;              /* o padding dos itens dá o espaçamento; gap pequeno entre pílulas */
  align-items: center;
}
/* texto do menu em sand claro; no hover surge a pílula Oatmeal (regra de
   contraste do "Fale Connosco") — só aparece em mouse over. */
.trc-top-menu .trc-top-menu-link {
  color: var(--trc-oatmeal) !important;   /* sand (acento oatmeal) — lê sobre fundo claro e escuro */
  padding: 9px 18px !important;
  border-radius: 999px !important;
  background: transparent !important;
  transition: background-color .4s ease, color .4s ease !important;
}
.portfolio-nav .trc-top-menu .trc-top-menu-link:hover {
  background: var(--trc-oatmeal) !important;
  color: var(--trc-ivory) !important;
  transform: none !important;
}
/* ADAPTATIVO — o JS (setupNavAdaptive) lê a luminância do fundo atrás da nav e
   marca .trc-on-light / .trc-on-dark. Sobre fundo CLARO o logo+menu escurecem
   (ink); sobre fundo ESCURO clareiam (ivory). O "Fale Connosco" não muda (tem
   sempre o seu fundo Oatmeal). O hover (0,4,0) ganha a estes (0,3,0). */
.portfolio-nav.trc-on-light .trc-top-menu-link { color: var(--trc-ink) !important; }
.portfolio-nav.trc-on-dark  .trc-top-menu-link { color: var(--trc-ivory) !important; }
.portfolio-nav.trc-on-light .trc-brand { background-color: var(--trc-ink); }
.portfolio-nav.trc-on-dark  .trc-brand { background-color: var(--trc-ivory); }
/* CTA "Fale Connosco" — pílula Oatmeal (mesmo destaque do "Get Started").
   É filho directo da .portfolio-nav (irmão do menu) → fica encostado à direita
   pelo space-between, com o menu a centrar no espaço livre. */
.portfolio-nav .trc-nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--trc-oatmeal); color: var(--trc-ivory);   /* texto sand claro — lê melhor no fundo Oatmeal */
  font-family: "Bai Jamjuree", sans-serif; font-size: 16px; font-weight: 500;
  letter-spacing: -0.32px; text-decoration: none; text-transform: capitalize;
  white-space: nowrap;
  height: 44px; padding: 0 26px; border-radius: 999px;
  flex: 0 0 auto;
  transition: filter .4s ease, transform .4s ease;
}
.portfolio-nav .trc-nav-cta:hover { filter: brightness(0.95); transform: translateY(-2px); }
/* hambúrguer (só mobile <992px) legível sobre a pílula clara */
.portfolio-nav .bar-icon { border-color: var(--trc-ink) !important; }
.portfolio-nav .bar-icon span { background-color: var(--trc-ink) !important; }
.portfolio-nav .bar-icon:hover { background-color: var(--trc-ink) !important; border-color: var(--trc-ink) !important; }
.portfolio-nav .bar-icon:hover span { background-color: var(--trc-ivory) !important; }

/* =========================================================================
   35) SCROLL-REVEAL — entrada suave das secções (2026-06-11, Fase 1 auditoria).
   O tema só anima a página LANDSCOPE (.fade-anim). Esta regra dá entrada
   fade-up às secções das restantes páginas de conteúdo. O estado escondido é
   adicionado por JS (.trc-reveal) → se o JS falhar, o conteúdo mostra-se na
   mesma. Respeita prefers-reduced-motion.
   ========================================================================= */
.trc-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.trc-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .trc-reveal, .trc-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================================
   36) TESTEMUNHOS (Serviços, widget trctstw1) — o layout-1 do tema usa uma
   única col-lg-7 (58%) e deixava o lado direito vazio. Alarga a coluna e dá
   ar ao bloco. Citação em Ink sobre Ivory; nome/atributo em --trc-soft.
   ========================================================================= */
.elementor-element-trctstw1 .row > [class*="col-"] {
  width: 100%;
  max-width: 1160px;
}
.elementor-element-trctstw1 .testimonial-6 p,
.elementor-element-trctstw1 .testimonial-6 .description {
  color: var(--trc-ink);
}

/* =========================================================================
   37) PÁGINAS DE SERVIÇO (detalhe) — paleta nas secções escuras e linhas
   (2026-06-11). Aplica-se via body.trc-service-detail (LANDSCOPE 94 + os 6
   serviços 4765-4770; IDs de elemento iguais em todas — estrutura clonada).
   - Secções escuras (razões c4859a1 + indicadores cea854c): #111 preto puro
     → Moondrop/Ink #2E2D2D, texto Ivory, linhas ivory translúcido.
   - Secções claras (hero/processo/FAQ): linhas de enquadramento cinza
     off-palette (rgba(17,17,17,.1) / #e7e7e7) → --trc-line.
   ========================================================================= */
.trc-service-detail .elementor-element-c4859a1,
.trc-service-detail .elementor-element-cea854c {
  background-color: var(--trc-oatmeal) !important;
}
/* texto sobre o fundo escuro */
.trc-service-detail .elementor-element-c4859a1 h1, .trc-service-detail .elementor-element-c4859a1 h2,
.trc-service-detail .elementor-element-c4859a1 h3, .trc-service-detail .elementor-element-c4859a1 h4,
.trc-service-detail .elementor-element-c4859a1 h5, .trc-service-detail .elementor-element-c4859a1 h6,
.trc-service-detail .elementor-element-cea854c h1, .trc-service-detail .elementor-element-cea854c h2,
.trc-service-detail .elementor-element-cea854c h3, .trc-service-detail .elementor-element-cea854c h4,
.trc-service-detail .elementor-element-cea854c h5, .trc-service-detail .elementor-element-cea854c h6 {
  color: var(--trc-ivory) !important;
}
/* CATCH-ALL: o tema pinta as descrições destas secções em cinza #999 —
   sobre Oatmeal (#A09889) fica invisível. TODO o texto passa a sand. */
.trc-service-detail .elementor-element-c4859a1 *,
.trc-service-detail .elementor-element-cea854c * {
  color: rgba(235, 234, 228, 0.92) !important;
}
/* linhas nas secções escuras */
.trc-service-detail .elementor-element-c4859a1 *,
.trc-service-detail .elementor-element-cea854c * {
  border-color: rgba(235, 234, 228, 0.45) !important;
}
/* linhas de enquadramento nas secções claras (hero, processo, FAQ) */
.trc-service-detail .elementor-element-15abe14 *,
.trc-service-detail .elementor-element-77458a6 *,
.trc-service-detail .elementor-element-afa4e01 * {
  border-color: var(--trc-line) !important;
}

/* =========================================================================
   38) SERVIÇOS — blocos detalhados com moldura + foco por scroll (2026-06-11).
   Cada .projects-2__item tem linhas de enquadramento na palete; o bloco que
   cruza o centro do viewport (classe .trc-svc-focus, posta por JS) escurece
   para Moondrop e o texto clareia. Sem efeito de hover no fundo (pedido) —
   o hover fica só no CTA. CTA "Ver serviço" → página de detalhe.
   ========================================================================= */
.elementor-element-f0ed4ee .projects-2__item {
  border-top: 1px solid var(--trc-line);
  padding: 44px 36px;
  transition: background-color .7s ease;
}
.elementor-element-f0ed4ee .projects-2__item:last-child {
  border-bottom: 1px solid var(--trc-line);
}
/* foco (scroll): fundo Oatmeal, texto na cor do fundo da página (Ivory) */
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus {
  background-color: var(--trc-oatmeal);
}
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus .title,
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus .title * ,
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus h1,
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus h2,
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus h3,
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus h4 {
  color: var(--trc-ivory) !important;
  transition: color .7s ease;
}
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus .content,
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus .content p,
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus .content li,
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus .content div {
  color: rgba(235, 234, 228, 0.92) !important;
  transition: color .7s ease;
}
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus * {
  border-color: rgba(235, 234, 228, 0.45) !important;
}
/* títulos/textos no estado claro mantêm a transição (volta suave) */
.elementor-element-f0ed4ee .projects-2__item .title,
.elementor-element-f0ed4ee .projects-2__item .content,
.elementor-element-f0ed4ee .projects-2__item .content p,
.elementor-element-f0ed4ee .projects-2__item .content li,
.elementor-element-f0ed4ee .projects-2__item .content div {
  transition: color .7s ease;
}
/* CTA "Ver serviço" — pílula preenchida CLARA (o inverso do "Fale Connosco":
   lá é Oatmeal com texto Ivory; aqui é Ivory com texto Oatmeal), à direita. */
.elementor-element-f0ed4ee .trc-svc-cta {
  display: flex; width: fit-content;           /* block-level p/ o margin:auto actuar */
  align-items: center; justify-content: center; gap: 10px;
  justify-self: end; margin-left: auto;        /* alinhado à direita */
  margin-top: 28px;
  font-family: "Bai Jamjuree", sans-serif;
  font-size: 13px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--trc-ivory);
  color: var(--trc-oatmeal); text-decoration: none;
  height: 44px; padding: 0 26px; border-radius: 999px;
  border: 1px solid rgba(46, 45, 45, 0.10);    /* definição sobre fundo claro */
  transition: color .4s ease, background-color .4s ease, border-color .4s ease,
              transform .4s ease, filter .4s ease;
}
.elementor-element-f0ed4ee .trc-svc-cta svg { transition: transform .4s ease; }
.elementor-element-f0ed4ee .trc-svc-cta:hover { filter: brightness(0.97); transform: translateY(-2px); }
.elementor-element-f0ed4ee .trc-svc-cta:hover svg { transform: translateX(5px); }
/* no bloco em foco (fundo Oatmeal) a pílula clara destaca-se por contraste */
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus .trc-svc-cta {
  background: var(--trc-ivory) !important;
  color: var(--trc-soft) !important;
  border-color: transparent !important;
}
.elementor-element-f0ed4ee .projects-2__item.trc-svc-focus .trc-svc-cta:hover {
  color: var(--trc-ink) !important;
}

/* =========================================================================
   39) NAV SERVIÇO ANTERIOR/SEGUINTE — variante sem imagem (2026-06-11).
   Nos serviços, os cartões prev/next não mostram preview de imagem.
   Por defeito ficam CLAROS (texto ink, como a base do componente);
   SÓ no mouse over o fundo passa a Oatmeal e o texto clareia (o hover
   claro do componente base já trata da cor do texto).
   ========================================================================= */
.trc-service-nav .trc-pn-bg { display: none !important; }
.trc-service-nav .trc-pn-item {
  background-color: transparent;
  transition: background-color .4s ease;
}
/* divisória única: o componente base já põe border-right no 1.º cartão (1px) */
.trc-service-nav .trc-pn-item:hover { background-color: var(--trc-oatmeal); }

/* =========================================================================
   40) SERVIÇOS-DETALHE — afinações (2026-06-11, feedback):
   (a) rótulos dos indicadores com expressão de TÍTULO (uppercase, tracking),
       distintos da descrição abaixo do número;
   (b) linhas dos indicadores com o mesmo stroke do resto do site (eram 3px);
   ========================================================================= */
.trc-service-detail .elementor-element-97f5057 h1, .trc-service-detail .elementor-element-97f5057 h2, .trc-service-detail .elementor-element-97f5057 h3, .trc-service-detail .elementor-element-97f5057 h4, .trc-service-detail .elementor-element-97f5057 h5, .trc-service-detail .elementor-element-97f5057 h6,
.trc-service-detail .elementor-element-5d9ab37 h1, .trc-service-detail .elementor-element-5d9ab37 h2, .trc-service-detail .elementor-element-5d9ab37 h3, .trc-service-detail .elementor-element-5d9ab37 h4, .trc-service-detail .elementor-element-5d9ab37 h5, .trc-service-detail .elementor-element-5d9ab37 h6,
.trc-service-detail .elementor-element-ed29a4b h1, .trc-service-detail .elementor-element-ed29a4b h2, .trc-service-detail .elementor-element-ed29a4b h3, .trc-service-detail .elementor-element-ed29a4b h4, .trc-service-detail .elementor-element-ed29a4b h5, .trc-service-detail .elementor-element-ed29a4b h6,
.trc-service-detail .elementor-element-faf9056 h1, .trc-service-detail .elementor-element-faf9056 h2, .trc-service-detail .elementor-element-faf9056 h3, .trc-service-detail .elementor-element-faf9056 h4, .trc-service-detail .elementor-element-faf9056 h5, .trc-service-detail .elementor-element-faf9056 h6 {
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  font-weight: 500 !important;
  color: var(--trc-ivory) !important;
}
/* linhas dos blocos de indicadores: 3px -> 1px (stroke igual ao resto) */
.trc-service-detail .elementor-element-b0f7d0c,
.trc-service-detail .elementor-element-f857600,
.trc-service-detail .elementor-element-11da89b,
.trc-service-detail .elementor-element-415eda1 {
  border-top-width: 1px !important;
}

/* =========================================================================
   41) COERÊNCIA DE DESIGN — /projectos/ + Contacto + Notícias (2026-06-11).
   a) linhas dos cards de projecto na palete (estavam rgba(17,17,17,.1));
   b) título do card mais acima (sobrepõe o nº fantasma, editorial);
   c) PÍLULA CLARA UNIFICADA (= "Ver serviço" das páginas de serviço):
      Ver projecto (cards), Categoria (toolbar) e Enviar (Contacto);
   d) paginação do blog na palete.
   ========================================================================= */
/* a) linha de topo da coluna de info do card */
.elementor-element-4b754e0 .elementor-element-439b594 {
  border-top-color: var(--trc-line) !important;
}
/* b) eyebrow+título sobem, sobrepondo levemente o nº fantasma (que é
   quase-invisível por design) — título passa a viver junto ao topo */
.elementor-element-4b754e0 .elementor-element-39b0b07 {
  margin-top: -52px;
  position: relative;
  z-index: 1;
}
/* c2) "Categoria" (toolbar) → mesma pílula */
.trc-proj-toolbar .trc-view-btn {
  background: var(--trc-ivory) !important;
  color: var(--trc-soft) !important;
  font-size: 13px !important; font-weight: 500 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
  height: 44px; padding: 0 26px !important;
  border: 1px solid rgba(46, 45, 45, 0.10) !important;
  border-radius: 999px !important;
  transition: filter .4s ease, transform .4s ease, background-color .4s ease !important;
}
.trc-proj-toolbar .trc-view-btn:hover {
  background-color: var(--trc-oatmeal) !important;
  border-color: var(--trc-oatmeal) !important;
  color: var(--trc-ivory) !important;
  transform: translateY(-2px);
}
.trc-proj-toolbar .trc-view-btn.is-active {
  background-color: var(--trc-oatmeal) !important;
  border-color: var(--trc-oatmeal) !important;
  color: var(--trc-ivory) !important;
}
/* c3) "Enviar" do formulário de Contacto → pílula primária da palete.
   Antes vinha Ivory + texto Soft (cinza-acastanhado lavado), fora das regras de
   cor dos outros botões. Passa a seguir o botão primário do site
   (.rr-btn-primary, §1796): fundo Oatmeal + texto Ink. Hover escurece para Ink
   + texto Ivory (como .trc-svc-contact). */
.wpcf7 button.rr-btn-primary {
  background: var(--trc-oatmeal) !important;
  color: var(--trc-ink) !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
  font-size: 13px !important;
  border: 1px solid var(--trc-oatmeal) !important;
  border-radius: 999px !important;
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, transform .4s ease !important;
}
.wpcf7 button.rr-btn-primary span,
.wpcf7 button.rr-btn-primary .text,
.wpcf7 button.rr-btn-primary i { color: var(--trc-ink) !important; }
/* d) paginação do blog na palete */
body.blog .page-numbers, body.archive .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--trc-line) !important;
  border-radius: 999px;
  background: transparent !important;
  color: var(--trc-soft) !important;
  font-size: 14px;
  transition: background-color .4s ease, color .4s ease;
}
body.blog .page-numbers.current, body.archive .page-numbers.current,
body.blog a.page-numbers:hover, body.archive a.page-numbers:hover {
  background: var(--trc-oatmeal) !important;
  color: var(--trc-ivory) !important;
  border-color: var(--trc-oatmeal) !important;
}

/* =========================================================================
   42) BLOG — afinações (2026-06-11):
   a) esconder prev/next do TEMA (duplicava a nossa navegação) + "No tags";
   b) linha do campo de pesquisa mais escura (estava invisível);
   c) imagem destacada do artigo contida na coluna (não full-bleed) e com
      altura razoável;
   d) pills de categorias (lista de artigos) — sistema visual do site.
   ========================================================================= */
/* a) duplicados do tema no fundo do artigo */
body.single-post .post-navigation,
body.single-post .blog-details__tag { display: none !important; }

/* b) pesquisa do sidebar: linha e campo visíveis */
.blog-sidebar input[type="search"], .blog-sidebar input[type="text"],
.widget_search input[type="search"], .widget_search input[type="text"],
.wp-block-search input[type="search"] {
  border-color: rgba(46, 45, 45, 0.45) !important;
  border-bottom-color: rgba(46, 45, 45, 0.45) !important;
}

/* c) imagem destacada (herói) do artigo REMOVIDA (2026-06-11, pedido) —
   o artigo abre directo no texto; as imagens DE CONTEÚDO (dentro de
   .blog-details__content) mantêm-se. Ajuste do respiro título→texto. */
body.single-post .blog-details-inner > .blog-details__media.parallax-view {
  display: none !important;
}
body.single-post .blog-details__content { padding-top: 8px; }

/* d) pills de categorias na lista de artigos */
.trc-blog-cats {
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 1620px; margin: 8px auto 42px; padding: 0 15px;
}
.trc-cat-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 24px;
  background: var(--trc-ivory);
  color: var(--trc-soft);
  border: 1px solid rgba(46, 45, 45, 0.10);
  border-radius: 999px;
  font-family: "Bai Jamjuree", sans-serif;
  font-size: 13px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color .4s ease, color .4s ease, filter .4s ease, transform .4s ease;
}
.trc-cat-pill:hover { filter: brightness(0.97); transform: translateY(-2px); color: var(--trc-ink); }
.trc-cat-pill.is-active {
  background-color: var(--trc-oatmeal);
  color: var(--trc-ivory);
  border-color: var(--trc-oatmeal);
}

/* =========================================================================
   43) ARTIGO + FOOTER — afinações (2026-06-11):
   a) secção de comentários removida (artigo termina na navegação, junto
      ao footer);
   b) footer: títulos junto aos links (colunas tinham space-between que os
      afastava) e títulos na cor escura visível (ink).
   ========================================================================= */
/* a) sem comentários nos artigos */
body.single-post #comments,
body.single-post .comments-area,
body.single-post .comment-respond { display: none !important; }
/* encostar a navegação de artigos ao footer (sem o vazio dos comentários) */
body.single-post .trc-article-cards { margin-bottom: 0 !important; }

/* b) colunas do footer: conteúdo logo abaixo do título */
:is(.elementor-1312,.elementor-5181,.elementor-5182) .elementor-element-5fe0426 > .e-con-inner > .e-con-full {
  justify-content: flex-start !important;
  gap: 26px !important;
}
/* títulos do footer na cor escura visível */
:is(.elementor-1312,.elementor-5181,.elementor-5182) h2, :is(.elementor-1312,.elementor-5181,.elementor-5182) h3, :is(.elementor-1312,.elementor-5181,.elementor-5182) h4, :is(.elementor-1312,.elementor-5181,.elementor-5182) h5 {
  color: var(--trc-ink) !important;
}
/* os widgets das colunas tinham margin-top fixos enormes (ex. 300px) a
   empurrar os links para o fundo — anular; o gap 26px dá o ritmo. */
:is(.elementor-1312,.elementor-5181,.elementor-5182) .elementor-element-5fe0426 .e-con-full > .elementor-widget,
:is(.elementor-1312,.elementor-5181,.elementor-5182) .elementor-element-5fe0426 .e-con-full > .e-con {
  margin-top: 0 !important;
}

/* §43b) FOOTER — menu, redes e morada alinhados pelo © (2026-06-11):
   o conteúdo das colunas Navegação/Redes/Atelier desce em grupo para o
   fundo da coluna, alinhando com o © da 1.ª coluna. Títulos ficam no topo. */
:is(.elementor-1312,.elementor-5181,.elementor-5182) .elementor-element-5fe0426 > .e-con-inner > .e-con-full:not(:first-child) > *:nth-child(2) {
  margin-top: auto !important;
}
:is(.elementor-1312,.elementor-5181,.elementor-5182) .elementor-element-5fe0426 > .e-con-inner > .e-con-full:first-child > *:last-child {
  margin-top: auto !important;   /* © no fundo da 1.ª coluna (referência) */
}

/* §43c) Nav de artigos com o MESMO alinhamento da dos serviços (2026-06-11):
   os cartões saem da coluna estreita do texto do artigo e alinham à coluna
   1620px do site (como nas páginas de serviço). */
body.single-post .trc-article-cards {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1620px, calc(100vw - 80px));
}
/* §43d) artigo encostado ao footer: o tema põe padding-bottom 100px na
   .archidex-blog-area — anular nos singles (a nav é o fim da página). */
body.single-post .archidex-blog-area { padding-bottom: 0 !important; }

/* =========================================================================
   §44) ARTIGOS — componentes editoriais (SEO Onda 1, 2026-06-11)
   Aditivo e scoped: classes .trc-art-* usadas no corpo dos posts.
   Paleta SAND; hovers suaves sem deslocamento.
   ========================================================================= */

/* Meta-linha no topo: secção · tempo de leitura · actualização */
.blog-details__content .trc-art-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--trc-soft); margin-bottom: 36px; padding-bottom: 16px;
  border-bottom: 1px solid var(--trc-line);
}
.blog-details__content .trc-art-meta strong { color: var(--trc-ink); font-weight: 600; }
.blog-details__content .trc-art-meta span + span::before {
  content: "\00B7"; margin-right: 14px; color: var(--trc-line);
}

/* Etiqueta pequena usada dentro de caixas (Resumo, FAQ) */
.blog-details__content .trc-art-label {
  display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--trc-soft); margin-bottom: 18px; font-weight: 600;
}

/* Caixa-resumo executivo */
.blog-details__content .trc-art-summary {
  border: 1px solid var(--trc-line);
  padding: 30px 34px 24px; margin: 0 0 60px;
}
.blog-details__content .trc-art-summary p { margin-bottom: 16px; }
.blog-details__content .trc-art-summary ul.list { margin-bottom: 0; }
.blog-details__content .trc-art-summary ul.list li { margin-bottom: 10px; }

/* Citação destacada — afina a quote nativa do tema */
.blog-details__content blockquote.archidex-blog-details-quote { margin: 0 0 60px; }
.blog-details__content blockquote.archidex-blog-details-quote p {
  font-size: 22px; line-height: 32px; color: var(--trc-ink);
  font-weight: 500; letter-spacing: -.3px; margin-bottom: 0;
}
.blog-details__content blockquote .trc-art-cite {
  display: block; margin-top: 16px; font-style: normal; font-size: 13px;
  letter-spacing: .03em; color: var(--trc-soft);
}
.blog-details__content blockquote .trc-art-cite a {
  color: var(--trc-soft); border-bottom: 1px solid var(--trc-line);
  transition: color .45s ease, border-color .45s ease;
}
.blog-details__content blockquote .trc-art-cite a:hover { color: var(--trc-ink); border-color: var(--trc-ink); }

/* Tabelas editoriais */
.blog-details__content .trc-art-table { overflow-x: auto; margin: 0 0 60px; }
.blog-details__content .trc-art-table table { width: 100%; border-collapse: collapse; }
.blog-details__content .trc-art-table th {
  text-align: left; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--trc-ink); font-weight: 600;
  padding: 0 18px 12px 0; border-bottom: 2px solid var(--trc-ink);
}
.blog-details__content .trc-art-table td {
  font-size: 15px; line-height: 23px; color: #555; font-weight: 500;
  padding: 14px 18px 14px 0; border-bottom: 1px solid var(--trc-line);
  vertical-align: top;
}
.blog-details__content .trc-art-table td strong { color: var(--trc-ink); }
.blog-details__content .trc-art-table p.trc-src {
  margin: 12px 0 0; font-size: 12.5px; letter-spacing: .02em; color: var(--trc-soft);
}
.blog-details__content .trc-art-table p.trc-src a {
  color: var(--trc-soft); border-bottom: 1px solid var(--trc-line);
  transition: color .45s ease, border-color .45s ease;
}
.blog-details__content .trc-art-table p.trc-src a:hover { color: var(--trc-ink); border-color: var(--trc-ink); }

/* CTA contextual (meio do artigo) */
.blog-details__content .trc-art-cta-inline {
  border: 1px solid var(--trc-line); border-left: 2px solid var(--trc-ink);
  padding: 26px 30px; margin: 0 0 60px;
}
.blog-details__content .trc-art-cta-inline p { margin-bottom: 0; color: var(--trc-ink); }
.blog-details__content .trc-art-cta-inline a {
  font-weight: 600; color: var(--trc-ink); border-bottom: 1px solid var(--trc-ink);
  transition: color .45s ease, border-color .45s ease;
}
.blog-details__content .trc-art-cta-inline a:hover { color: var(--trc-oatmeal); border-color: var(--trc-oatmeal); }

/* FAQ */
.blog-details__content .trc-art-faq {
  border-top: 1px solid var(--trc-line); padding-top: 44px; margin: 0 0 60px;
}
.blog-details__content .trc-art-faq h3 {
  font-size: 21px; line-height: 28px; letter-spacing: -.4px;
  margin: 0 0 12px; font-weight: 600;
}
.blog-details__content .trc-art-faq p { margin-bottom: 36px; }
.blog-details__content .trc-art-faq p:last-child { margin-bottom: 0; }

/* CTA final (caixa ink) */
.blog-details__content .trc-art-cta {
  background: var(--trc-ink); padding: 44px 46px; margin: 0 0 20px;
}
.blog-details__content .trc-art-cta .trc-art-cta-title {
  display: block; font-size: 26px; line-height: 33px; letter-spacing: -.6px;
  color: var(--trc-ivory); margin: 0 0 14px; font-weight: 500;
}
.blog-details__content .trc-art-cta p {
  color: var(--trc-creme); margin-bottom: 26px; font-size: 16px; line-height: 24px;
}
.blog-details__content .trc-art-cta a.trc-art-btn {
  display: inline-block; border: 1px solid var(--trc-ivory); color: var(--trc-ivory);
  padding: 13px 28px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .45s ease, color .45s ease;
}
.blog-details__content .trc-art-cta a.trc-art-btn:hover {
  background: var(--trc-ivory); color: var(--trc-ink);
}

@media (max-width: 767px) {
  .blog-details__content .trc-art-summary { padding: 22px 22px 16px; }
  .blog-details__content .trc-art-cta { padding: 32px 26px; }
  .blog-details__content blockquote.archidex-blog-details-quote p { font-size: 18px; line-height: 26px; }
  .blog-details__content .trc-art-cta .trc-art-cta-title { font-size: 22px; line-height: 28px; }
}

/* §44b) Correcções pós-verificação visual (Onda 1):
   a) ul.list do tema traz margin-top -30px → colidia com a etiqueta do resumo;
   b) links dentro do corpo do artigo eram invisíveis (cor = texto, sem sublinhado). */
.blog-details__content .trc-art-summary ul.list { margin-top: 0; }
body.single-post .blog-details__content p > a,
body.single-post .blog-details__content li > a {
  color: var(--trc-ink); font-weight: 600;
  border-bottom: 1px solid var(--trc-line);
  transition: color .45s ease, border-color .45s ease;
}
body.single-post .blog-details__content p > a:hover,
body.single-post .blog-details__content li > a:hover {
  color: var(--trc-soft); border-color: var(--trc-soft);
}
/* dentro da caixa ink, os links seguem o estilo próprio da caixa */
body.single-post .blog-details__content .trc-art-cta p > a { color: inherit; border-color: var(--trc-creme); }

/* =========================================================================
   §44c) ARTIGOS — revisão de direcção de arte (feedback Tiago 2026-06-12):
   1) CTA final passa a Oatmeal + texto claro (regra §33: nenhum preto);
   2) escala editorial: corpo 17px, títulos contidos, coluna de leitura ~780px,
      caixas a 1040px e imagens à largura total — três larguras = ritmo;
   3) filete oatmeal sobre cada H2; lead destacado; legendas de imagem.
   ========================================================================= */

/* — Coluna de leitura (texto estreito, caixas médias, media largo) — */
body.single-post .blog-details__content > p,
body.single-post .blog-details__content > ul,
body.single-post .blog-details__content > ol,
body.single-post .blog-details__content > h2,
body.single-post .blog-details__content > h3,
body.single-post .blog-details__content > blockquote,
body.single-post .blog-details__content .trc-art-meta,
body.single-post .blog-details__content .trc-art-faq,
body.single-post .blog-details__content .trc-art-cta-inline { max-width: 780px; }
body.single-post .blog-details__content .trc-art-summary,
body.single-post .blog-details__content .trc-art-table,
body.single-post .blog-details__content .trc-art-cta { max-width: 1040px; }

/* — Corpo — */
body.single-post .blog-details__content p {
  font-size: 17px; line-height: 29px; margin-bottom: 26px; color: #4b4945;
}
body.single-post .blog-details__content ul.list li { font-size: 16.5px; line-height: 27px; }
body.single-post .blog-details__content .trc-art-meta + p {
  font-size: 20px; line-height: 33px; color: var(--trc-ink); font-weight: 500; margin-bottom: 34px;
}

/* — Títulos de secção: contidos, com filete oatmeal — */
body.single-post .blog-details__content h2 {
  font-size: 31px; line-height: 38px; letter-spacing: -1px; font-weight: 500;
  margin: 18px 0 18px; padding-top: 26px; position: relative;
}
body.single-post .blog-details__content h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 2px;
  background: var(--trc-oatmeal);
}
body.single-post .blog-details__content h3 {
  font-size: 22px; line-height: 30px; letter-spacing: -.4px; font-weight: 600; margin-bottom: 12px;
}

/* — Citação e FAQ acompanham a nova escala — */
body.single-post .blog-details__content blockquote.archidex-blog-details-quote p {
  font-size: 21px; line-height: 32px;
}
body.single-post .blog-details__content .trc-art-faq h3 { font-size: 19px; line-height: 26px; }
body.single-post .blog-details__content .trc-art-faq p { margin-bottom: 30px; }

/* — Imagens no corpo do artigo + legenda — */
body.single-post .blog-details__content .blog-details__media { margin: 16px 0 14px; }
body.single-post .blog-details__content .blog-details__media img {
  width: 100%; height: auto; display: block;
}
body.single-post .blog-details__content p.trc-art-caption {
  font-size: 12.5px; letter-spacing: .04em; color: var(--trc-soft);
  margin: 10px 0 50px; max-width: 1040px;
}

/* — CTA final: Oatmeal + texto claro (regra do site, §33) — */
body.single-post .blog-details__content .trc-art-cta { background: var(--trc-oatmeal); }
body.single-post .blog-details__content .trc-art-cta .trc-art-cta-title { color: var(--trc-ivory); }
body.single-post .blog-details__content .trc-art-cta p { color: var(--trc-ivory); font-size: 17px; line-height: 27px; }
body.single-post .blog-details__content .trc-art-cta a.trc-art-btn {
  border-color: var(--trc-ivory); color: var(--trc-ivory);
}
body.single-post .blog-details__content .trc-art-cta a.trc-art-btn:hover {
  background: var(--trc-ivory); color: var(--trc-ink);
}
body.single-post .blog-details__content .trc-art-cta p > a { color: inherit; border-color: var(--trc-ivory); }
/* CTA inline alinha com a régua oatmeal */
body.single-post .blog-details__content .trc-art-cta-inline { border-left-color: var(--trc-oatmeal); }

@media (max-width: 767px) {
  body.single-post .blog-details__content h2 { font-size: 25px; line-height: 31px; }
  body.single-post .blog-details__content p { font-size: 16px; line-height: 27px; }
  body.single-post .blog-details__content .trc-art-meta + p { font-size: 18px; line-height: 29px; }
}

/* =========================================================================
   §44d) ARTIGOS — alinhamento único (feedback Tiago 2026-06-12 #2).
   A estrutura original do blog é UMA coluna centrada onde título, texto e
   media partilham as mesmas margens. As três larguras do §44c quebravam-na.
   Agora: coluna editorial única de 840px para TODOS os elementos; a escala
   tipográfica do §44c mantém-se. Respiro título↔menu reduzido e equilibrado.
   ========================================================================= */

/* Uma só coluna: o contentor do artigo estreita; tudo alinha por ele */
body.single-post .blog-details-inner > .container { max-width: 840px; }

/* Anular os limites por-elemento do §44c (passam a herdar a coluna única) */
body.single-post .blog-details__content > p,
body.single-post .blog-details__content > ul,
body.single-post .blog-details__content > ol,
body.single-post .blog-details__content > h2,
body.single-post .blog-details__content > h3,
body.single-post .blog-details__content > blockquote,
body.single-post .blog-details__content .trc-art-meta,
body.single-post .blog-details__content .trc-art-faq,
body.single-post .blog-details__content .trc-art-cta-inline,
body.single-post .blog-details__content .trc-art-summary,
body.single-post .blog-details__content .trc-art-table,
body.single-post .blog-details__content .trc-art-cta,
body.single-post .blog-details__content p.trc-art-caption { max-width: none; }

/* Título do artigo (sem banner): respiro equilibrado em relação ao menu */
body.single-post .blog-details-inner.section-spacing-top { padding-top: 110px; }

/* Título à escala da coluna única (3 linhas a 50px ficavam pesadas) */
body.single-post .blog-details h2.section-title {
  font-size: 42px; line-height: 50px; letter-spacing: -1.6px;
}
@media (max-width: 767px) {
  body.single-post .blog-details-inner.section-spacing-top { padding-top: 70px; }
  body.single-post .blog-details h2.section-title { font-size: 30px; line-height: 37px; }
}

/* =========================================================================
   §44e) ARTIGOS — composição dinâmica (feedback Tiago 2026-06-12 #4):
   coluna +30% (840→1092); diagramas SVG minimalistas; movimento suave ao
   scroll (respeita prefers-reduced-motion); pares de imagem e citações de
   autor usam a estrutura ORIGINAL do template (row/col + blockquote .title).
   ========================================================================= */

body.single-post .blog-details-inner > .container { max-width: 1092px; }

/* Diagramas minimalistas */
body.single-post .blog-details__content .trc-diagram {
  margin: 44px 0 10px; padding: 38px 34px 30px;
  border: 1px solid var(--trc-line); background: rgba(219, 217, 208, 0.25);
}
body.single-post .blog-details__content .trc-diagram svg { width: 100%; height: auto; display: block; }
body.single-post .blog-details__content .trc-diagram text {
  font-family: inherit; fill: var(--trc-ink);
}
body.single-post .blog-details__content .trc-diagram .lbl { font-size: 15px; font-weight: 600; }
body.single-post .blog-details__content .trc-diagram .sub { font-size: 12.5px; fill: var(--trc-soft); font-weight: 500; letter-spacing: .02em; }
body.single-post .blog-details__content .trc-diagram .acc { fill: var(--trc-oatmeal); }

/* Par de imagens (estrutura original row/col): respiro coerente */
body.single-post .blog-details__content .blog-details__wrapper { margin: 16px 0 40px; }
body.single-post .blog-details__content .blog-details__wrapper .media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
body.single-post .blog-details__content .blog-details__wrapper .row { align-items: stretch; }

/* Movimento suave ao entrar no viewport */
body.single-post .blog-details__content .trc-fx {
  opacity: 0; transform: translateY(16px);
  transition: opacity .65s ease, transform .65s ease;
}
body.single-post .blog-details__content .trc-fx.trc-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.single-post .blog-details__content .trc-fx { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   §44f) ARTIGOS + NOTÍCIAS — correcções (feedback Tiago 2026-06-12 #5):
   a) nav anterior/seguinte fora do sítio: o motion JS anulava o translateX
      do §43c (corrigido no JS — nav excluída do efeito); salvaguarda aqui;
   b) destaques SEM fundo branco: citação com fonte passa a Oatmeal;
   c) chips categoria/data do banner alinhados;
   d) sidebar de notícias: busca alinhada e widgets arrumados.
   ========================================================================= */

/* a) salvaguarda: a nav nunca herda o efeito de revelação */
body.single-post .blog-details__content .trc-article-cards.trc-fx {
  opacity: 1; transform: translateX(-50%);
}

/* b) citação com fonte = caixa de destaque Oatmeal (regra do site) */
body.single-post .blog-details__content blockquote.archidex-blog-details-quote {
  background: var(--trc-oatmeal); padding: 34px 38px; margin: 0 0 60px;
}
body.single-post .blog-details__content blockquote.archidex-blog-details-quote::before {
  background: var(--trc-ink);
}
body.single-post .blog-details__content blockquote.archidex-blog-details-quote p {
  color: var(--trc-ivory);
}
body.single-post .blog-details__content blockquote.archidex-blog-details-quote .trc-art-cite,
body.single-post .blog-details__content blockquote.archidex-blog-details-quote .trc-art-cite a {
  color: var(--trc-creme); border-color: var(--trc-creme);
}
body.single-post .blog-details__content blockquote.archidex-blog-details-quote .trc-art-cite a:hover {
  color: var(--trc-ivory); border-color: var(--trc-ivory);
}

/* c) chips do banner (categoria · data) alinhados ao centro */
.blog-details .blog-details-info .meta li { align-items: center; line-height: 1; }
.blog-details .blog-details-info .meta li a,
.blog-details .blog-details-info .meta li span { line-height: 1.3; }

/* d) sidebar de notícias: busca e listas */
.wp-block-search .wp-block-search__inside-wrapper { align-items: center; gap: 8px; }
.wp-block-search .wp-block-search__input { line-height: 1.4; }
.wp-block-search .wp-block-search__button {
  border: 1px solid var(--trc-line); background: var(--trc-oatmeal); color: var(--trc-ivory);
  padding: 10px 22px; font-size: 13px; letter-spacing: .06em;
  transition: background-color .45s ease;
}
.wp-block-search .wp-block-search__button:hover { background: var(--trc-ink); }
.wp-block-latest-posts, .wp-block-latest-comments { padding-left: 18px; }
.wp-block-latest-posts li, .wp-block-latest-comments li { margin-bottom: 14px; }

/* §44f-d2) Busca da sidebar: o botão absoluto saía 5px fora do campo
   redondo — passa a pílula contida, centrada verticalmente. */
.wp-block-search .wp-block-search__button {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  height: 38px; padding: 0 22px; border: none; border-radius: 50px;
}

/* §44f-d3) idem, com especificidade acima da regra do tema
   (.sidebar__widget.widget_block ... { top:0; right:-5px; bottom:0 }) */
.sidebar__widget.widget_block .wp-block-search .wp-block-search__button {
  position: absolute; right: 5px; top: 50%; bottom: auto;
  transform: translateY(-50%); height: 38px; max-width: 120px;
  padding: 0 20px; border: none; border-radius: 50px;
  background: var(--trc-oatmeal); color: var(--trc-ivory);
}
.sidebar__widget.widget_block .wp-block-search .wp-block-search__button:hover { background: var(--trc-ink); }

/* §44g) Diagramas v3 — linguagem de círculos translúcidos (ref. Dribbble,
   adaptada à paleta SAND): pontos anelados com pulso subtil. */
@keyframes trcPulse { 0%, 100% { opacity: .3; } 50% { opacity: .85; } }
.trc-diagram .trc-pulse { animation: trcPulse 3.4s ease-in-out infinite; }
.trc-diagram .trc-pulse2 { animation: trcPulse 3.4s ease-in-out 1.1s infinite; }
.trc-diagram .trc-pulse3 { animation: trcPulse 3.4s ease-in-out 2.2s infinite; }
@media (prefers-reduced-motion: reduce) {
  .trc-diagram .trc-pulse, .trc-diagram .trc-pulse2, .trc-diagram .trc-pulse3 { animation: none; }
}
.trc-diagram .lbl-sp { font-size: 14px; font-weight: 600; letter-spacing: .22em; }

/* §44h) Dois acabamentos (feedback Tiago 2026-06-12 #6):
   a) citação de AUTOR (blockquote sem classe) tinha fundo claro do tema
      → transparente, só filete + travessão (como na referência aprovada);
   b) meta dos cartões da listagem: categoria e data na mesma baseline. */
body.single-post .blog-details__content blockquote:not(.archidex-blog-details-quote) {
  background: transparent !important;
  padding: 6px 0 6px 34px;
}
.postbox__content .meta-date {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.postbox__content .meta-date li { line-height: 1.4; }

/* =========================================================================
   §44i) LISTAGEM DE NOTÍCIAS (feedback Tiago 2026-06-12 #7):
   a) mais respiro vertical entre cartões;
   b) meta do cartão: categoria à esquerda, DATA À DIREITA, ambas alinhadas
      às margens da imagem; separador-vírgula do tema removido.
   ========================================================================= */
.archidex-blog-area .postbox__item.blog__item { margin-bottom: 96px; }
.archidex-blog-area .postbox__content .meta-date {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%; padding: 0; margin: 20px 0 10px; gap: 12px;
}
.archidex-blog-area .postbox__content .meta-date li { line-height: 1.4; }
.archidex-blog-area .postbox__content .meta-date li::before,
.archidex-blog-area .postbox__content .meta-date li::after { content: none !important; margin: 0; }

/* =========================================================================
   §45) PÁGINAS DE SERVIÇO — bloco "Do nosso jornal" (.trc-svc-*)
   Aditivo; alinhado à coluna 1620 como o footer; hovers suaves.
   ========================================================================= */
.trc-svc-related { padding: 40px 0 90px; }
.trc-svc-related__inner {
  width: min(1620px, calc(100vw - 80px)); margin: 0 auto;
  border-top: 1px solid var(--trc-line); padding-top: 44px;
}
.trc-svc-label {
  display: block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--trc-soft); font-weight: 600; margin-bottom: 26px;
}
.trc-svc-related ul { list-style: none; margin: 0 0 30px; padding: 0; }
.trc-svc-related li + li { border-top: 1px solid var(--trc-creme); }
.trc-svc-related li a {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 16px 0; color: var(--trc-ink); font-size: 18px; font-weight: 500;
  transition: color .45s ease;
}
.trc-svc-related li a .arr { color: var(--trc-oatmeal); transition: transform .45s ease; }
.trc-svc-related li a:hover { color: var(--trc-oatmeal); }
.trc-svc-related li a:hover .arr { transform: translateX(6px); }
.trc-svc-contact {
  display: inline-block; background: var(--trc-oatmeal); color: var(--trc-ivory);
  padding: 14px 28px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .45s ease;
}
.trc-svc-contact:hover { background: var(--trc-ink); color: var(--trc-ivory); }
@media (max-width: 767px) {
  .trc-svc-related__inner { width: calc(100vw - 48px); }
  .trc-svc-related li a { font-size: 16px; }
}

/* §45b) Sobre Nós — anos dos marcos não quebram linha (obsoleto após redesign §46; inócuo) */
.elementor-element-4db840f .elementor-heading-title,
.elementor-element-5b5ebda .elementor-heading-title,
.elementor-element-aa20efc .elementor-heading-title,
.elementor-element-8dc1aa6 .elementor-heading-title { white-space: nowrap; }

/* =========================================================================
   §46) SOBRE NÓS — corpo editorial (.trc-sobre-*)
   Aditivo, via the_content (prioridade 14). Coluna 1620 como §45.
   ========================================================================= */
.trc-sobre { padding: 30px 0 0; }
.trc-sobre__inner { width: min(1620px, calc(100vw - 80px)); margin: 0 auto; }
.trc-sobre section { margin: 0 0 120px; }
.trc-sobre .trc-svc-label { margin-bottom: 18px; }
.trc-sobre h2 {
  font-size: 38px; line-height: 1.16; font-weight: 500; color: var(--trc-ink);
  margin: 0 0 34px; max-width: 720px;
}
.trc-sobre p { font-size: 19px; line-height: 32px; color: var(--trc-soft); margin: 0 0 22px; }

/* o arquiteto — bio + ficha */
.trc-sobre-arq .grid { display: grid; grid-template-columns: 7fr 4fr; gap: 72px; align-items: start; }
.trc-sobre-arq .bio p { max-width: 760px; }
.trc-sobre-arq .bio em { font-style: italic; color: var(--trc-ink); }
.trc-sobre-arq .ficha { margin: 14px 0 0; border-left: 2px solid var(--trc-oatmeal); padding-left: 36px; }
.trc-sobre-arq .ficha > div { padding: 16px 0; }
.trc-sobre-arq .ficha > div + div { border-top: 1px solid var(--trc-creme); }
.trc-sobre-arq .ficha dt {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--trc-oatmeal); font-weight: 600; margin-bottom: 6px;
}
.trc-sobre-arq .ficha dd { margin: 0; font-size: 16px; line-height: 26px; color: var(--trc-ink); }

/* manifesto */
.trc-sobre-manifesto .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 1240px; }
.trc-sobre-pull {
  background: var(--trc-oatmeal); color: var(--trc-ivory);
  padding: 46px 52px; margin-top: 56px; max-width: 1240px;
}
.trc-sobre-pull p {
  color: var(--trc-ivory); font-size: 26px; line-height: 38px; font-weight: 500; margin: 0;
}

/* método — linha de processo com nós pulsantes */
.trc-sobre-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px; position: relative; padding-top: 9px; }
.trc-sobre-steps::before {
  content: ""; position: absolute; top: 17px; left: 9px; right: 9px;
  height: 1px; background: var(--trc-line); opacity: .55;
}
.trc-sobre-step { position: relative; }
.trc-sobre-step .dot {
  position: relative; z-index: 1; display: block; width: 17px; height: 17px;
  border-radius: 50%; border: 1px solid var(--trc-oatmeal); background: var(--trc-ivory);
  margin-bottom: 22px;
}
.trc-sobre-step .dot::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--trc-oatmeal); animation: trcPulse 3.4s ease-in-out infinite;
}
.trc-sobre-step:nth-child(2) .dot::after { animation-delay: .55s; }
.trc-sobre-step:nth-child(3) .dot::after { animation-delay: 1.1s; }
.trc-sobre-step:nth-child(4) .dot::after { animation-delay: 1.65s; }
.trc-sobre-step:nth-child(5) .dot::after { animation-delay: 2.2s; }
.trc-sobre-step .n {
  display: block; font-size: 12px; letter-spacing: .22em; color: var(--trc-oatmeal);
  font-weight: 600; margin-bottom: 8px;
}
.trc-sobre-step h3 {
  font-size: 17px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--trc-ink); font-weight: 600; margin: 0 0 12px;
}
.trc-sobre-step p { font-size: 15.5px; line-height: 25px; margin: 0; }

/* BIM — banda de destaque */
.trc-sobre-bim .band { background: var(--trc-oatmeal); padding: 72px 64px; }
.trc-sobre-bim .lbl {
  display: block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--trc-ivory); opacity: .75; font-weight: 600; margin-bottom: 20px;
}
.trc-sobre-bim h2 { color: var(--trc-ivory); max-width: 860px; }
.trc-sobre-bim .lead { color: var(--trc-ivory); opacity: .9; max-width: 860px; margin-bottom: 48px; }
.trc-sobre-bim .bens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.trc-sobre-bim .bens h3 {
  color: var(--trc-ivory); font-size: 18px; font-weight: 600; margin: 0 0 10px;
  padding-top: 14px; border-top: 1px solid rgba(235, 234, 228, .35);
}
.trc-sobre-bim .bens p { color: var(--trc-ivory); opacity: .85; font-size: 15.5px; line-height: 26px; margin: 0; }

/* porquê — cartões */
.trc-sobre-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.trc-sobre-card {
  background: var(--trc-creme); border-top: 2px solid var(--trc-oatmeal);
  padding: 40px 36px; transition: background-color .5s ease;
}
.trc-sobre-card:hover { background: #d2cfc4; }
.trc-sobre-card h3 { font-size: 21px; font-weight: 600; color: var(--trc-ink); margin: 0 0 14px; }
.trc-sobre-card p { font-size: 16px; line-height: 27px; margin: 0; }

/* CTA */
.trc-sobre-cta {
  background: var(--trc-oatmeal); padding: 64px 60px;
  display: flex; justify-content: space-between; align-items: center; gap: 48px;
}
.trc-sobre-cta h2 { color: var(--trc-ivory); margin: 0 0 10px; font-size: 32px; }
.trc-sobre-cta p { color: var(--trc-ivory); opacity: .85; margin: 0; font-size: 17px; line-height: 28px; }
.trc-sobre-cta a {
  flex-shrink: 0; display: inline-block; border: 1px solid var(--trc-ivory);
  color: var(--trc-ivory); padding: 16px 34px; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .45s ease, color .45s ease;
}
.trc-sobre-cta a:hover { background: var(--trc-ivory); color: var(--trc-ink); }

/* entrada suave */
.trc-sobre section { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.trc-sobre section.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .trc-sobre section { opacity: 1; transform: none; transition: none; }
  .trc-sobre-step .dot::after { animation: none; }
}

@media (max-width: 1199px) {
  .trc-sobre-steps { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .trc-sobre-steps::before { display: none; }
  .trc-sobre-cards { grid-template-columns: 1fr; }
  .trc-sobre-arq .grid { grid-template-columns: 1fr; gap: 44px; }
  .trc-sobre-arq .ficha { padding-left: 28px; }
  .trc-sobre-bim .bens { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 767px) {
  .trc-sobre__inner { width: calc(100vw - 48px); }
  .trc-sobre section { margin-bottom: 80px; }
  .trc-sobre h2 { font-size: 29px; }
  .trc-sobre p { font-size: 17px; line-height: 29px; }
  .trc-sobre-manifesto .cols { grid-template-columns: 1fr; gap: 0; }
  .trc-sobre-pull { padding: 34px 28px; }
  .trc-sobre-pull p { font-size: 21px; line-height: 32px; }
  .trc-sobre-steps { grid-template-columns: 1fr; }
  .trc-sobre-bim .band { padding: 44px 32px; }
  .trc-sobre-cta { flex-direction: column; align-items: flex-start; padding: 44px 32px; }
}

/* =========================================================================
   §47) PROJETOS — galeria interior com composição editorial equilibrada.
   Mantém o parallax do tema (data-speed nas imgs). Grelha de 12 colunas
   com ciclo de 6: par 7/5 → módulo central com respiro → par 5/7 → full.
   ========================================================================= */
.portfolio-gallery__inner {
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 1.1vw, 16px);
}
.portfolio-gallery__inner .span-2 { grid-column: span 12; }
.portfolio-gallery__inner > *:nth-child(3) { width: 100%; }

.portfolio-gallery__inner > *:nth-child(6n+1) { grid-column: 1 / 8;  height: clamp(360px, 44vw, 660px); }
.portfolio-gallery__inner > *:nth-child(6n+2) { grid-column: 8 / 13; height: clamp(360px, 44vw, 660px); }
.portfolio-gallery__inner > *:nth-child(6n+3) { grid-column: 1 / 13; height: clamp(420px, 50vw, 760px); }
.portfolio-gallery__inner > *:nth-child(6n+4) { grid-column: 1 / 6;  height: clamp(330px, 40vw, 600px); }
.portfolio-gallery__inner > *:nth-child(6n+5) { grid-column: 6 / 13; height: clamp(330px, 40vw, 600px); }
.portfolio-gallery__inner > *:nth-child(6n)   { grid-column: 1 / 13; height: clamp(440px, 54vw, 800px); }

/* última imagem sem par não deixa buraco na grelha */
.portfolio-gallery__inner > *:last-child:nth-child(6n+1),
.portfolio-gallery__inner > *:last-child:nth-child(6n+4) { grid-column: 1 / 13; }

/* folga vertical para o parallax (data-speed 0.8) nunca revelar vazio */
.portfolio-gallery__inner .portfolio-gallery__item { position: relative; }
.portfolio-gallery__inner .portfolio-gallery__item img {
  position: absolute; left: 0; top: -150px;
  width: 100%; height: calc(100% + 300px); object-fit: cover;
}

@media (max-width: 767px) {
  .portfolio-gallery__inner { gap: 9px; }
  .portfolio-gallery__inner > *:nth-child(n) {
    grid-column: 1 / -1; height: clamp(240px, 64vw, 420px);
  }
}

/* §46c) Páginas de serviço — cartões "Porquê o atelier" (versão curta) */
.trc-svc-porque { padding: 56px 0 64px; }
.trc-svc-porque .trc-svc-related__inner { border-top: 1px solid var(--trc-line); padding-top: 44px; }
.trc-svc-porque .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.trc-svc-porque .card {
  background: var(--trc-creme); border: 0; border-top: 2px solid var(--trc-oatmeal);
  border-radius: 0; padding: 30px 28px; transition: background-color .5s ease;
}
.trc-svc-porque .card:hover { background: #d2cfc4; }
.trc-svc-porque .card h3 { font-size: 18px; font-weight: 600; color: var(--trc-ink); margin: 0 0 10px; }
.trc-svc-porque .card p { font-size: 15px; line-height: 25px; color: var(--trc-soft); margin: 0; }
@media (max-width: 991px) {
  .trc-svc-porque .cards { grid-template-columns: 1fr; }
}

/* §46b) Páginas de serviço — faixa BIM antes do "Para ir mais longe" */
.trc-svc-bim { background: var(--trc-oatmeal); padding: 52px 0; margin-top: 40px; }
.trc-svc-bim .trc-svc-related__inner { border-top: 0; padding-top: 0; }
.trc-svc-bim .lbl {
  display: block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--trc-ivory); opacity: .75; font-weight: 600; margin-bottom: 16px;
}
.trc-svc-bim p {
  color: var(--trc-ivory); font-size: 19px; line-height: 31px; max-width: 980px; margin: 0 0 22px;
}
.trc-svc-bim p strong { font-weight: 600; }
.trc-svc-bim a {
  display: inline-block; color: var(--trc-ivory); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; border: 1px solid var(--trc-ivory); padding: 13px 26px;
  transition: background-color .45s ease, color .45s ease;
}
.trc-svc-bim a .arr { display: inline-block; transition: transform .45s ease; }
.trc-svc-bim a:hover { background: var(--trc-ivory); color: var(--trc-ink); }
.trc-svc-bim a:hover .arr { transform: translateX(5px); }
.trc-svc-bim + .trc-svc-related .trc-svc-related__inner { border-top: 0; }
@media (max-width: 767px) {
  .trc-svc-bim { padding: 38px 0; }
  .trc-svc-bim p { font-size: 17px; line-height: 28px; }
}

/* =========================================================================
   §48) /PROJECTOS/ — hovers uniformes + zoom dinâmico nos cartões
   - imagem: zoom em hover via propriedade CSS `scale` (independente), que
     compõe com o `transform: translate` do parallax (ScrollSmoother) sem o
     anular — verificado. Não usar `transform: scale` aqui (anularia o parallax).
   - título do projecto ("ver projecto"): hover Oatmeal, uniforme com o resto
     do site (substitui o fade de opacidade do tema).
   ========================================================================= */
.elementor-element-4b754e0 .expertise__media { overflow: hidden; }
.elementor-element-4b754e0 .expertise__media img {
  transform-origin: center center;
  will-change: transform;
}
/* hover-zoom (aumentar a imagem ao passar o rato) REMOVIDO a pedido (2026-06-25).
   A grelha tem só o parallax de scroll; e tirámos a transição em `transform`
   que abafava o parallax do ScrollSmoother. */

/* título do projecto — hover Oatmeal uniforme */
.elementor-element-4b754e0 .elementor-element-3f3d9be a {
  color: var(--trc-ink) !important;
  opacity: 1 !important;
  transition: color .4s ease !important;
}
.elementor-element-4b754e0 > .e-con:hover .elementor-element-3f3d9be a {
  color: var(--trc-oatmeal) !important;
}

@media (hover: none) {
  .elementor-element-4b754e0 > .e-con:hover .expertise__media img { scale: 1; }
}

/* =========================================================================
   §50) Home + Contacto + Footer — ajustes 2026-06-12
   ========================================================================= */

/* 50a) HOME — remover o contador "01 / 06" do slider do hero */
.portfolio__active .portfolio-counter { display: none !important; }

/* 50b) CONTACTO — botão "Enviar": default Oatmeal+Ink (§c3); no hover escurece
   para Ink + texto Ivory (mesmo gesto de .trc-svc-contact), dando feedback. */
.wpcf7 button.rr-btn-primary:hover {
  background-color: var(--trc-ink) !important;
  border-color: var(--trc-ink) !important;
  filter: none !important;
  transform: translateY(-2px);
}
.wpcf7 button.rr-btn-primary:hover span,
.wpcf7 button.rr-btn-primary:hover .text,
.wpcf7 button.rr-btn-primary:hover i { color: var(--trc-ivory) !important; }
.wpcf7 button.rr-btn-primary i { transition: transform .4s cubic-bezier(.2,.8,.2,1), color .4s ease; }
.wpcf7 button.rr-btn-primary:hover i { transform: translateX(5px); }

/* 50c) CONTACTO — secção "Seguir": redes em linha, compactas, ordem
   LinkedIn → Instagram → Facebook (parent flex-column 8f9b556 vira row-wrap;
   o título "Seguir" ocupa a sua própria linha). */
.elementor-element-8f9b556 {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 6px 26px !important;
}
.elementor-element-0cf3f8d { flex-basis: 100% !important; margin-bottom: 4px; }   /* "Seguir" */
.elementor-element-727d90d { order: 1; }   /* LinkedIn */
.elementor-element-efd8129 { order: 2; }   /* Instagram */
.elementor-element-4209882 { order: 3; }   /* Facebook  */
.elementor-element-8f9b556 .contact-area-contact-page,
.elementor-element-8f9b556 .contact-social,
.elementor-element-8f9b556 .social-links { display: inline-block; margin: 0 !important; }
.elementor-element-8f9b556 .social-links a {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .04em;
  color: var(--trc-soft) !important;
  transition: color .4s ease !important;
  line-height: 1.6 !important;
}
.elementor-element-8f9b556 .social-links a:hover { color: var(--trc-oatmeal) !important; }

/* 50d) FOOTER — ordem das redes: LinkedIn → Instagram → Facebook.
   Os links vivem em <li> dentro do widget a422dd7; DOM = Instagram, LinkedIn,
   Facebook. Tornar a lista flex-column e reordenar por posição. */
.elementor-element-a422dd7 ul { display: flex !important; flex-direction: column; }
.elementor-element-a422dd7 li:nth-child(1) { order: 2; }   /* Instagram → 2.º */
.elementor-element-a422dd7 li:nth-child(2) { order: 1; }   /* LinkedIn  → 1.º */
.elementor-element-a422dd7 li:nth-child(3) { order: 3; }   /* Facebook  → 3.º */

/* =========================================================================
   42) HOME SLIDER — lettering + botões (maquetas 2026-06-17)
   Skin visual sobre o slider existente (.portfolio__active). Sem alterar
   markup nem comportamento: tipografia Bai Jamjuree + setas circulares +
   "ver projecto" com traço que estende no hover.
   ========================================================================= */
.portfolio__active .portfolio__item .content .sub-title{
  font-family:'Bai Jamjuree',sans-serif !important;
  font-size:12px !important; line-height:1.4 !important; font-weight:500 !important;
  letter-spacing:.26em !important; text-transform:uppercase !important;
  color:#fff !important; opacity:.82; margin-bottom:14px !important;
}
.portfolio__active .portfolio__item .content .title{
  font-family:'Bai Jamjuree',sans-serif !important; font-weight:500 !important;
  line-height:1.05 !important; font-size:clamp(46px,5.5vw,78px) !important; letter-spacing:0 !important;
}
.portfolio__active .portfolio__item .content .title a{ color:#fff !important; text-decoration:none !important; }
.portfolio__active .portfolio__item .content a:has(.fa-angle-right){
  font-family:'Bai Jamjuree',sans-serif !important; font-size:12px !important;
  letter-spacing:.18em !important; text-transform:uppercase !important; color:#fff !important;
  opacity:.86; display:inline-flex !important; align-items:center; gap:11px; margin-top:20px !important;
  transition:opacity .4s ease;
}
.portfolio__active .portfolio__item .content a:has(.fa-angle-right):hover{ opacity:1; }
.portfolio__active .portfolio__item .content a:has(.fa-angle-right) i{ display:none !important; }
.portfolio__active .portfolio__item .content a:has(.fa-angle-right) span{
  width:30px; height:1px; background:#fff; display:inline-block; transition:width .4s ease;
}
.portfolio__active .portfolio__item .content a:has(.fa-angle-right):hover span{ width:46px; }
.portfolio-button-next, .portfolio-button-prev{
  width:46px !important; height:46px !important; border:1px solid rgba(255,255,255,.42) !important;
  border-radius:50% !important; background:transparent !important; color:#fff !important;
  display:flex !important; align-items:center; justify-content:center;
  transition:background .4s ease,border-color .4s ease !important;
}
.portfolio-button-next:hover, .portfolio-button-prev:hover{ background:rgba(255,255,255,.14) !important; border-color:#fff !important; }
.portfolio-button-next i, .portfolio-button-prev i{ color:#fff !important; }

/* 42b) "a seguir" — próximo projecto esbatido (JS injecta .trc-next) */
.portfolio{position:relative}
.trc-next{position:absolute;left:52px;bottom:46px;z-index:6;display:flex;align-items:center;gap:14px;opacity:.42;color:#fff;transition:opacity .5s ease;pointer-events:none}
.trc-next:hover{opacity:.6}
.trc-next .trc-next-lbl{font-family:'Bai Jamjuree',sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.trc-next .trc-next-lbl::after{content:'';display:inline-block;width:22px;height:1px;background:#fff;vertical-align:middle;margin-left:13px;opacity:.7}
.trc-next .trc-next-name{font-family:'Bai Jamjuree',sans-serif;font-size:15px;font-weight:500;letter-spacing:.01em}
@media (max-width:820px){.trc-next{left:26px;bottom:28px}}

/* 42c) visually-hidden helper (H1 escondido da Home) */
.trc-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* =========================================================================
   §44) CORRECÇÕES MOBILE (pré-publicação, 2026-06-21)
   a) NAV: o tema-pai renderiza .portfolio-mobile-menu em <576px (logo
      white.png cortado) POR CIMA da .portfolio-nav unificada → sobreposição
      e hambúrguer pouco claro. A .portfolio-nav já é a barra única em todos
      os ecrãs (display:flex !important, §1), com o seu hambúrguer visível
      abaixo de 992px — basta esconder o resíduo do tema-pai.
   b) HEADINGS: rede de segurança para os títulos nunca transbordarem.
   ========================================================================= */
.portfolio-mobile-menu { display: none !important; }
@media (max-width: 1024px) {
  /* Widgets com largura FIXA (ex. o título de intro do Sobre = 1405px) saíam
     do ecrã em tablet/telemóvel. max-width:100% só constrange onde não cabe —
     no desktop (largura da coluna > largura fixa) não tem efeito. */
  .elementor-widget { max-width: 100% !important; }
}
@media (max-width: 575.98px) {
  /* Hambúrguer: o tema-pai deixa de mostrar o trigger abaixo de 576px (esperava
     que o portfolio-mobile-menu assumisse). Como usamos a .portfolio-nav unica
     em todo o site, forçamos o trigger visível no telemóvel. */
  .portfolio-nav .header__navicon { display: block !important; }
  .elementor-widget-heading .elementor-heading-title { overflow-wrap: break-word; word-break: normal; }
}

/* §44 reforço (2026-06-21): guard de overflow horizontal em tablet/telemóvel —
   um ancestral (container/secção) é mais largo que o ecrã e arrasta o título. */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden !important; }
  .elementor-element, .e-con, .e-con-inner, .elementor-section, .elementor-container, .elementor-column { max-width: 100% !important; }
}

/* =========================================================================
   §45) QA MOBILE/TABLET (2026-06-21)
   a) HAMBÚRGUER: o tema só mostrava o trigger entre 992-1199px (classe
      d-lg-block d-xl-none) → em telemóvel (<992) o menu ficava inacessível,
      nos dois headers (home portfolio-nav + interior header-area-3).
      Restaurar o trigger abaixo de 992px.
   b) IMAGEM FULL-SCREEN DE PROJECTO: a parallax tinha rácio fixo 16:9; em
      telemóvel a caixa baixa cortava a imagem ("zoom"). Mostrar ao natural.
   ========================================================================= */
@media (max-width: 991.98px) {
  .side-toggle.mobile-button { display: block !important; }
  .portfolio-nav .header__navicon,
  .portfolio-nav .header__navicon .side-toggle.menu-toggle { display: block !important; }
  .header-area-3 .side-toggle.mobile-button { display: block !important; }
}
@media (max-width: 991.98px) {
  /* Imagem "full screen" de projecto: no telemóvel a caixa do parallax tinha
     height/min-height fixos (ex. 1330px) enquanto a imagem só enche ~235px →
     deixava um vazio enorme. Colapsar a caixa à altura natural da imagem, para
     a imagem aparecer como as restantes da galeria (mantém-se o data-id 38deb46
     da Home, que é mesmo full-screen). */
  .elementor-widget-archidex_parallax_image:not([data-id="38deb46"]),
  .elementor-widget-archidex_parallax_image:not([data-id="38deb46"]) .expertise__media {
    min-height: 0 !important;
    height: auto !important;
  }
  .elementor-widget-archidex_parallax_image:not([data-id="38deb46"]) .expertise__media { aspect-ratio: auto !important; }
  .elementor-widget-archidex_parallax_image:not([data-id="38deb46"]) .expertise__media img { height: auto !important; transform: none !important; }
}

/* §45c) Esconder o CTA "Fale Connosco" (.trc-nav-cta, injetado por JS) no
   telemóvel/tablet — ocupava a largura e empurrava o hambúrguer para fora do
   ecrã. O Contacto continua acessível pelo menu (offcanvas). */
@media (max-width: 991.98px) {
  .trc-nav-cta { display: none !important; }
}

/* §45d) Hambúrguer mobile DENTRO da barra blur (.portfolio-nav) — injetado por
   JS como último filho da barra (ver offcanvas-escape.js). A barra existe em
   todas as páginas (nativa ou sintética) e tem blur próprio. NÃO se força a
   posição: a barra acompanha o topo da página e sai com o scroll (igual em
   todas — a nativa também sai, por ter um ancestral com transform), para não
   tapar o conteúdo. As barras do ícone seguem o estado da nav (trc-on-light →
   tinta; trc-on-dark → marfim), como logo e menu. */
.trc-burger { display: none; }
@media (max-width: 991.98px) {
  .portfolio-nav .trc-burger {
    display: flex !important;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 40px; height: 40px; margin-left: auto; padding: 0; flex: 0 0 auto;
    background: transparent; border: 0; border-radius: 0;
    cursor: pointer; position: relative; z-index: 2;
  }
  .portfolio-nav .trc-burger span {
    display: block; width: 22px; height: 2px; border-radius: 2px;
    background: var(--trc-ink);
    transition: background-color .3s ease;
  }
  .portfolio-nav.trc-on-dark  .trc-burger span { background: var(--trc-ivory); }
  .portfolio-nav.trc-on-light .trc-burger span { background: var(--trc-ink); }
}

/* §45e) (obsoleto) Burger ancorado a .header-area-3 — a nav passou a ser sempre
   .portfolio-nav (nativa ou sintética), por isso já não é necessário. */

/* §45f) Fallback: se a barra .portfolio-nav não existir (caso raro), o
   hambúrguer cai para flutuante no body, com fundo próprio, para nunca faltar. */
body > .trc-burger {
  position: fixed; top: 21px; right: 18px; z-index: 1250;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  background: rgba(40, 40, 40, 0.5);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  border: 1px solid rgba(235, 234, 228, 0.55); border-radius: 50%; cursor: pointer;
}
body > .trc-burger span { display: block; width: 18px; height: 2px; background: var(--trc-ivory); border-radius: 2px; }
@media (min-width: 992px) { body > .trc-burger { display: none !important; } }
@media (max-width: 991.98px) { body > .trc-burger { display: flex !important; } }

/* §45g) Evitar hambúrguer DUPLICADO: manter só o flutuante (§45f) e esconder
   TODOS os triggers/menus nativos no telemóvel. O meanmenu (.mean-bar) vazava
   visível no corpo da Home/Notícias (era o "2.º hambúrguer" que não seguia o
   scroll); o offcanvas do tema (.side-info/.side-info-4) deixa de ser usado —
   o menu passa a ser o overlay próprio .trc-menu (§45i). */
@media (max-width: 991.98px) {
  .side-toggle.mobile-button,
  .portfolio-nav .header__navicon,
  .header-area-3 .side-toggle.mobile-button,
  .header-area-3 .header__navicon,
  .header__navicon,
  .mean-bar,
  .meanmenu-reveal { display: none !important; }
}

/* §45h) Banner SOBRE NÓS — imagem fixa por CSS (robusta a host/túnel).
   A regra do Elementor vive num CSS EXTERNO (uploads/elementor/css/post-2512.css)
   com URL absoluto http://...local/... que o cloudflared NÃO reescreve → banner
   em branco no túnel. URL root-relativo (/wp-content/...) resolve contra o host
   que serve a página (localhost / túnel / live), por isso é à prova de tudo.
   Mesma imagem e enquadramento que o Elementor já usa (cover, centrado). */
.elementor-element.elementor-element-08ecdc8 {
  background-image: url(/wp-content/uploads/2026/06/325_01_Exterior_r5_b1.jpg) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* §45i) MENU MÓVEL PRÓPRIO (.trc-menu) — overlay aberto pelo .trc-burger.
   Construído por JS a partir do menu real do WP (ver offcanvas-escape.js).
   Igual em todas as páginas; substitui os dois offcanvas partidos do tema.
   Transições suaves (≥0.4s) — navegação confortável. */
.trc-menu {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(235, 234, 228, 0.975); /* --trc-ivory */
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .42s ease, visibility .42s ease;
}
.trc-menu.open { opacity: 1; visibility: visible; }
@media (min-width: 992px) { .trc-menu { display: none !important; } }
.trc-menu__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 4.2vw, 26px); text-align: center;
  transform: translateY(8px); transition: transform .42s ease;
}
.trc-menu.open .trc-menu__inner { transform: translateY(0); }
.trc-menu__link {
  font-family: 'Bai Jamjuree', sans-serif;
  font-size: clamp(26px, 7.6vw, 40px); font-weight: 500; line-height: 1.05;
  letter-spacing: .005em; color: var(--trc-ink, #2E2D2D); text-decoration: none;
  padding: 4px 8px; transition: color .3s ease, opacity .3s ease;
}
.trc-menu__link:hover { color: var(--trc-oatmeal, #A09889); }
.trc-menu__link.is-current { color: var(--trc-oatmeal, #A09889); }
/* trava de scroll do body com o menu aberto */
html.trc-menu-lock, html.trc-menu-lock body { overflow: hidden !important; }

/* §45i-2) Botão fechar (✕) do overlay — no mesmo canto do hambúrguer. O menu
   abre por cima da barra, por isso o fecho vive no próprio overlay. */
.trc-menu__close {
  position: absolute; top: 18px; right: 16px; z-index: 2;
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.trc-menu__close span {
  position: absolute; width: 24px; height: 2px; border-radius: 2px;
  background: var(--trc-ink, #2E2D2D); transition: background-color .3s ease;
}
.trc-menu__close span:nth-child(1) { transform: rotate(45deg); }
.trc-menu__close span:nth-child(2) { transform: rotate(-45deg); }
.trc-menu__close:hover span { background: var(--trc-oatmeal, #A09889); }

/* §45j) Fallback flutuante: anima para X quando o menu está aberto. */
body > .trc-burger span { transition: transform .3s ease, opacity .3s ease; }
body > .trc-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body > .trc-burger.is-open span:nth-child(2) { opacity: 0; }
body > .trc-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* §45k) SERVIÇOS — galeria "projects-2" (efeito scroll-pin): no desktop é uma
   grelha de 2 colunas (painel de imagem fixado à esquerda + lista à direita).
   No telemóvel o pin não corre → o painel .projects-2__media colapsa a height:0
   mas os .thumb (position:absolute, 844px) transbordam e TAPAM o texto dos
   serviços/fases. O painel de imagem é um efeito só-desktop: esconder no
   telemóvel; a lista (.projects-2__wrapper) já tem títulos, fases e "Ver
   serviço" completos. */
@media (max-width: 991.98px) {
  .projects-2__media { display: none !important; }
}

/* §45l) CONTACTO — mapa Google do atelier (injetado por JS em offcanvas-escape).
   Full-bleed ENTRE o botão Enviar e "Onde estamos:", com afastamento equilibrado
   (margem igual em cima e em baixo). Tom SAND via filtro (dessatura + aquece para
   casar com Ivory/Oatmeal; tira o azul/verde do mapa default). */
.trc-map {
  max-width: 1650px;
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(32px, 5vw, 56px);
  margin-bottom: clamp(32px, 5vw, 56px);
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
.trc-map__frame {
  display: block; width: 100%; height: 460px; border: 0;
  filter: grayscale(1) sepia(0.42) saturate(0.9) brightness(1.04) contrast(0.9);
}
@media (max-width: 991.98px) {
  .trc-map { margin-top: 22px; }
  .trc-map__frame { height: 320px; }
}

/* §52) PROJECTOS — imagem de apresentação (widget archidex_parallax_image) alinhada
   com a galeria abaixo. O frame .expertise__media não tem max-width (full-bleed por
   design — é assim que a home o usa), ao passo que a galeria vive dentro de
   .container.rr-container-1650 (max-width 1650 + 15px de gutter Bootstrap por lado).
   Aqui replicamos esse mesmo container no .expertise__media SÓ nas páginas de projecto
   (filhas de /projectos/ → body.parent-pageid-113), para a imagem de apresentação
   ficar com a largura do conjunto abaixo. A home (sem .parent-pageid-113) fica intacta.
   Correcção na fonte: uma regra, todos os projectos, sem editar página a página. */
.parent-pageid-113 .elementor-widget-archidex_parallax_image .expertise__media {
  max-width: 1650px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}


/* 53) HOME slider mobile — "Ver projecto" mais abaixo (no mobile as setas estao escondidas, o botao deixava de ter referencia e ficava alto). */
@media (max-width: 991px){
  .portfolio__item .content a.show {
    position: static !important;
    bottom: auto !important;
    top: auto !important;
    margin-top: 28px !important;
  }
}


/* §54) RGPD — checkbox de consentimento nos formulários CF7 (.trc-consent).
   Wrapper neutro: NÃO usar .contact-formfield (o tema estica qualquer input
   a 100% com border-bottom — deformava a checkbox). Serve o form de contacto
   e, a seguir, FAQ/subscrever. */
.trc-consent{margin-top:32px;font-size:15px;line-height:1.5;color:var(--primary)}
.trc-consent .wpcf7-list-item{margin:0}
.trc-consent input[type="checkbox"]{width:15px;height:15px;accent-color:var(--primary);margin-right:10px;vertical-align:-2px;cursor:pointer}
.trc-consent a{text-decoration:underline;color:inherit}
.trc-consent .wpcf7-not-valid-tip{display:block;margin-top:6px}

/* §54b) RGPD consent em contextos compactos (footer subscribe / newsletter). */
.archidex-footer-subscribe-3 .trc-consent,.newsletter-7__form .trc-consent{margin-top:14px;font-size:13px}