/* Licensed under Spatial Sites key SS-102-SV7SGJ. Redistribution prohibited. https://spatialsites.co/licence */
/* Quantum-GI. Papel creme e um fundo verde-escuro, o verde da marca para a palavra que conta em cada título e para
   a chamada à ação, o cinzento da marca nos textos de apoio. Tipografia Instrument Serif (títulos, com o itálico
   para a ênfase), Instrument Sans (texto) e Plex Mono (etiquetas). A página abre com o livro fechado sobre a mesa. */

/* Fold. Cream paper and a deep forest ground, ochre for the word that matters in each headline, and one accent: the
   forest green of the book's cloth, for the call to action. Type is Instrument Serif, soft and bookish, its italic
   for emphasis, Instrument Sans for text and Plex Mono for labels. The page opens on the book closed on the table. */

@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --paper: #f1eee4;
  --paper-2: #e6e2d4;
  --ink: #222a29;
  --muted: #59625f;
  --line: rgba(34, 42, 41, 0.15);
  --dark: #1c2925;
  --dark-2: #25362f;
  --cream: #f4f1e8;
  --muted-light: #a9b5af;
  --dark-line: rgba(244, 241, 232, 0.16);
  --gold: #86caa6;
  --ochre: #1f6f54;
  --accent: #1f6f54;
  --accent-hi: #2a8a67;
  --accent-light: #86caa6;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-hero: clamp(3.2rem, min(6.8vw, 12svh), 7.8rem);
  --t-h2: clamp(2.6rem, 5vw, 5.6rem);
  --t-h3: clamp(1.5rem, 2vw, 2rem);
  --t-lede: 1.1875rem;
  --t-small: 0.9375rem;
  --t-label: 0.75rem;
  --margin: clamp(16px, 4.2vw, 72px);
  --gutter: clamp(16px, 2vw, 32px);
  --bar: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar); }
html, body { overflow-x: hidden; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-small)/1.55 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
img, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
a { color: inherit; }
em { font-style: italic; color: var(--ochre); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 70; padding: 10px 14px; background: var(--ink); color: var(--cream); text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }

.wrap { padding: 0 var(--margin); }
.ground-paper { background: var(--paper); color: var(--ink); }
.ground-dark { background: var(--dark); color: var(--cream); }
.ground-dark em { color: var(--gold); }
.ground-end { background: #e9e6d8 url("img/endpaper.webp") 0 0 / 360px auto; color: var(--ink); }

/* Type */
.label, .kicker, .index, .step-n { font: 500 var(--t-label)/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.kicker { margin: 0 0 20px; color: var(--muted); }
.index { display: flex; gap: 0.9em; align-items: baseline; margin: 0 0 1.4rem; color: var(--muted); }
.index span, .kicker-n { color: var(--accent); }
.ground-dark .index { color: var(--muted-light); }
.ground-dark .index span { color: var(--accent-light); }
.hero-h, .h2, .beat-h, .step-t, .door-t, .service-t, .foot-mark { font-family: var(--display); font-weight: 400; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.hero-h { font-size: var(--t-hero); line-height: 0.92; }
.hero-h em, .beat-h em { display: block; }
.h2 { font-size: var(--t-h2); line-height: 0.92; max-width: 14ch; }
.lede { font-size: var(--t-lede); line-height: 1.5; max-width: 46ch; margin: 1.4rem 0 0; color: var(--muted); text-wrap: pretty; }
.ground-dark .lede { color: var(--muted-light); }
.chapter-head { padding-top: clamp(120px, 18vh, 220px); margin-bottom: clamp(48px, 8vh, 96px); }

.line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.line > span { display: inline-block; transform: translateY(105%); transition: transform 0.9s var(--out); transition-delay: calc(var(--i, 0) * 80ms); }
.is-in .line > span { transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--out), transform 0.8s var(--out); transition-delay: 160ms; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Links and buttons */
.link { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--out); padding-bottom: 2px; }
.link:hover { background-size: 100% 1px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 3px; text-decoration: none; font: 600 var(--t-small)/1 var(--text); letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--out); }
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-hi); }
.btn-line { background: rgba(244, 241, 232, 0.72); border-color: var(--ink); color: var(--ink); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-line:hover { background: var(--ink); color: var(--cream); }
.btn:disabled { opacity: 0.5; cursor: progress; }

/* The bar */
.bar { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--bar); display: flex; align-items: center; gap: 32px; padding: 0 var(--margin); color: var(--ink); transition: background-color 0.4s, box-shadow 0.4s, color 0.4s; }
.bar.is-solid { background: rgba(241, 238, 228, 0.94); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.film-night .bar:not(.is-solid):not(.is-dark) { color: var(--cream); }
.film-night .bar:not(.is-solid):not(.is-dark) .btn-accent { background: var(--gold); color: var(--ink); }
.bar.is-dark { background: rgba(28, 41, 37, 0.94); color: var(--cream); box-shadow: 0 1px 0 var(--dark-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mark { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; text-decoration: none; margin-right: auto; }
.mark-sym { width: 38px; height: 38px; flex: none; }
.lg-ring { stroke: #9ca3af; }
.lg-g1 { fill: #1d5a42; }
.lg-g2 { fill: #2e8b65; }
.lg-gr { fill: #6b7280; }
.lg-node { fill: #2e8b65; }
.lg-win { fill: #f4f5f0; }
.lg-base { fill: #6b7280; opacity: 0.6; }
.bar.is-dark .lg-ring, .film-night .bar:not(.is-solid):not(.is-dark) .lg-ring { stroke: #b4bcc3; }
.bar.is-dark .lg-g1, .film-night .bar:not(.is-solid):not(.is-dark) .lg-g1 { fill: #7cc4a0; }
.bar.is-dark .lg-g2, .film-night .bar:not(.is-solid):not(.is-dark) .lg-g2 { fill: #a8dcc2; }
.bar.is-dark .lg-gr, .film-night .bar:not(.is-solid):not(.is-dark) .lg-gr { fill: #c6ccd1; }
.bar.is-dark .lg-node, .film-night .bar:not(.is-solid):not(.is-dark) .lg-node { fill: #7cc4a0; }
.bar.is-dark .lg-win, .film-night .bar:not(.is-solid):not(.is-dark) .lg-win { fill: #1c2925; }
.bar.is-dark .lg-base, .film-night .bar:not(.is-solid):not(.is-dark) .lg-base { fill: #c6ccd1; }
/* O lettering do logotipo, tal como foi desenhado (assets/img/marca). A proporcao 1105/172 e a do ficheiro:
   mudar de imagem sem acertar este racio deforma a marca. A versao clara entra nos fundos escuros. */
.mark-name { height: 23px; aspect-ratio: 1105 / 172; flex: none; background: url("img/marca/wordmark-fundo-claro.png") center / contain no-repeat; }
.bar.is-dark .mark-name, .film-night .bar:not(.is-solid):not(.is-dark) .mark-name { background-image: url("img/marca/wordmark-fundo-escuro.png"); }
.nav { display: flex; gap: 28px; font-size: var(--t-small); }
.bar-cta { min-height: 44px; padding: 0 18px; }

/* The book: one stage held while the page scrolls, the book on a table under a faint print of the endpaper. */
.film { position: relative; height: 1000vh; background: #e9e6d9; }
.film-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; overflow: clip; background: radial-gradient(ellipse 70% 70% at 62% 55%, #f0eee3 0%, #e4e1d1 70%, #d6d3c0 100%); }
.film-stage::before { content: ""; position: absolute; inset: 0; background: url("img/endpaper.webp") 0 0 / 300px auto; opacity: 0.16; mix-blend-mode: multiply; transition: opacity 1.2s; }
.film-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 70% at 62% 55%, #1a2438 0%, #0c1220 80%); opacity: 0; transition: opacity 0.8s; }
.film-stage.is-night::after { opacity: 0.86; }
.film-still, .film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-canvas { z-index: 1; }
.js .film-canvas { opacity: 0; transition: opacity 0.5s; }
.film-stage.is-ready .film-canvas { opacity: 1; }
.film-stage.is-ready .film-still { opacity: 0; transition: opacity 0.5s 0.3s; }
.film-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(233, 230, 217, 0.7) 0%, rgba(233, 230, 217, 0.35) 30%, rgba(233, 230, 217, 0) 44%); transition: opacity 0.8s; }
.film-stage.is-night .film-shade { opacity: 0; }
.beat { position: absolute; z-index: 3; left: var(--margin); top: 50%; translate: 0 -50%; width: min(34vw, 520px); }
.js .beat { opacity: 0; transform: translateY(18px); visibility: hidden; transition: opacity 0.6s var(--out), transform 0.8s var(--out), visibility 0s 0.6s; }
.js .beat.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity 0.6s var(--out), transform 0.8s var(--out), visibility 0s; }
.hero-lead, .beat-p { font-size: var(--t-lede); line-height: 1.5; color: var(--muted); margin: 22px 0 0; max-width: 32ch; text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.beat-h { font-size: clamp(2.6rem, min(5.2vw, 10svh), 5.8rem); line-height: 0.95; }
.beat-night .kicker, .beat-night .beat-p { color: #c9cfc0; }
.beat-night .beat-h { color: var(--cream); }
.beat-night .beat-h em, .beat-night .kicker-n { color: var(--gold); }
.beat-night .btn-accent { background: var(--gold); color: var(--ink); }
.rail { position: absolute; left: var(--margin); bottom: clamp(18px, 4vh, 40px); z-index: 3; list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; font: 500 var(--t-label)/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: color 0.8s; }
.rail li { position: relative; padding-top: 14px; transition: color 0.4s; }
.rail li::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color 0.4s; }
.rail li.is-on { color: var(--ink); }
.rail li.is-on::before { background: var(--ochre); border-color: var(--ochre); }
.rail li.is-done::before { background: currentColor; }
.film-stage.is-night .rail { color: #9aa49a; }
.film-stage.is-night .rail li.is-on { color: var(--cream); }
.cue { position: absolute; left: 50%; bottom: calc(clamp(18px, 4vh, 40px) + 50px); translate: -50% 0; margin: 0; z-index: 3; font: 500 var(--t-label)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); transition: opacity 0.4s; }
.cue.is-off { opacity: 0; }
html:not(.js) .beat:not(.beat-intro), html:not(.js) .rail, html:not(.js) .cue, html:not(.js) .film-canvas { display: none; }
html:not(.js) .film { height: auto; }
.film.is-flat .film-canvas, .film.is-flat .rail, .film.is-flat .cue { display: none; }

/* 01 Serviços: o prédio em camadas de papel, a inclinar com o rato. */
.services { padding: clamp(120px, 18vh, 220px) 0; }
.services-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.diorama { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; box-shadow: inset 0 0 0 12px var(--paper), 0 30px 60px -36px rgba(28, 41, 37, 0.55); background: #d5d9cf; }
.diorama .layer, .ending-scene .layer { position: absolute; left: -3%; bottom: -1%; width: 106%; height: 102%; object-fit: cover; will-change: transform; }
.diorama .layer-piece, .ending-scene .layer-piece { height: calc((1 - var(--top)) * 102%); object-fit: fill; filter: drop-shadow(0 -2px 6px rgba(20, 30, 26, 0.28)); }
.service-list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 0; }
.service-list li { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--line); }
.service-t { font-size: var(--t-h3); line-height: 1; }
.service-p { color: var(--muted); max-width: 46ch; }

/* 02 Como trabalhamos */
.method { padding-bottom: clamp(100px, 14vh, 180px); }
.method-head .h2 { background: var(--paper); display: inline-block; padding: 0.1em 0.25em 0.15em; margin-left: -0.25em; box-shadow: 0 10px 30px -20px rgba(28, 41, 37, 0.4); }
.method-head .index { display: flex; width: fit-content; background: var(--paper); padding: 6px 10px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.step { background: var(--paper); padding: 26px 24px 30px; border-radius: 3px; box-shadow: 0 16px 40px -28px rgba(28, 41, 37, 0.45); }
.step-n { display: inline-block; margin-bottom: 20px; color: var(--ochre); }
.step-t { font-size: var(--t-h3); line-height: 1.02; }
.step p { color: var(--muted); margin: 12px 0 0; max-width: 32ch; }

/* Campos e botões sobre fundo escuro (portal e contacto) */
.field { display: grid; gap: 8px; }
.field .label { color: var(--muted-light); }
.field input { min-height: 48px; padding: 10px 0; border: 0; border-bottom: 1.5px solid var(--dark-line); background: transparent; color: var(--cream); border-radius: 0; color-scheme: dark; }
.field input::placeholder { color: rgba(244, 241, 232, 0.38); }
.field input:focus { outline: none; border-color: var(--gold); }
.ground-dark .btn-accent { background: var(--gold); color: var(--ink); }
.ground-dark .btn-accent:hover { background: #a3dbbf; }

/* 03 Portal: duas entradas na aplicação de gestão de condomínios */
.portal { padding-bottom: clamp(120px, 18vh, 220px); }
.portal-head { margin-bottom: clamp(36px, 6vh, 72px); }
.portal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.door { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 44px); border: 1px solid var(--dark-line); border-radius: 4px; background: var(--dark-2); }
.door .label { color: var(--accent-light); margin: 0 0 18px; }
.door-t { font-size: clamp(1.9rem, 2.8vw, 2.7rem); line-height: 1; margin: 0 0 16px; }
.door p { color: var(--muted-light); max-width: 46ch; margin: 0; }
.door-list { list-style: none; margin: 22px 0 28px; padding: 0; width: 100%; }
.door-list li { padding: 11px 0; border-top: 1px solid var(--dark-line); color: var(--cream); }
.door > .btn { margin-top: auto; }
.door-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px var(--gutter); margin: 24px 0 0; width: 100%; }
.door-go { grid-column: 1 / -1; justify-self: start; }
.door .door-note { margin-top: 16px; font-size: 0.8125rem; }
.portal-state { margin: 28px 0 0; padding: 14px 18px; border: 1px dashed var(--dark-line); border-radius: 3px; color: var(--muted-light); max-width: 60ch; }
.portal-state[hidden] { display: none; }

/* 04 Software: o produto, separado dos serviços */
.software { padding: clamp(100px, 14vh, 180px) 0 clamp(120px, 18vh, 220px); }
.software-head { padding-top: 0; }
.soft-steps { grid-template-columns: repeat(3, 1fr); }
.software .step { border: 1px solid var(--line); }
.soft-cta { margin: 40px 0 0; }
/* Selo "Em breve" na secção do software. Quando o produto abrir, tire-o do index.html. */
.soon { padding: 2px 9px 3px; border: 1px solid currentColor; border-radius: 999px; font-size: 0.85em; opacity: 0.8; }

/* 05 Contacto */
.contact { padding-bottom: clamp(120px, 18vh, 220px); }
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 0 clamp(32px, 6vw, 120px); align-items: start; }
.call { margin: 26px 0 0; font-size: var(--t-lede); }
.call[hidden], [data-phone][hidden], [data-email][hidden], [data-area][hidden] { display: none; }
.form { margin-top: clamp(120px, 18vh, 220px); }
.fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px var(--gutter); margin-top: 30px; }
.chips { border: 0; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; margin-bottom: 10px; color: var(--muted-light); }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--dark-line); border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.chips input:checked + span { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 34px; }
.send-msg { margin: 0; max-width: 40ch; color: var(--muted-light); }
.consent { margin: 20px 0 0; }

/* O final: o prédio à noite, em papel. */
.ending { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; overflow: clip; background: #141c2b; color: var(--cream); }
.ending-scene { position: absolute; inset: 0; }
.ending-scene .layer:first-child { object-position: 50% 30%; }
.ending-scene .layer-piece { left: 50%; width: max(106%, 150svh); translate: -50% 0; object-fit: fill; }
.ending-scene .layer-night { filter: brightness(0.42) saturate(0.75) hue-rotate(12deg) drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.4)); }
.ending::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 20, 32, 0.7) 0%, rgba(14, 20, 32, 0.2) 45%, rgba(14, 20, 32, 0) 60%); }
.ending-copy { position: absolute; left: var(--margin); top: 50%; translate: 0 -50%; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 32rem; }
.ending-h { color: var(--cream); }
.ending-h em { color: var(--gold); }
.ending .btn-accent { background: var(--gold); color: var(--ink); }

/* Footer */
.foot { padding: clamp(80px, 12vh, 140px) 0 48px; }
.foot-mark { font-size: clamp(3.6rem, 13.5vw, 14rem); line-height: 0.8; margin-bottom: clamp(48px, 8vh, 96px); }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px var(--gutter); }
.foot-cols .label { color: var(--muted-light); margin: 0 0 8px; }
/* Um email comprido nao tem espacos onde quebrar: sem isto, transborda para a coluna ao lado. */
.foot-cols p { margin: 0; overflow-wrap: anywhere; }
.fine { color: var(--muted-light); font-size: 0.8125rem; max-width: 34ch; }
/* Rodapé legal: identificação da sociedade e as ligações obrigatórias. */
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px var(--gutter); margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--dark-line); }
.foot-legal .fine { max-width: 60ch; margin: 0; }
.legal-id strong { font-weight: 600; color: var(--cream); }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

@media (max-width: 900px) {
  .nav { display: none; }
  .film-shade { background: linear-gradient(0deg, rgba(233, 230, 217, 0.96) 0%, rgba(233, 230, 217, 0.86) 34%, rgba(233, 230, 217, 0) 52%); }
  .film-stage.is-night .film-shade { opacity: 1; background: linear-gradient(0deg, rgba(13, 20, 32, 0.92) 0%, rgba(13, 20, 32, 0.75) 34%, rgba(13, 20, 32, 0) 52%); }
  .beat { left: var(--margin); right: var(--margin); width: auto; top: auto; bottom: 40px; translate: none; }
  .hero-lead, .beat-p { font-size: 1.0625rem; margin-top: 14px; }
  .hero-ctas { margin-top: 20px; }
  .rail, .cue { display: none; }
  .services-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .soft-steps { grid-template-columns: 1fr; }
  .portal-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .form { margin-top: 0; }
  .fields { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .ending-copy { top: auto; bottom: 48px; translate: none; right: var(--margin); }
  .ending::after { background: linear-gradient(0deg, rgba(14, 20, 32, 0.85) 0%, rgba(14, 20, 32, 0.2) 50%, rgba(14, 20, 32, 0) 70%); }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .door-form { grid-template-columns: 1fr; }
}
@media (max-height: 700px) and (max-width: 900px) {
  .hero-lead { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .line > span, .js [data-reveal] { transition: none; transform: none; opacity: 1; }
}
.is-seeking .beat, .is-seeking .cue, .is-seeking .rail, .is-seeking .rail li, .is-seeking .rail li::before, .is-seeking .film-stage::after, .is-seeking .film-shade { transition: none !important; }

/* Ligação à aplicação suspensa (APP.enabled = false em data.js): o que depende do portal não aparece. */
.app-off [data-app-only], html:not(.app-off) [data-app-off] { display: none !important; }