/* SIBERTEX — public landing (Home only).
 * The Power Admin pack is a BACKOFFICE theme: it has no editorial/landing components, so the commercial
 * home page gets its own layer. Loaded ONLY by Views/Home/Index.cshtml — it never touches the backoffice.
 *
 * LIGHT ONLY (ratified 2026-07-24). The public site had been dark-only; the client wants light, and one
 * excellent theme rather than two average ones. There is no dark variant here on purpose — not even a
 * disabled one — so nothing can drift back in.
 *
 * The palette below is the whole visual system: surfaces, ink, line, accent and elevation. Everything else
 * in this file resolves through it, so the site keeps one voice and a change is made in one place.
 */

/* The landing is full-bleed: the pack's admin content padding would box it in. Safe to reset here because
 * this stylesheet is loaded ONLY by the Home view. */
.main-content { padding: 0; }

/* ── The system ───────────────────────────────────────────────────────────────
   SURFACES step, they do not alternate: page → raised → sunken. Sections separate by rhythm and by a hairline,
   never by slabs of competing colour, which is what makes a page read as assembled from parts.
   INK is near-black rather than pure black (#0b0d10 on white is comfortable; #000 is glare) and steps down in
   three weights only — anything more and hierarchy stops being legible.
   ELEVATION is two soft, low-contrast shadows: premium light UI uses shadow to lift by a millimetre, not to
   draw a box. */
.lp {
  --lp-bg: #ffffff;
  --lp-bg-raised: #ffffff;
  --lp-bg-sunken: #f7f8fa;
  --lp-bg-accent-wash: color-mix(in srgb, var(--accent-color), #ffffff 94%);

  --lp-ink: #0b0d10;
  --lp-ink-soft: #4a5159;
  --lp-ink-faint: #737c86;
  --lp-line: #e6e9ee;
  --lp-line-strong: #d3d8e0;

  /* On the accent, ink is white: the brand orange is mid-tone, so dark ink on it fails contrast. */
  --lp-on-accent: #ffffff;

  --lp-shadow-sm: 0 1px 2px rgba(11, 13, 16, .04), 0 1px 3px rgba(11, 13, 16, .06);
  --lp-shadow-md: 0 2px 4px rgba(11, 13, 16, .04), 0 8px 24px rgba(11, 13, 16, .07);
  --lp-shadow-lg: 0 4px 8px rgba(11, 13, 16, .04), 0 24px 56px rgba(11, 13, 16, .10);

  --lp-radius: 14px;
  --lp-radius-lg: 22px;

  /* Display face for the landing headings and figures. Share Tech has ONE weight (400) — never ask for bold
     on it or the browser synthesises a smeared fake. The condensed look comes from tracking + leading. */
  --lp-serif: "Share Tech", "Plus Jakarta Sans", system-ui, sans-serif;

  background: var(--lp-bg);
  color: var(--lp-ink);
}

.lp section {
  padding-block: clamp(5rem, 11vh, 9rem);
  position: relative;
}

/* FULL WIDTH. The page occupies the display; it is not a column parked in the middle of it. A capped measure
   reads as a document on a wide screen — the "funnel" — while a full-bleed layout with a real margin reads as a
   product. The margin is viewport-relative so it scales instead of stranding the content at the edges, and it
   stops growing on very wide displays so the gutter never becomes the composition.

   Line length is protected where it matters — on the text itself (.lp-fold-lead, .lp-lead, paragraphs) — rather
   than by squeezing the whole page. That is the difference between a readable measure and a narrow site. */
.lp .lp-wrap {
  width: 100%;
  margin-inline: 0;
  padding-inline: clamp(1.25rem, 5vw, 6rem);
}

/* Section kicker: "— 01 · SERVIÇOS" */
.lp-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lp-ink-faint);
  margin-bottom: 1.75rem;
}

.lp-kicker::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--lp-line);
}

.lp-kicker .lp-num {
  color: var(--accent-color);
  font-variant-numeric: tabular-nums;
}

/* Display headings — the editorial voice */
/* Share Tech: single weight, so the impact comes from size + tight tracking + tight leading, not from bold. */
.lp-display {
  font-family: var(--lp-serif);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--lp-ink);
  margin: 0;
  text-wrap: balance;
}

.lp-display em {
  font-style: normal;
  color: var(--accent-color);
}

.lp-h1 { font-size: clamp(2.6rem, 7vw, 5.75rem); }
.lp-h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); }

/* O subtítulo de secção. O `margin-top` NÃO É DECORAÇÃO: o `.lp-display` acima traz `margin: 0` e
 * `line-height: .98`, e o reboot do pack põe `p { margin-top: 0 }` — sem esta regra o texto encosta aos
 * descendentes do título. Estava repetida secção a secção (`.lp-how`, `.lp-why`, `.lp-svcs`, `.lp-gal`,
 * `.lp-svcp-hero`) e por isso FALTOU na Calculadora, nas Perguntas frequentes e nos Contactos — foi o que
 * o cliente apontou a 14/09 («falta um espaço aqui, entre um e o outro»). Fica uma vez, na base. */
.lp-lead {
  color: var(--lp-ink-soft);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 44ch;
  margin-top: 1.5rem;
}

/* Two-column section: heading on the left, content on the right — and the heading PINS while the content
 * scrolls past it.
 *
 * This is a CSS GRID on purpose. Bootstrap's .row is flex, and flex items stretch to the row's full height by
 * default: an element that is already as tall as its parent has nowhere to travel, so `position: sticky` does
 * absolutely nothing. That is why pinning never worked while these sections used .row/.col.
 * (The other half of the fix is in public.css: the pack's `html { overflow-x: hidden }` turns <html> into a
 * scroll container, which kills sticky page-wide.) */
.lp-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 992px) {
  .lp-two {
    grid-template-columns: 1fr 1.5fr;
    gap: 4.5rem;
  }

  /* The calculator needs real estate: it carries three groups of options plus the result rail. A narrow
     column squeezed the service buttons until the words broke apart. */
  .lp-two-wide {
    grid-template-columns: 0.8fr 2.4fr;
    gap: 3.5rem;
  }

  .lp-pin {
    position: sticky;
    top: 120px;
    align-self: start;   /* without this the grid item stretches and, again, has nowhere to stick */
  }
}

/* ── Motion primitives ────────────────────────────────────────────────────── */

/* Reveal: content lifts in. Delay helpers stagger a group. */
.rev {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s cubic-bezier(.2, .65, .3, 1), transform 1.1s cubic-bezier(.2, .65, .3, 1);
}

.rev.in { opacity: 1; transform: none; }

.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }

/* Headline mask reveal — the type is wiped in from behind a clipping edge. */
.mask {
  clip-path: inset(0 0 102% 0);
  transform: translateY(14px);
  transition: clip-path 1.3s cubic-bezier(.16, 1, .3, 1), transform 1.3s cubic-bezier(.16, 1, .3, 1);
}

.mask.in { clip-path: inset(-8% -6% -8% -6%); transform: none; }

/* Magnetic: the button leans toward the cursor (offset applied in JS). */
.mag { transition: transform .3s cubic-bezier(.2, .7, .3, 1); }

/* Film grain over the whole page — an SVG noise data-URI, so no image request. On a dark page grain reads as
   texture; over white it reads as dirt on the screen, so it is dialled back to the edge of perception and does
   nothing but take the flatness off large empty areas. */
.lp-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.012;
  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='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.lp-hero {
  min-height: min(88vh, 880px);   /* the shell already reserves the fixed header's 74px */
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* The warehouse grid (drawn in home-fx.js): storage cells, a few occupied and breathing in the accent, with
 * a slow light sweep crossing them. Masked so it dissolves behind the headline instead of fighting it. */
/* Masked to the hero's LOWER HALF across the full width — it fills the leftover under the photo band AND
   under the copy column (the left had a hole), rising into view and gone before the headline. */
.lp-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 74%);
  mask-image: linear-gradient(180deg, transparent 40%, #000 74%);
}

/* Light behind the type. On the dark site this was a black bloom that darkened the corner the headline sat in;
   over white that reads as a smudge. Inverted: the headline side lifts to plain white and the far corner carries
   the faintest wash of brand warmth, so the hero has depth without the page looking soiled. */
.lp-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 8% 40%, #ffffff, rgba(255, 255, 255, 0) 72%),
    radial-gradient(48% 58% at 84% 18%, color-mix(in srgb, var(--accent-color), transparent 92%), transparent 74%),
    linear-gradient(180deg, var(--lp-bg-sunken), var(--lp-bg) 62%);
}

.lp-hero .lp-wrap { position: relative; z-index: 2; }

.lp-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  list-style: none;
  padding: 2.5rem 0 0;
  margin: 3rem 0 0;
  border-top: 1px solid var(--lp-line);
}

.lp-hero-badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-ink-faint);
}

.lp-hero-badges i { color: var(--accent-color); font-size: 1rem; }

.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* Buttons — quiet, editorial */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--lp-line);
  color: var(--lp-ink);
  background: var(--lp-bg-sunken);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.lp-btn:hover {
  transform: translateY(-2px);
  background: var(--lp-bg-accent-wash);
  border-color: rgba(244, 244, 245, 0.28);
  color: var(--lp-ink);
}

.lp-btn-accent {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--lp-on-accent);
  font-weight: 600;
}

.lp-btn-accent:hover {
  background: var(--accent-color);
  color: var(--lp-on-accent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent-color), transparent 68%);
}

.lp-btn-ghost {
  border-color: transparent;
  background: transparent;
  padding-inline: 0.25rem;
}

.lp-btn-ghost:hover {
  background: transparent;
  transform: translateX(3px);
}

/* Scroll cue */
.lp-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  translate: -50% 0;
  color: var(--lp-ink-faint);
  font-size: 1.25rem;
  animation: lp-bob 2.2s ease-in-out infinite;
}

@keyframes lp-bob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* ── The facility: black & white marquee ──────────────────────────────────── */

.lp-marquee {
  margin-top: 2.5rem;
  overflow: hidden;
  /* Fade the edges so the strip drifts in and out instead of being chopped by the viewport. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lp-marquee-track {
  display: flex;
  width: max-content;
  animation: lp-marq 55s linear infinite;
}

/* Pause on hover so a photo can actually be looked at. */
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }

.lp-marquee-set {
  display: flex;
  gap: 1rem;
  padding-right: 1rem;   /* keeps the gap across the seam between the two halves */
}

@keyframes lp-marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.lp-shot {
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 340px);
  margin: 0;
  border-radius: 14px;
  border: 1px solid var(--lp-line);
  overflow: hidden;
  line-height: 0;
}

/* Black & white at rest, alive (colour + light) on hover. Unlike the map the photos are NOT inverted:
 * inversion turns a diagram into a dark plate, but a photograph into a film negative.
 *
 * The selector is `.lp .lp-shot img`, NOT `.lp-shot img`, and that is not cosmetic. The pack ships
 *     [data-theme=dark] img:not([src*=".svg"]) { filter: brightness(0.92); }
 * which filters EVERY image in dark mode and outranks a single class — so a plain `.lp-shot img` rule is
 * silently overridden and the photos stay in colour. The extra `.lp` matches its specificity, and this file
 * loads after the pack, so it wins. Never drop it. */
.lp .lp-shot img {
  display: block;
  width: 100%;
  height: clamp(165px, 19.5vw, 255px);
  object-fit: cover;
  filter: grayscale(1) contrast(0.9) brightness(0.8);
  opacity: 0.8;
  transition: filter .5s ease, opacity .5s ease, transform .5s ease;
}

.lp .lp-shot:hover img {
  filter: grayscale(0) contrast(1) brightness(1);
  opacity: 1;
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .lp-marquee-track { animation: none; }
  .lp-shot img { transition: none; }
  /* With the animation off the strip would sit frozen at the start, so let it be scrolled by hand. */
  .lp-marquee { overflow-x: auto; }
}

/* Cards inside the right column of a .lp-two — they must live INSIDE the grid, otherwise the pinned column
 * has nothing tall beside it and sticky has nowhere to travel. */
.lp-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 576px) {
  .lp-cards { grid-template-columns: repeat(2, 1fr); }
}


/* Steps (02) — a vertical list inside the right column, so the heading beside it has something to pin against. */
.lp-steps { display: grid; gap: 1rem; }

.lp-step {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--lp-line);
  background: var(--lp-bg-raised);
  transition: border-color .35s ease, transform .35s ease;
}

.lp-step:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--accent-color), transparent 60%); }
.lp-step h3 { font-size: 1rem; font-weight: 600; color: var(--lp-ink); margin-bottom: .35rem; }
.lp-step p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--lp-ink-soft); }

/* Second marquee row runs the other way. */
.lp-marquee + .lp-marquee { margin-top: 1rem; }
.lp-marquee-rev .lp-marquee-track { animation-direction: reverse; animation-duration: 65s; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.lp-card {
  position: relative;
  height: 100%;
  padding: 2rem;
  border-radius: 18px;
  border: 1px solid var(--lp-line);
  background: var(--lp-bg-raised);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
}

.lp-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent-color), transparent 55%);
  box-shadow: var(--lp-shadow-md);
}

/* Accent hairline that draws in on hover */
.lp-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--accent-color);
  transition: width 0.45s ease;
}

.lp-card:hover::after { width: 100%; }

.lp-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
}

.lp-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--lp-ink);
  margin-bottom: 0.6rem;
}

.lp-card p {
  color: var(--lp-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

.lp-card-tag {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--lp-ink-faint);
}

/* Numbered step */
.lp-step-n {
  font-family: var(--lp-serif);
  font-size: 2.25rem;
  line-height: 1;
  color: color-mix(in srgb, var(--accent-color), transparent 45%);
  margin-bottom: 1rem;
}

/* ── Stats (counters) ─────────────────────────────────────────────────────── */
.lp-stat {
  padding: 1.5rem 0;
  border-top: 1px solid var(--lp-line);
}

.lp-stat-v {
  letter-spacing: -0.04em;
  font-weight: 400;
  font-family: var(--lp-serif);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1;
  color: var(--lp-ink);
  font-variant-numeric: tabular-nums;
}

.lp-stat-l {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-ink-faint);
}

/* ── Pricing ──────────────────────────────────────────────────────────────── */
.lp-price {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.25rem;
  border-radius: 20px;
  border: 1px solid var(--lp-line);
  background: var(--lp-bg-raised);
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.lp-price:hover { transform: translateY(-6px); }

.lp-price-featured {
  border-color: color-mix(in srgb, var(--accent-color), transparent 55%);
  box-shadow: var(--lp-shadow-lg);
}

.lp-price-flag {
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 86%);
  margin-bottom: 1.25rem;
}

.lp-price h3 {
  font-family: var(--lp-serif);
  font-size: 1.75rem;
  color: var(--lp-ink);
  margin-bottom: 0.35rem;
}

.lp-price-tag {
  color: var(--lp-ink-faint);
  font-size: 0.875rem;
  margin-bottom: 1.75rem;
}

.lp-price-amt {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--lp-line);
  margin-bottom: 1.5rem;
}

.lp-price-amt b {
  letter-spacing: -0.04em;
  font-weight: 600;
  font-family: var(--lp-serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 4.6vw, 3.75rem);
  line-height: 1;
  color: var(--lp-ink);
}

.lp-price-amt span { color: var(--lp-ink-faint); font-size: 0.9375rem; }

.lp-price ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  flex: 1;
}

.lp-price li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  color: var(--lp-ink-soft);
  font-size: 0.9375rem;
}

.lp-price li i { color: var(--accent-color); font-size: 0.875rem; margin-top: 0.25rem; }

.lp-price-note {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--lp-ink-faint);
}

/* ── Calculator (this IS the pricing section) ─────────────────────────────── */
.calc {
  border-radius: 24px;
  border: 1px solid var(--lp-line);
  background:
    radial-gradient(70% 110% at 100% 0%, color-mix(in srgb, var(--accent-color), transparent 90%), transparent 62%),
    var(--lp-bg-raised);
  overflow: hidden;
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .calc-grid { grid-template-columns: 1.15fr 1fr; }
}

.calc-panel { padding: clamp(1.75rem, 3vw, 2.75rem); }

.calc-field + .calc-field { margin-top: 2rem; }

.calc-label {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lp-ink-faint);
}

/* Segmented control. `flex-wrap` is the ONLY change from the original: without it the options ran off the
   screen on a phone. The look of the buttons is untouched. */
.calc-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calc-seg-wrap { flex-wrap: wrap; }
.calc-seg-2 .calc-opt { flex: 1; }

.calc-opt {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-width: 4.25rem;
  max-width: 100%;
  padding: 0.7rem 1.1rem;
  text-align: center;
  /* No overflow-wrap here: it broke "Armazenamento" mid-word ("Armazena / mento"). The button simply gets
     enough room instead — see .lp-two-wide, which gives the calculator a much wider column. */
  border-radius: 12px;
  border: 1px solid var(--lp-line);
  background: var(--lp-bg-sunken);
  color: var(--lp-ink-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}

.calc-opt small {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.calc-opt:hover {
  color: var(--lp-ink);
  border-color: rgba(244, 244, 245, 0.28);
  transform: translateY(-1px);
}

.calc-opt.is-on {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--lp-on-accent);
  font-weight: 600;
}

.calc-opt.is-on small { opacity: 0.75; }

.calc-opt-sq { min-width: 3rem; padding-inline: 0.75rem; }


/* Output rail */
.calc-out {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--lp-line);
  background: var(--lp-bg-sunken);
}

@media (min-width: 992px) {
  .calc-out { border-top: 0; border-left: 1px solid var(--lp-line); }
}

.calc-out-k {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lp-ink-faint);
}

.calc-val-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1.75rem;
}

.calc-val {
  letter-spacing: -0.04em;
  font-weight: 400;
  font-family: var(--lp-serif);
  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 1;
  color: var(--lp-ink);
  font-variant-numeric: tabular-nums;
}

.calc-per { color: var(--lp-ink-faint); font-size: 0.9375rem; }

.calc-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.calc-meta li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--lp-line);
  font-size: 0.875rem;
  color: var(--lp-ink-faint);
}

.calc-meta strong { color: var(--lp-ink); font-weight: 500; }

.calc-cta { justify-content: center; }

.calc-note {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--lp-ink-faint);
}


/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.lp-faq {
  padding: 1.6rem 0;
  border-top: 1px solid var(--lp-line);
}

.lp-faq h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--lp-ink);
  margin-bottom: 0.5rem;
}

.lp-faq p {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* ── Contact ──────────────────────────────────────────────────────────────── */
.lp-contact-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--lp-line);
  color: var(--lp-ink-soft);
}

.lp-contact-row i { color: var(--accent-color); font-size: 1.125rem; }
.lp-contact-row span { display: block; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-ink-faint); }
.lp-contact-row strong { font-weight: 500; color: var(--lp-ink); font-size: 0.9375rem; }

/* Map — black & white at rest, colour under the cursor. The invert() that made it a dark plate belonged to
 * the dark-only era; on the light page a plain grayscale map sits in the design, and inverting it would put
 * a black slab at the foot of a white page. */
.lp-map {
  border-radius: 16px;
  border: 1px solid var(--lp-line);
  overflow: hidden;
  line-height: 0;
}

.lp-map iframe {
  width: 100%;
  height: 260px;
  border: 0;
  filter: grayscale(1) contrast(0.98);
  opacity: 0.85;
  transition: opacity .4s ease, filter .4s ease;
}

.lp-map:hover iframe {
  opacity: 1;
  filter: none;
}

/* Closing the contact section: edge-to-edge, sitting right against the contacts (no section gap under it). */
.lp-map-wide {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-radius: 0;
  border-inline: 0;
  border-bottom: 0;
}

.lp-map-wide iframe { height: clamp(320px, 42vh, 460px); }

.lp .lp-map-wide + * { margin-top: 0; }

.lp-form .form-label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-ink-faint);
}

.lp-form .form-control {
  background-color: var(--lp-bg-sunken);
  border-color: var(--lp-line);
  color: var(--lp-ink);
  padding: 0.85rem 1rem;
  border-radius: 12px;
}

.lp-form .form-control:focus {
  background-color: var(--lp-bg-accent-wash);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--lp-ink);
}

.lp-form .form-control::placeholder { color: var(--lp-ink-faint); }

/* ── Closing CTA ──────────────────────────────────────────────────────────── */
.lp-cta {
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) 2rem;
  border-radius: 24px;
  border: 1px solid var(--lp-line);
  background:
    radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--accent-color), transparent 88%), transparent 70%),
    var(--lp-bg-raised);
}

/* ── Legal pages (terms, cookies, privacy) — same design as the landing ───── */
.lp-legal { padding-top: clamp(3rem, 8vh, 5rem); }

/* Two-column editorial grid: the title pins on the left (see .lp-pin) and the text fills the reading column,
 * so the page uses the real width on desktop instead of a thin ribbon. */
.lp-legal-body {
  color: var(--lp-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.8;
}

@media (max-width: 991.98px) {
  .lp-legal-body { margin-top: 2.5rem; }
}

.lp-legal-body h4 {
  margin: 2.75rem 0 0.85rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--lp-line);
  font-family: var(--lp-serif);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
}

.lp-legal-body h4:first-of-type { border-top: 0; padding-top: 0; }

.lp-legal-body p { margin-bottom: 1.1rem; }
.lp-legal-body ul { margin: 0 0 1.5rem; padding-left: 1.1rem; }
.lp-legal-body li { margin-bottom: 0.5rem; }
.lp-legal-body .text-muted { color: var(--lp-ink-faint) !important; }

.lp-legal-body a { color: var(--accent-color); text-decoration: none; }
.lp-legal-body a:hover { text-decoration: underline; }

/* Motion off for users who ask for it: nothing animates and — critically — everything that would have been
 * revealed is simply shown (home-fx.js never adds .in in that mode, so the CSS must not leave it hidden). */
@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; transition: none; }
  .mask { clip-path: none; transform: none; transition: none; }
  .lp-cue, .lp-aurora span { animation: none; }
  .lp-card, .lp-price, .lp-btn, .mag { transition: none; }
}

/* ── First fold ───────────────────────────────────────────────────────────────
   Composition, not decoration. The fold is one column on a wide measure, left-aligned, with the headline at
   real display scale — the previous one rendered around 34px in a full-width hero, which is why the page had
   "too much empty space": the space was fine, nothing in it was big enough to hold it.

   The vertical rhythm is a ladder: eyebrow → headline → one sentence → one action → evidence. Each step is
   deliberately a different weight and colour so hierarchy is readable at a glance rather than announced with
   boxes. Nothing here is a card: cards were doing the work type should do. */
.lp-fold {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 12vh, 8rem);
  overflow: hidden;
}

/* Light, weighted to the top-left where the type begins, with a whisper of brand warmth on the far side.
   A single soft field — no bands, no slabs — so the eye lands on the headline and nothing else. */
.lp-fold-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 60% at 6% 12%, #ffffff, rgba(255, 255, 255, 0) 70%),
    radial-gradient(46% 52% at 92% 8%, color-mix(in srgb, var(--accent-color), transparent 90%), transparent 72%),
    linear-gradient(180deg, var(--lp-bg-sunken), var(--lp-bg) 55%);
}

.lp-fold-inner { position: relative; z-index: 2; }

.lp-fold-eyebrow {
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lp-ink-faint);
  margin: 0 0 1.5rem;
}

/* The headline is the page. Share Tech has one weight, so presence comes from size, tight tracking and tight
   leading — never from bold, which the browser would fake and smear. */
.lp-fold-title {
  font-family: var(--lp-serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 6.4vw, 5.6rem);
  line-height: .96;
  letter-spacing: -.045em;
  color: var(--lp-ink);
  margin: 0;
  max-width: 17ch;
  text-wrap: balance;
}

/* One sentence, held to a readable measure. Longer lines are why body copy stops being read. */
.lp-fold-lead {
  margin: 1.75rem 0 0;
  max-width: 58ch;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--lp-ink-soft);
}

.lp-fold-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* One primary action, and it names the outcome ("see pricing for my case") rather than the mechanism. The
   arrow travels on hover — a small, cheap signal that the button leads somewhere. */
.lp-cta {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  background: var(--accent-color);
  color: var(--lp-on-accent);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(11, 13, 16, .06), 0 10px 24px color-mix(in srgb, var(--accent-color), transparent 74%);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}

.lp-cta:hover {
  color: var(--lp-on-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(11, 13, 16, .07), 0 16px 34px color-mix(in srgb, var(--accent-color), transparent 66%);
}

.lp-cta i { transition: transform .25s cubic-bezier(.2, .7, .3, 1); }
.lp-cta:hover i { transform: translateX(3px); }

/* The secondary route is a link, not a second button. Two buttons of equal weight is two first choices, which
   is no choice at all. */
.lp-cta-quiet {
  color: var(--lp-ink-soft);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--lp-line-strong);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}

.lp-cta-quiet:hover { color: var(--lp-ink); border-color: var(--lp-ink); }

/* Evidence sits in the fold because it is what a person weighs before leaving their goods with a stranger.
   Separated by a rule and set quietly: it has to be legible, not loud. */
.lp-proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  list-style: none;
  margin: clamp(3rem, 7vh, 4.5rem) 0 0;
  padding: clamp(2rem, 4vh, 2.75rem) 0 0;
  border-top: 1px solid var(--lp-line);
  max-width: 62rem;
}

@media (min-width: 768px) {
  .lp-proof { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

.lp-proof li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon key" ".    val";
  column-gap: .625rem;
  row-gap: .35rem;
  align-items: center;
}

.lp-proof i { grid-area: icon; color: var(--accent-color); font-size: 1.0625rem; }
.lp-proof-k { grid-area: key; font-weight: 600; font-size: .9375rem; color: var(--lp-ink); }
.lp-proof-v { grid-area: val; font-size: .875rem; line-height: 1.55; color: var(--lp-ink-faint); }

/* ── One measure ──────────────────────────────────────────────────────────────
   The fold sat on the landing measure while every section under it still used Bootstrap's .container, which
   tops out around 1320px and is centred on its own. Two measures stacked read as a funnel: the page narrows
   and widens as you scroll and never looks composed. The landing has ONE column width, and .container inside
   it resolves to that width instead of its own. */
.lp .container,
.lp .container-fluid {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(1.25rem, 5vw, 6rem);
}

/* ── Contrast band ────────────────────────────────────────────────────────────
   A light theme is not the same thing as a white page. Twelve white sections in a row have no climax: the eye
   never stops, and the moment that matters — where a visitor decides — looks like every other block.

   This band is the funnel's turn. It goes full-bleed and dark, so the page changes state under the reader, and
   the action on it is the only accent on screen. Used once, deliberately: a second one would cancel the first. */
.lp .lp-band {
  background: #0b0d10;
  color: #ffffff;
  padding-block: clamp(5.5rem, 12vh, 9rem);
}

.lp .lp-band .lp-band-inner {
  width: 100%;
  padding-inline: clamp(1.25rem, 5vw, 6rem);
  text-align: center;
}

.lp .lp-band h2 {
  font-family: var(--lp-serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  color: #ffffff;
  max-width: 20ch;
  margin-inline: auto;
}

/* Mesmo ritmo do resto da página: o subtítulo não encosta ao título (ver `.lp-lead`). Aqui o parágrafo
   não usa `.lp-lead`, por isso repete-se o valor — é o único sítio da landing onde isso acontece. */
.lp .lp-band p,
.lp .lp-band .text-muted {
  color: rgba(255, 255, 255, .66) !important;
  max-width: 52ch;
  margin-inline: auto;
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* The action is the only colour on a black field, which is the whole point of putting it here. */
.lp .lp-band .btn-primary,
.lp .lp-band .btn-lg {
  --bs-btn-bg: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-bg: var(--accent-color);
  --bs-btn-hover-border-color: var(--accent-color);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  border-radius: 999px;
  padding: .95rem 1.9rem;
  font-weight: 600;
}


/* ═══ HERO ════════════════════════════════════════════════════════════════════
   To the approved mock. The photograph is a full-height layer on the right that DISSOLVES into the page — no box,
   no hard edge, no shadow rectangle. That single technique (a mask gradient fading the left of the image to
   nothing) is the whole difference between "premium composition" and "image next to a div". The story column
   sits over the faded side; two product cards float on the photo; a raised trust card straddles the seam below. */
.lp .hero { position: relative; isolation: isolate; padding-bottom: clamp(5rem, 10vh, 8rem); }

@media (min-width: 992px) { .lp .hero { min-height: 94vh; } }

/* ── The photograph, dissolved into the page ──────────────────────────────────
   The client's hero set is 2000×600 — a wide BAND, not a column. Stretching it to the hero's full height
   forced object-fit into a 2–6× crop ("too much zoom"). So the layer now keeps close to the band's own
   ratio: a strip capped near its natural height, centred on desktop, at the top on small screens, dissolving
   into the page on every edge. If taller imagery arrives one day (~1:1, e.g. 2000×1800), only these height
   rules change. */
/* The band's height comes from the SOURCE's own ratio (2000×600): the photograph is only ever scaled DOWN,
   never up — a fixed vh/vw height was upscaling the 600px-tall original (~2.4× on retina) into blur. */
/* ── MOBILE PRIMEIRO: a fotografia tem de se VER no telemóvel ─────────────────
   Medido no que o telemóvel recebia: a faixa nascia do rácio 2000×600 sobre a largura do ecrã, logo
   `360px → 108px` · `390px → 117px` · `430px → 129px`. E o texto começa aos 62–75px, portanto MAIS DE METADE
   da fotografia ficava por trás do texto, e o resto esbatido a branco. Na prática, a fotografia da instalação
   não se via — no aparelho em que a maioria das pessoas a vai abrir.

   Num ecrã estreito a faixa passa a ter altura própria e a imagem corta-se na horizontal (`object-fit: cover`
   já lá estava), que é o corte que um panorama 2000×600 aceita sem perder nada de importante. A altura fica
   entre 180 e 240px: a 3× de densidade são 540–720px contra os 600px do original, ou seja fica-se junto ao
   tamanho natural em vez de o ampliar 2,4× como uma versão anterior fazia — era isso que borratava a foto.

   O rácio original volta a mandar a partir de 992px, onde a faixa é de 64% da largura e há espaço para ela. */
.lp .hero-media {
  position: absolute; inset: 0 0 auto 0; width: 100%; z-index: 0; overflow: hidden;
  height: clamp(180px, 52vw, 240px);
}

@media (min-width: 992px) {
  /* Glued to the menu: the band starts right under the header and dissolves downward — no floating strip
     with dead air above it on tall/wide displays. */
  .lp .hero-media {
    inset: 0 0 auto auto;
    width: 64%;
    /* Acima de 992px volta o rácio da fonte: a altura é 64% × 600/2000 = 19.2vw, e é dela que o herói
       também tira a sua (ver o bloco no fim desta secção). */
    aspect-ratio: 2000 / 600;
    height: auto;
  }
}

/* ── O VÍDEO ──────────────────────────────────────────────────────────────────
   Substituiu a rotação de fotografias com deslocamento lateral (`.hero-shots` + `@keyframes heroPan`), que
   existia porque um panorama parado precisava de movimento emprestado. Um vídeo tem o seu, e sobrepor-lhe
   uma panorâmica seria movimento a dobrar.

   O ficheiro tem exactamente o rácio da faixa (1920×576 = 2000/600), por isso o `cover` não corta nada em
   desktop; abaixo de 992px a faixa ganha altura própria e o corte é lateral, igual ao que a fotografia
   levava. O `max-width: none` continua a ser preciso: o `img { max-width: 100% }` do pack aplica-se a
   media substituído e chega a apanhar o <video>. */
.lp .hero-video {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  /* Antes de o primeiro fotograma pintar, o que se vê é o poster; o fundo evita um rectângulo preto no
     intervalo, que é o que um <video> mostra por omissão. */
  background: var(--lp-bg-sunken);
}

/* Fade the image into the page: to the left (into the copy) and along the bottom (into the trust band). On small
   screens it is a soft background wash, so the copy stays readable over the top of it. */
.lp .hero-media::after {
  content: ""; position: absolute; inset: 0;
  /* O véu era .55→.86→branco e afogava as fotos — pareciam um defeito, não uma imagem. Mantém-se a
     dissolução para o fundo da página (o texto continua legível), mas a fotografia volta a ler-se como
     fotografia no topo. */
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.40) 70%, #ffffff);
}
@media (min-width: 992px) {
  .lp .hero-media {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 34%, #000 88%, transparent);
  }
  /* Anchored to the top edge, so only the left (into the copy) and the bottom (into the page) dissolve. */
  .lp .hero-media::after {
    background:
      linear-gradient(90deg, var(--lp-bg), rgba(255,255,255,0) 46%),
      linear-gradient(180deg, transparent 68%, var(--lp-bg));
  }
}

/* ── Content over the photo ───────────────────────────────────────────────── */
.lp .hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vh, 3.5rem);
  /* O texto começa onde a fotografia já se desvaneceu — 78% da altura dela, que é onde o gradiente do
     `::after` já está quase branco. Assim a foto vê-se inteira, o título não aterra sobre a parte nítida, e
     não sobra espaço morto entre as duas. Antes o texto começava a 62px sobre uma faixa de 117px. */
  padding: calc(clamp(180px, 52vw, 240px) * 0.78) clamp(1.25rem, 5vw, 6rem) 0;
}
@media (min-width: 992px) {
  .lp .hero-inner {
    grid-template-columns: minmax(0, 38rem) minmax(0, 1fr);
    align-items: center; padding-top: 0; gap: 0;
  }
}

.lp .hero-copy { min-width: 0; }

.lp .hero-eyebrow {
  margin: 0 0 1.25rem; font-size: .8125rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-color); font-weight: 600;
}

.lp .hero-title {
  margin: 0; font-family: var(--lp-serif); font-weight: 400;
  font-size: clamp(2.75rem, 4.4vw, 4.6rem); line-height: .98;
  letter-spacing: -.045em; color: var(--lp-ink); text-wrap: balance;
}
.lp .hero-title em { font-style: normal; color: var(--accent-color); }

.lp .hero-lead {
  margin: 1.5rem 0 0; max-width: 40ch;
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.6; color: var(--lp-ink-soft);
}

.lp .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2.25rem; }

.lp .hero-promise { display: flex; flex-wrap: wrap; gap: .7rem 1.75rem; list-style: none; margin: 2.25rem 0 0; padding: 0; }
.lp .hero-promise li { display: inline-flex; align-items: center; gap: .55rem; font-size: .9375rem; font-weight: 500; color: var(--lp-ink); }
.lp .hero-promise i { color: var(--accent-color); font-size: 1.05rem; }

/* ── Floating product cards ───────────────────────────────────────────────── */
.lp .hero-cards { position: relative; }
@media (max-width: 991.98px) { .lp .hero-cards { display: grid; gap: 1rem; } }
/* On desktop the cards are positioned by percentage, so the container needs a real height or both resolve to 0
   and stack on top of each other. */
@media (min-width: 992px) { .lp .hero-cards { min-height: 30rem; } }

.lp .hero-card {
  display: flex; align-items: flex-start; gap: .85rem; max-width: 20rem;
  padding: 1rem 1.15rem; border-radius: var(--lp-radius);
  background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow-lg);
}
.lp .hero-card-ic {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 999px;
  display: grid; place-items: center; font-size: 1.15rem;
}
.lp .hero-card-ic.ok { background: color-mix(in srgb, #16a34a, #fff 86%); color: #16a34a; }
.lp .hero-card-ic.accent { background: var(--lp-bg-accent-wash); color: var(--accent-color); border-radius: var(--lp-radius); }
.lp .hero-card-k { display: block; font-size: 1rem; font-weight: 600; color: var(--lp-ink); }
.lp .hero-card-v { display: block; font-size: .8125rem; line-height: 1.45; color: var(--lp-ink-faint); margin-top: .15rem; }

@media (min-width: 992px) {
  .lp .hero-card { position: absolute; }
  /* Both cards stay INSIDE the photo column. -3rem pulled card A into the copy column, where it sat on top of
     the headline and amputated its last word at 1440px. Floating over the image is the composition; floating
     over the words is a defect. */
  .lp .hero-card-a { top: 8%;  left: 4.5rem; }
  .lp .hero-card-b { top: 54%; left: 10rem; }
  .lp .hero-card-b .hero-card-ic i { animation: heroPulse 2.4s ease-in-out infinite; }
}

@keyframes heroPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ── Trust band: raised card straddling the seam ──────────────────────────── */
.lp .hero-trust {
  position: relative; z-index: 3;
  width: min(1300px, 92vw); margin: clamp(2.5rem, 5vh, 4rem) auto 0;
  display: grid; grid-template-columns: 1fr; gap: 1.5rem 3rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
  background: var(--lp-bg-raised); border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-lg); box-shadow: var(--lp-shadow-lg);
}
@media (min-width: 768px) { .lp .hero-trust { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .lp .hero-trust { margin-bottom: clamp(-5rem, -6vh, -4rem); } }

/* ── O VAZIO DO DESKTOP, FECHADO (Luna, 2026-09-14) ───────────────────────────
   Num ecrã largo abria-se meio ecrã de mosaico entre o texto do herói e esta barra. A causa não era a barra:
   era o herói a reservar `94vh` com o conteúdo CENTRADO — um bloco de texto curto no meio de quase um ecrã
   deixa metade vazia por baixo — mais um `padding-bottom` de até 8rem antes da barra começar.

   A palavra dela é literalmente esta: «podia ficar um bocadinho mais subida». Três ajustes pequenos em vez de
   um grande: a altura reservada desce, o fundo do herói encolhe, e a barra sobe para dentro do que sobra.
   Nada muda na composição — a fotografia, a coluna de texto e os cartões flutuantes ficam onde estavam —, e
   abaixo de 992px nada disto se aplica, porque aí a página empilha e o vazio não existe.

   Reverter é apagar este bloco. */
@media (min-width: 992px) {
  /* A ALTURA DO HERÓI VEM DA FOTOGRAFIA, NÃO DO ECRÃ — é a correcção de fundo.
     A faixa ocupa 64% da largura e tem rácio 2000×600, logo a sua altura é sempre `0.64 × 0.3 = 19.2vw`.
     O herói reservava `vh`, e as duas medidas não se falavam:

         janela 1440×900   →  foto 276px · herói 738px  →  462px de nada
         janela 1920×1080  →  foto 369px · herói 886px  →  517px de nada
         janela 2347×1348  →  foto 450px · herói 1105px →  655px de nada

     Era esse o mosaico. Agora o herói é, no MÍNIMO, tão alto quanto a fotografia — e mais, se o texto pedir:
     numa janela estreita o texto é o mais alto e manda ele; numa janela larga é a fotografia. Nas duas, o
     conteúdo fica ao lado da imagem em vez de cair por baixo dela, e a barra segue-se logo. Nenhum ecrã fica
     com um buraco, porque não há medida fixa nenhuma para sobrar. */
  /* ⚠ O `padding-bottom` NÃO É DECORAÇÃO — é o que CONTÉM a barra.
     A `.hero-trust` tem `margin-bottom` negativo (−4 a −5rem) porque foi desenhada para ficar a cavalo na
     costura entre o herói e a secção seguinte. Mas o herói é `isolation: isolate`, e isso prende o `z-index: 3`
     da barra DENTRO dele: ela não pinta por cima do que vem a seguir, e a secção seguinte corta-a a direito.
     Eu pus este valor a zero e foi exactamente isso que aconteceu — a barra apareceu decapitada.
     Tem de ser, no mínimo, tão grande quanto a margem negativa. */
  .lp .hero { min-height: 19.2vw; padding-bottom: clamp(5rem, 8vh, 6.5rem); }
  .lp .hero-inner { min-height: 19.2vw; }
  /* SEM MARGEM NEGATIVA. Cheguei a puxar esta barra para cima para fechar o vazio — e com o herói já sem os
     cartões, e portanto mais curto, ela entrou POR DENTRO dele: aterrava sobre os botões e ficava cortada em
     baixo. O vazio resolve-se pela altura do herói (a linha acima), não empurrando um bloco para cima de
     outro. Aqui fica uma folga positiva e pequena, que é o que separa duas coisas sem as afastar. */
  .lp .hero-trust { margin-top: clamp(1.5rem, 3vh, 2.5rem); }
}

.lp .hero-trust-item { display: flex; align-items: flex-start; gap: 1rem; }
.lp .hero-trust-ic {
  flex: none; width: 3rem; height: 3rem; border-radius: var(--lp-radius);
  display: grid; place-items: center; font-size: 1.35rem;
  background: var(--lp-bg-accent-wash); color: var(--accent-color);
}
.lp .hero-trust-item h3 { margin: 0 0 .25rem; font-size: 1.0625rem; font-weight: 600; color: var(--lp-ink); }
.lp .hero-trust-item p { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--lp-ink-faint); }

@media (prefers-reduced-motion: reduce) {
  /* Quem pediu menos movimento não recebe um vídeo a tocar em ciclo. Fica o poster, que é a mesma imagem —
     o `home-fx.js` trata da outra metade: pára o vídeo e larga as fontes, para além de escondido não ser
     também descarregado. */
  .lp .hero-video { display: none; }
  .lp .hero-media {
    background: url("/assets/sibertex/img/hero/hero-video.jpg") center / cover no-repeat;
  }
  .lp .hero-card-b .hero-card-ic i { animation: none; }
}

/* ═══ 01 · COMO FUNCIONA — the journey, drawn by the scroll ═══════════════════
   The differential is a sequence, so it is set as a TIMELINE: a line the scroll fills, and six stations that
   light as the line reaches them. The fill is driven by --tlp (0..1), written by home-fx.js from the section's
   travel through the viewport; the dimming of not-yet-reached steps only exists under .lp-tl.js, which the
   script adds when it actually runs — with JS off or reduced motion the CSS default (--tlp: 1, everything lit)
   is the whole story and nothing is hidden.

   Sits on the sunken surface so the page changes state after the white hero, and takes extra top padding on
   desktop because the hero's trust card deliberately straddles the seam into it. */
.lp .lp-how { background: var(--lp-bg-sunken); }

@media (min-width: 992px) {
  .lp .lp-how { padding-top: calc(clamp(5rem, 11vh, 9rem) + 4.5rem); }
}

/* ── The rail (mobile/tablet base): a vertical line through the step numbers ── */
.lp-tl {
  --tlp: 1;                       /* full by default; the script starts it at 0 and drives it */
  position: relative;
  list-style: none;
  margin: clamp(2.75rem, 6vh, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 4vh, 2.5rem);
}

/* Track and fill are two pseudo-elements on the list itself: the track is a hairline, the fill is the accent
   scaled by --tlp. transform (not height) so the browser never relayouts at 60fps. */
.lp-tl::before,
.lp-tl::after {
  content: "";
  position: absolute;
  left: calc(1.375rem - 1px);
  top: 1.375rem;
  bottom: 1.375rem;
  width: 2px;
  border-radius: 2px;
}

.lp-tl::before { background: var(--lp-line-strong); }

.lp-tl::after {
  background: var(--accent-color);
  transform-origin: top;
  transform: scaleY(var(--tlp));
}

.lp-tl-step {
  position: relative;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

/* The station: a numbered disc in the display face. Lit state swaps it to the accent. */
.lp-tl-n {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--lp-serif);
  font-size: 1.125rem;
  color: var(--lp-ink-faint);
  background: var(--lp-bg-raised);
  border: 1px solid var(--lp-line-strong);
  position: relative;
  z-index: 1;                     /* above the rail running underneath */
  transition: background .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease;
}

.lp-tl-body { padding-top: .3rem; min-width: 0; }

.lp-tl-body i {
  display: none;                  /* on the vertical rail the number is the marker; the icon returns on desktop */
  color: var(--accent-color);
  font-size: 1.25rem;
  margin-bottom: .85rem;
}

.lp-tl-body h3 {
  margin: 0 0 .4rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--lp-ink);
}

.lp-tl-body p {
  margin: 0;
  max-width: 46ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--lp-ink-soft);
}

/* Lit station */
.lp-tl-step.on .lp-tl-n,
.lp-tl:not(.js) .lp-tl-n {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--lp-on-accent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-color), transparent 70%);
}

/* Dimming exists ONLY while the script drives the timeline. */
.lp-tl.js .lp-tl-step {
  opacity: .38;
  transition: opacity .5s ease;
}

.lp-tl.js .lp-tl-step.on { opacity: 1; }

/* ── Desktop (≥1200px): RECOMPOSED to a horizontal line, six stations across ──
   Scoped away from .lp-tl-vert: the service-page template keeps the rail vertical at every width (ratified),
   so only the Home's timeline turns horizontal. */
@media (min-width: 1200px) {
  .lp-tl:not(.lp-tl-vert) {
    grid-template-columns: repeat(6, 1fr);
    gap: 2.25rem;
  }

  .lp-tl:not(.lp-tl-vert)::before,
  .lp-tl:not(.lp-tl-vert)::after {
    left: 1.375rem;
    right: 1.375rem;
    top: calc(1.375rem - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .lp-tl:not(.lp-tl-vert)::after {
    transform-origin: left;
    transform: scaleX(var(--tlp));
  }

  .lp-tl:not(.lp-tl-vert) .lp-tl-step {
    flex-direction: column;
    gap: 1.5rem;
  }

  .lp-tl:not(.lp-tl-vert) .lp-tl-body { padding-top: 0; }
  .lp-tl:not(.lp-tl-vert) .lp-tl-body i { display: block; }
  .lp-tl:not(.lp-tl-vert) .lp-tl-body p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-tl::after { transform: none; }
  .lp-tl-n, .lp-tl.js .lp-tl-step { transition: none; }
}

/* ═══ 02 · PORQUÊ A SIBERTEX — proof, composed ════════════════════════════════
   Three photo/text rows that ALTERNATE sides (the SoT's composition rule), closed by the counter strip.
   Rows are grids, not floats: on mobile the photo stacks above its copy — recomposed, not shrunk. */

.lp-why-rows {
  display: grid;
  gap: clamp(3rem, 7vh, 5rem);
  margin-top: clamp(3rem, 7vh, 4.5rem);
}

.lp-why-row {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 992px) {
  .lp-why-row { grid-template-columns: 1.15fr 1fr; gap: clamp(3rem, 6vw, 5.5rem); }
  .lp-why-row:nth-child(even) .lp-why-photo { order: 2; }
}

.lp-why-photo {
  margin: 0;
  border-radius: var(--lp-radius-lg);
  border: 1px solid var(--lp-line);
  overflow: hidden;
  line-height: 0;
}

.lp .lp-why-photo img {
  width: 100%;
  height: clamp(230px, 32vw, 380px);
  object-fit: cover;
  transition: transform .7s ease;
}

.lp .lp-why-row:hover .lp-why-photo img { transform: scale(1.03); }

.lp-why-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--lp-radius);
  font-size: 1.35rem;
  color: var(--accent-color);
  background: var(--lp-bg-accent-wash);
}

.lp-why-copy h3 {
  margin: 1.25rem 0 .6rem;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--lp-ink);
}

.lp-why-copy p {
  margin: 0;
  max-width: 46ch;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--lp-ink-soft);
}

/* Counter strip: 2×2 on small screens, one row of four on desktop (uses the existing .lp-stat). */
.lp-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 2.5rem;
  margin-top: clamp(3.5rem, 8vh, 5rem);
}

@media (min-width: 992px) { .lp-stats { grid-template-columns: repeat(4, 1fr); } }

/* ⚠ DENTRO DE UMA COLUNA, A MEDIDA DO ECRÃ MENTE.
   As secções 01, 02 e 03 passaram a duas colunas para o título poder fixar, e o conteúdo vive agora numa
   coluna de ~60% da largura. Uma media query mede o ECRÃ, não a coluna: `repeat(4, 1fr)` num ecrã de 1440px
   continua a dar quatro colunas dentro de um espaço de ~810px, ou seja tiras de 190px. Estas duas regras
   recompõem as grelhas para o espaço que passaram a ter. Se um dia a secção voltar a ser de largura
   inteira, apagam-se. */
@media (min-width: 992px) {
  .lp .lp-why .lp-two .lp-stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; }
}
/* Os DOIS cartões de produto empilham-se dentro da coluna, e só voltam a ficar lado a lado quando há
   largura a sério. Medido num ecrã de 1440px: a dois por linha davam 354px cada e a ilustração descia a
   106px de altura — o cartão perdia a presença que a régua de acento lhe tinha acabado de dar. Um por
   linha dá ~724px e 217px de ilustração. Acima de 1900px a coluna já comporta os dois (676px cada,
   ilustração de 202px), e aí voltam a emparelhar. */
.lp .lp-svcs .lp-two .lp-svc-feats { grid-template-columns: 1fr; }

@media (min-width: 1900px) {
  .lp .lp-svcs .lp-two .lp-svc-feats { grid-template-columns: 1fr 1fr; }
}

/* ═══ 03 · SERVIÇOS — two photographic features + four capability cards ═══════ */
.lp .lp-svcs { background: var(--lp-bg-sunken); }

.lp-svc-feats {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(3rem, 7vh, 4.5rem);
}

@media (min-width: 768px) { .lp-svc-feats { grid-template-columns: 1fr 1fr; } }

/* Estes dois são os PRODUTOS: têm de pesar mais do que os quatro cartões de capacidade que vêm a seguir.
   Com fotografia isso vinha de graça — uma imagem densa dava massa ao cartão sozinha. Com ilustração a
   traço não vem, e o cartão ficou sem presença nenhuma no meio da secção.
   O destaque é o ACENTO, no cartão — nunca no ficheiro da ilustração: a imagem é conteúdo e não deve
   carregar a decoração da página. Três camadas, todas por token: aro de acento, apoio quente por baixo
   (em vez de uma sombra cinzenta que a secção já é), e um lavado de acento no corpo, que é a única parte
   do fundo do cartão que se vê por baixo da faixa da ilustração. */
.lp-svc-feat {
  display: flex;
  flex-direction: column;
  border-radius: var(--lp-radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 72%);
  background:
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--accent-color), transparent 90%), transparent 58%),
    var(--lp-bg-raised);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--accent-color), transparent 88%),
    0 14px 34px color-mix(in srgb, var(--accent-color), transparent 90%);
  overflow: hidden;
  text-decoration: none;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.lp-svc-feat:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent-color), transparent 40%);
  box-shadow:
    0 2px 4px color-mix(in srgb, var(--accent-color), transparent 82%),
    0 22px 52px color-mix(in srgb, var(--accent-color), transparent 82%);
}

/* The feature panoramas are 2000×600: the frame takes their own ratio, so the image is only ever scaled
   DOWN — a fixed height was cropping into a zoomed slice.
   A ilustração traz o cinzento da página pintado lá dentro (`#f7f8fa`), e por isso encosta à secção. Não se
   corrige no ficheiro — corrige-se com o `border-bottom` de acento, que marca onde a faixa acaba e o produto
   é nomeado. É a régua que a fotografia dispensava por ser densa. */
.lp .lp-svc-feat img {
  width: 100%;
  aspect-ratio: 2000 / 600;
  height: auto;
  max-width: none;
  object-fit: cover;
  border-bottom: 2px solid var(--accent-color);
  transition: transform .7s ease;
}

.lp-svc-feat:hover img { transform: scale(1.04); }

.lp-svc-feat-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.75rem 2rem 2rem;
}

.lp-svc-feat-body h3 {
  margin: 0 0 .6rem;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--lp-ink);
}

.lp-svc-feat-body p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--lp-ink-soft);
}

.lp-svc-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--accent-color);
}

.lp-svc-more i { transition: transform .25s cubic-bezier(.2, .7, .3, 1); }
.lp-svc-feat:hover .lp-svc-more i { transform: translateX(4px); }

/* ═══ 04 · CALCULADORA — pieces the Medilab-era calculator.css used to carry ══
   The wrapper system (.calc/.calc-grid/.calc-panel/.calc-out) already lives above; these are the result-rail
   details (initial payment, contract rule, on-request state) re-expressed on the .lp tokens. */
.calc-val-k {
  display: block;
  margin: -1rem 0 1.5rem;
  font-size: .875rem;
  color: var(--lp-ink-faint);
}

.calc-initial {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: 12px;
  background: var(--lp-bg-raised);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
}

.calc-initial-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.calc-initial-row span { font-size: .875rem; color: var(--lp-ink-soft); }

.calc-initial-row b {
  font-family: var(--lp-serif);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--accent-color);
  white-space: nowrap;
}

.calc-rule {
  margin: .8rem 0 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--lp-ink-faint);
}

/* Price on request (EST class 8): the figure is a sentence, so it must not render at display scale. */
.calc-onreq .calc-val { font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.25; }

.calc .calc-cta { margin-top: auto; width: 100%; justify-content: center; }

/* .lp-cta is written for <a>; the contact form submits with a <button> wearing it. */
.lp button.lp-cta { border: 0; cursor: pointer; }

/* ═══ CTA FINAL — the dark band's three paths ═════════════════════════════════ */
.lp .lp-band h2 em { font-style: normal; color: var(--accent-color); }

.lp-band-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 2rem;
  margin-top: 2.5rem;
}

.lp .lp-band .lp-band-link {
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  padding-bottom: 2px;
  transition: border-color .2s ease;
}

.lp .lp-band .lp-band-link:hover { border-color: #ffffff; }

/* ═══ 05 · FAQ — the pack accordion recomposed into hairline rows ═════════════
   Bootstrap keeps the collapse behaviour; the box, the borders and the grey header backgrounds go. The
   chevron is redrawn with the icon font so its colour can come from the accent token (Bootstrap's own
   caret is a hardcoded SVG data-URI, which a token cannot reach). */
.lp .accordion-item {
  border: 0;
  border-top: 1px solid var(--lp-line);
  background: transparent;
}

.lp .accordion-item:last-child { border-bottom: 1px solid var(--lp-line); }

.lp .accordion-button {
  padding: 1.4rem 0;
  background: transparent;
  box-shadow: none;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--lp-ink);
}

.lp .accordion-button:not(.collapsed) {
  background: transparent;
  box-shadow: none;
  color: var(--lp-ink);
}

.lp .accordion-button:focus { box-shadow: none; }

.lp .accordion-button::after {
  width: auto;
  height: auto;
  background: none;
  content: "\f282";
  font-family: "bootstrap-icons";
  font-size: 1rem;
  color: var(--accent-color);
  transition: transform .3s ease;
}

.lp .accordion-button:not(.collapsed)::after { transform: rotate(180deg); }

.lp .accordion-body {
  padding: 0 0 1.5rem;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--lp-ink-soft);
}

/* ═══ 06 · GALERIA — marquee shots are buttons now (they open the lightbox) ═══ */
.lp .lp-gal .lp-wrap { margin-bottom: clamp(2rem, 5vh, 3.5rem); }

.lp button.lp-shot {
  appearance: none;
  background: none;
  padding: 0;
  cursor: zoom-in;
}

.lp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  background: rgba(11, 13, 16, .93);
  opacity: 0;
  transition: opacity .3s ease;
}

.lp-lightbox.on { opacity: 1; }

.lp-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
}

.lp-lightbox button {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background .2s ease;
}

.lp-lightbox button:hover { background: rgba(255, 255, 255, .18); }

.lp-lightbox-close { top: 1.25rem; right: 1.25rem; }
.lp-lightbox-prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lp-lightbox-next { right: 1rem; top: 50%; translate: 0 -50%; }

/* ═══ 07 · CONTACTOS ══════════════════════════════════════════════════════════ */
.lp .lp-contactsec { padding-bottom: 0; }   /* the map closes the page edge-to-edge */
.lp .lp-contactsec .lp-lead { margin-bottom: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .lp-lightbox { transition: none; }
  .lp .lp-why-photo img, .lp .lp-svc-feat img, .lp-svc-more i, .lp .accordion-button::after { transition: none; }
}

/* ═══ SERVICE PAGES (FE V2 · step 4) — one premium template, six heirs ════════
   The same language as the Home's fold: dissolved photograph, display type, kickers, editorial two-column,
   sunken/raised rhythm, and the dark band closing. No .card, no admin column, no breadcrumb furniture. */

/* ── Hero do serviço ── */
.lp .lp-svcp-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 52vh;
  padding-block: clamp(4rem, 10vh, 7rem);
}

/* Same rule as the Home band: height from the panorama's own ratio, so the source only scales down. */
.lp-svcp-media { position: absolute; inset: 0 0 auto 0; aspect-ratio: 2000 / 600; height: auto; overflow: hidden; }

.lp .lp-svcp-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Small screens: the photo is a soft wash behind the title. */
.lp-svcp-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .88) 78%, #ffffff);
}

@media (min-width: 992px) {
  .lp .lp-svcp-media {
    inset: 0 0 auto auto;
    width: 58%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 34%, #000 92%, transparent);
  }

  .lp .lp-svcp-media::after {
    background:
      linear-gradient(90deg, var(--lp-bg), rgba(255, 255, 255, 0) 48%),
      linear-gradient(180deg, transparent 64%, var(--lp-bg));
  }
}

.lp-svcp-hero-inner { position: relative; z-index: 2; }

.lp .lp-svcp-hero .lp-h1 { max-width: 14ch; font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
.lp .lp-svcp-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2.25rem; }

/* The kicker doubles as the way back to the services index. */
.lp-kicker a { color: inherit; text-decoration: none; transition: color .2s ease; }
.lp-kicker a:hover { color: var(--accent-color); }

/* ── O que é ── */
.lp-svcp-ic {
  display: inline-grid;
  place-items: center;
  width: clamp(4.5rem, 7vw, 6rem);
  height: clamp(4.5rem, 7vw, 6rem);
  border-radius: var(--lp-radius-lg);
  background: var(--lp-bg-accent-wash);
  color: var(--accent-color);
  font-size: clamp(2rem, 3vw, 2.75rem);
}

/* O ícone ERA o conteúdo do <h2> da secção «O que é» — um cabeçalho vazio no meio do documento. Saiu de lá
 * e passou a ser o que sempre foi: um sinal da secção, por baixo do título. A margem não é decoração: o
 * `.lp-display` acima traz `margin: 0`, e sem ela o ícone encosta às descendentes do título. */
.lp-pin > .lp-svcp-ic { margin-top: 1.75rem; }

.lp-svcp-body {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.7;
  color: var(--lp-ink-soft);
}

/* ── O que está incluído (sunken) ── */
.lp .lp-svcp-inc { background: var(--lp-bg-sunken); }

.lp-svcp-points {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2rem, 5vh, 3rem);
}

@media (min-width: 768px) { .lp-svcp-points { grid-template-columns: repeat(2, 1fr); } }

/* ⚠ DENTRO DE `.lp-two` A MEDIA QUERY ACIMA MENTE: mede o ECRÃ, não a coluna. Esta secção passou a ter o
 * título fixo à esquerda (como a 01 e a 03) e os pontos à direita, numa coluna que vale ~60% da página —
 * a 992px isso punha dois cartões lado a lado com 330px cada, com o selo do visto a comer um terço. Uma
 * coluna até haver largura a sério. A margem do topo também sai: aqui os pontos começam ao lado do
 * título, não por baixo dele. */
.lp .lp-svcp-inc .lp-two .lp-svcp-points { grid-template-columns: 1fr; }

/* A margem do topo só sai QUANDO HÁ DUAS COLUNAS. Abaixo de 992px o `.lp-two` colapsa numa só, o título
 * volta a ficar por cima e a margem volta a ser precisa — zerá-la sempre colava os pontos ao <h2>. */
@media (min-width: 992px) { .lp .lp-svcp-inc .lp-two .lp-svcp-points { margin-top: 0; } }

@media (min-width: 1400px) {
  .lp .lp-svcp-inc .lp-two .lp-svcp-points { grid-template-columns: repeat(2, 1fr); }
}

.lp-svcp-point {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-lg);
  background: var(--lp-bg-raised);
}

.lp-svcp-point p { margin: 0; font-size: .9375rem; font-weight: 500; line-height: 1.6; color: var(--lp-ink); }

/* O SELO DO VISTO NÃO ENCOLHE (2026-09-11).
   `.lp-svcp-point` é um flex e `.lp-why-ic` tem largura FIXA de 3rem. Sem `flex-shrink: 0`, um item de
   largura fixa é comprimido pelo irmão que precisa de espaço — e num telemóvel estreito o quadrado do
   visto achatava-se numa pastilha. O selo deixa de ser um selo. */
.lp-svcp-point > .lp-why-ic { flex: 0 0 auto; }

/* E num ecrã pequeno o selo de 48px ocupava um terço da largura útil do cartão, empurrando o texto para
   três ou quatro linhas. Encolhe com o ecrã — continua quadrado, continua legível. */
@media (max-width: 480px) {
  .lp-svcp-point { gap: .9rem; padding: 1.15rem 1.2rem; }
  .lp-svcp-point > .lp-why-ic { width: 2.25rem; height: 2.25rem; font-size: 1.05rem; }
}

/* "How you pay" — only where a price exists, warmed by the accent. */
.lp-svcp-price {
  margin-top: 1.25rem;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border-radius: var(--lp-radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  background:
    radial-gradient(70% 130% at 100% 0%, color-mix(in srgb, var(--accent-color), transparent 90%), transparent 60%),
    var(--lp-bg-raised);
}

.lp-svcp-price h3 { margin: 0 0 .6rem; font-size: 1.0625rem; font-weight: 600; color: var(--lp-ink); }
.lp-svcp-price p { margin: 0 0 1.1rem; max-width: 72ch; font-size: .9375rem; line-height: 1.65; color: var(--lp-ink-soft); }

/* ── FITA DE LIGAÇÕES — partilhada ────────────────────────────────────────────
   Nasceu como «outros serviços» no fim de uma página de serviço; desde 15/09 é também o que leva o leitor
   da secção 02 da home às quatro páginas das capacidades digitais, que antes eram quatro cartões com o
   texto todo repetido. Por isso o nome deixou de dizer `svcp` (página de serviço): é um componente dos
   dois sítios. Um chip diz o NOME e o caminho — nunca volta a descrever o que a secção já prometeu. */
.lp-linkrow { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: clamp(1.75rem, 4vh, 2.5rem); }

/* O rótulo que anuncia a fita na home. Na página de serviço quem a anuncia é o <h2> da secção, e aí este
   parágrafo não existe. */
.lp-linkrow-label {
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-ink-faint);
}

.lp-linkrow-label + .lp-linkrow { margin-top: 1rem; }

.lp-linkchip {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--lp-line);
  background: var(--lp-bg-raised);
  color: var(--lp-ink);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease;
}

.lp-linkchip > i:first-child { color: var(--accent-color); }
.lp-linkchip-go { font-size: .8125rem; color: var(--lp-ink-faint); transition: transform .25s ease; }

.lp-linkchip:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-color), transparent 55%);
  color: var(--lp-ink);
}

.lp-linkchip:hover .lp-linkchip-go { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .lp-linkchip, .lp-linkchip-go { transition: none; }
}

/* PRÉ-LANÇAMENTO — o destaque «brevemente» do herói (aditivo, remove-se quando o registo abrir). */
.lp-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--lp-ink);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.lp-soon .bi { color: var(--accent-color); }

/* ── Tabelas das páginas legais (ex.: política de cookies) — mobile (2026-09-02, aditivo) ─────────────────
 * Os nomes técnicos dos cookies são tokens indivisíveis (.AspNetCore.Identity.Application) e, num ecrã
 * estreito, estouravam a célula e o texto aparecia cortado. Regra: nada corta — tudo quebra e embrulha.
 * A tabela herda a paleta da landing (nunca o branco do Bootstrap sobre o fundo escuro). */
.lp-legal-body .table { color: var(--lp-ink-soft); }
.lp-legal-body .table th,
.lp-legal-body .table td {
  background: transparent;
  color: inherit;
  border-color: var(--lp-line);
}
.lp-legal-body .table code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 575.98px) {
  .lp-legal-body .table { table-layout: fixed; width: 100%; }
  .lp-legal-body .table th:nth-child(1),
  .lp-legal-body .table td:nth-child(1) { width: 36%; }
  .lp-legal-body .table th,
  .lp-legal-body .table td { font-size: 0.8125rem; padding: 0.5rem 0.4rem; overflow-wrap: anywhere; }
}

/* The contact form's trap field: present in the markup for automated posters, out of reach for people. */
.lp-form .lp-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }