/* lp-build: 2026-09-09
   ----------------------------------------------------------------------------
   A build marker, read back by location.php so a signed-in staff member can tell
   from view-source whether the stylesheet on the server is the current one.
   Several rounds of "the CTA is still too small" turned out to be a deploy
   question rather than a CSS question, and that is not something the browser can
   answer but the server can. Bump the date whenever this file changes materially.
   ============================================================================ */

/* ============================================================================
   Caminho.DEV — location page design (GEO-002)
   ----------------------------------------------------------------------------
   Adapted from caminho-gaia-refined.html. Four things changed, all of them
   because the mockup is a standalone page and this is not:

   1. EVERYTHING IS SCOPED under .lp. The mockup styles bare elements and
      generic names — a{}, img{}, h1..h3{}, p{}, .nav, .btn, .brand, .section,
      .chip, .shell, footer{}. Dropped in as-is, those repaint the site's real
      navbar and footer: `a{color:inherit;text-decoration:none}` alone strips
      every link in the header. Each rule now hangs off .lp so it cannot reach
      outside this page's own markup.

   2. NO :root OVERRIDES. The mockup redefines --ink, --line, --blue and friends
      on :root, which would silently retheme every other component on the page
      that reads those names. They are now --lp-* custom properties declared on
      .lp itself.

   3. THE TWO STYLE BLOCKS ARE MERGED. The mockup ships a base sheet plus a
      "refinement pass" that overrides ~40 of its own declarations. Shipping both
      means every one of those properties is computed twice and the real value is
      whichever block wins. Only the winning values are kept here.

   4. NO NAV OR FOOTER STYLES AT ALL. The page uses the site's real header.php
      and footer.php — which is what makes the language switcher, the mobile
      menu and Sign In work. The mockup's own nav markup was a static mock with
      href="#" and a decorative language pill; reproducing it would have given
      the page a second, broken navbar.
   ========================================================================== */

.lp {
  --lp-ink: #17234d;
  --lp-muted: #67728f;
  --lp-line: #e3e7f2;
  --lp-blue: #5e6df4;
  --lp-lav: #f6f4ff;
  --lp-shadow: 0 22px 58px rgba(45, 55, 100, .085);

  color: var(--lp-ink);
  /* NO font-family here — inherit the site's.
     This block used to ask for "Plus Jakarta Sans", Inter, then system fonts. The site
     loads neither: header.php requests Poppins. So every location page silently rendered
     in a system sans while the navbar and footer above and below it were Poppins, which
     is the typography mismatch in the comparison. The mockup was drawn in Plus Jakarta
     Sans, but loading a second family for one page would put the body in a different face
     from the fixed navbar and footer — worse than matching the mockup exactly. */
  -webkit-font-smoothing: antialiased;

  /* NO background here — this is the "white sheet" defect.
   *
   * The mockup declares this gradient on body{}, where it covers the viewport. Ported
   * onto .lp it covers .lp's box instead, and .lp lives inside header.php's
   * .wrap { max-width: 1440px; padding: 0 24px } — so it painted a near-white rectangle
   * from the wrap's left edge to its right edge, sitting on the site's pale lavender
   * page. That hard edge is what reads as "the body is a narrow white column", and it
   * also double-covered .page-aura, which is where the real background treatment lives.
   *
   * The site already supplies exactly the backdrop the target shows. Nothing to add. */
}

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp img  { display: block; max-width: 100%; }
.lp h1, .lp h2, .lp h3, .lp p { margin-top: 0; }

.lp-shell { width: min(1320px, 92vw); margin-inline: auto; }

/* ── shared bits ─────────────────────────────────────────────────────────── */
.lp-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: #6471ef; margin-bottom: 17px;
}
.lp-accent { color: #6478f5; }
/* Section rhythm to the agreed targets: 50px top and bottom, with related sections
   allowed to sit closer rather than every gap being identical. */
.lp-section { padding: 58px 0; }
.lp-section + .lp-section { padding-top: 42px; }
.lp-section-head { margin-bottom: 25px; }
.lp-section-head h2, .lp-copy h2 {
  font-size: 34px; line-height: 1.08; letter-spacing: -.04em; margin-bottom: 12px; max-width: 640px;
}
.lp-section-head p, .lp-copy p { color: #68728e; font-size: 14px; line-height: 1.72; margin-bottom: 12px; }
.lp-ico {
  width: 38px; height: 38px; border-radius: 10px; background: #f2f2ff; color: #6572f3;
  display: grid; place-items: center; margin-bottom: 18px;
}
.lp-ico svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ── hero ────────────────────────────────────────────────────────────────── */
/* The hero is the page's anchor and gets more room than the rest. */
.lp-hero { padding: 72px 0 66px; }
.lp-hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; gap: 76px; align-items: center; }
.lp h1 {
  font-size: clamp(48px, 4.45vw, 68px); line-height: 1.0; letter-spacing: -.052em;
  margin-bottom: 24px; max-width: 680px;
}
.lp-lead { font-size: 15.5px; line-height: 1.74; color: #5f6986; max-width: 625px; margin-bottom: 28px; }
.lp-actions { display: flex; gap: 15px; flex-wrap: wrap; }
.lp-btn {
  min-height: 48px; padding: 0 22px; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
  transition: .2s ease; cursor: pointer; text-decoration: none;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn-primary { color: #fff; background: linear-gradient(135deg, #5869f2, #658df8); box-shadow: 0 10px 24px rgba(87, 105, 242, .2); }
.lp-btn-secondary { border: 1px solid #d8dcf3; background: #fff; color: #4653a8; }
.lp-benefits { display: flex; gap: 27px; flex-wrap: wrap; margin-top: 32px; font-size: 12px; color: #4f5b78; font-weight: 650; }
.lp-benefit { display: flex; align-items: center; gap: 8px; }
.lp-benefit svg { width: 16px; height: 16px; color: #6873f4; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* isolation:isolate keeps the badge's z-index a local matter — it lifts above the frame
   without also lifting above anything else on the page. */
.lp-hero-art { position: relative; isolation: isolate; }

/* The hero shows the SAME frame as the homepage (includes/hero-frame.php), so the only
   thing overridden is the two properties the approved design sets differently — the
   homepage's 10px radius and its own shadow belong to a smaller hero. Everything else,
   including the cross-fade, comes from style-v3.css and hero-rotate.js untouched. */
.lp-hero-art .hv2-frame { border-radius: 20px; box-shadow: 0 24px 46px rgba(51, 64, 114, .12); }
.lp-hero-art .hv2-shot  { width: 100%; height: auto; }

/* Kept for the SVG fallback path, when no frame is available at all. */
.lp-hero-shot {
  width: 100%; height: auto; border-radius: 20px;
  box-shadow: 0 24px 46px rgba(51, 64, 114, .12);
}
/* Location badge, overlapping the mockup's lower-right corner. */
.lp-badge {
  /* z-index, and .lp-hero-art below is the stacking context it sits in.
     The frame's shots are position:absolute (style-v3.css line ~1312) so they paint above
     a positioned sibling that has no z-index of its own — which is why the badge
     disappeared behind the artwork the moment the hero started using the shared frame. */
  z-index: 2;
  position: absolute; right: -14px; bottom: -26px;
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #edf0f7; border-radius: 14px;
  padding: 14px 20px 14px 16px; box-shadow: 0 14px 34px rgba(42, 55, 100, .12);
}
.lp-badge-pin {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  background: #eef0ff; color: #5e6df4; display: grid; place-items: center;
}
.lp-badge-pin svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; }
.lp-badge-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; }
.lp-badge-text strong { font-size: 14px; color: #232c52; font-weight: 700; }
.lp-badge-text span  { font-size: 12px; color: #8a93ad; }

/* ── plan section: copy · four cards · price ─────────────────────────────── */
/* Three columns rather than a heading above a seven-card strip. The old shape gave the
   price panel two rows it could fill about a third of, and gave each card room for two
   words. Proportions follow the approved layout: roughly 32 / 38 / 23 of the row. */
.lp-plan {
  display: grid; grid-template-columns: 1fr 1.2fr .72fr; gap: 26px; align-items: start;
}
.lp-plan .lp-copy h2 { font-size: 30px; max-width: none; }
.lp-plan .lp-copy p  { max-width: 34ch; }
.lp-plan .lp-textlink { display: inline-block; margin-top: 4px; }

/* 2 × 2 inside the middle column. */
.lp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; align-items: stretch; }
.lp-card, .lp-mini {
  border: 1px solid var(--lp-line); background: rgba(255, 255, 255, .86);
  border-radius: 13px; padding: 22px; min-height: 145px;
}
.lp-card strong, .lp-mini strong { font-size: 13px; line-height: 1.35; display: block; }
/* The sentence is the point of the redesign — it is what makes four cards say more than
   seven labels did, so it gets a readable size rather than a caption size. */
.lp-card p { font-size: 12.5px; line-height: 1.62; color: #707b96; margin: 7px 0 0; }

.lp-price {
  border-radius: 13px; padding: 25px 24px; align-self: stretch;
  background: linear-gradient(145deg, #f8f7ff, #f0eeff);
  /* A shade firmer than #eeebff, which against the lavender fill was so close in value
     that the panel had no readable edge — it read as a gap in the grid rather than as a
     card. Still well under the weight of the feature-card border. */
  border: 1px solid #e6e1fb;
  display: flex; flex-direction: column; align-items: flex-start;
}
.lp-price-badge {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: #6572f3; display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(70, 60, 140, .10); margin-bottom: 16px;
}
.lp-price-badge svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; }
.lp-price-label { font-size: 13px; color: #69738f; }
/* The figure is the one number on the page and reads as one, with the interval tucked
   beside it rather than on its own line. */
.lp-price-figure {
  display: block; font-size: 34px; font-weight: 800; color: #232c52;
  letter-spacing: -.03em; line-height: 1.15; margin: 2px 0 6px;
}
.lp-price-figure small { font-size: 14px; font-weight: 700; color: #69738f; letter-spacing: 0; margin-left: 3px; }
.lp-price-vat { font-size: 13px; line-height: 1.55; color: #69738f; }
.lp-price p { font-size: 13px; line-height: 1.65; color: #69738f; margin: 16px 0 14px; }
.lp-price .lp-textlink { margin-top: auto; }
.lp-textlink { font-size: 13px; color: #5e6cf4; font-weight: 800; text-decoration: none; }
.lp-textlink:hover { text-decoration: underline; }

/* ── trust ───────────────────────────────────────────────────────────────── */
.lp-trust { display: grid; grid-template-columns: .91fr 1.49fr; gap: 48px; align-items: start; }
.lp-trust-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lp-mini { min-height: 194px; }
.lp-mini strong { font-size: 14px; margin-bottom: 8px; }
.lp-mini p { font-size: 12px; line-height: 1.6; color: #707b96; margin: 0; }

/* ── local coverage ──────────────────────────────────────────────────────── */
.lp-local { display: grid; grid-template-columns: .82fr 1.18fr; gap: 54px; align-items: center; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.lp-chip {
  padding: 8px 14px; border: 1px solid #e0e4f3; background: #fff; border-radius: 9px;
  font-size: 12px; font-weight: 750; display: flex; gap: 7px; align-items: center;
}
.lp-chip svg { width: 13px; height: 13px; color: #6572f3; stroke: currentColor; fill: none; stroke-width: 2; }
.lp-city {
  width: 100%; border-radius: 17px; box-shadow: var(--lp-shadow);
  /* Fixed ratio so an uploaded photo of any shape holds the layout instead of
     shunting the chips down the page. Wide editorial crop, as in the reference. */
  aspect-ratio: 16 / 9; object-fit: cover;
}

/* ── remote + CTA ────────────────────────────────────────────────────────── */
.lp-remote { display: grid; grid-template-columns: .89fr 1.11fr; gap: 42px; align-items: center; }
.lp-cta {
  border: 1px solid #e8eaf5; background: rgba(255, 255, 255, .85); border-radius: 17px;
  padding: 34px 38px; min-height: 176px; display: flex; align-items: center; gap: 28px;
  box-shadow: 0 18px 50px rgba(58, 66, 113, .05);
}
.lp-cta-icon {
  flex: 0 0 74px; width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center; background: #f1efff; color: #5e69f4;
}
.lp-cta-icon svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.lp-cta h3 { font-size: 20px; margin-bottom: 8px; }
.lp-cta p { font-size: 13px; line-height: 1.6; color: #6a748f; margin-bottom: 15px; }

/* ── how it works ────────────────────────────────────────────────────────── */
.lp-how { padding-top: 28px; }
.lp-process {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--lp-line); background: #fff; border-radius: 15px; overflow: hidden;
}
.lp-step { padding: 25px 24px; min-height: 172px; }
.lp-step + .lp-step { border-left: 1px solid #edf0f6; }
.lp-step-top { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.lp-num {
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  background: #6271ef; color: #fff; font-size: 10px; font-weight: 800;
}
.lp-step-icon { color: #6975f5; }
.lp-step-icon svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.lp-step strong { font-size: 13px; display: block; margin-bottom: 7px; }
.lp-step p { font-size: 11.5px; line-height: 1.55; color: #737d95; margin: 0; }

/* ── extra prose (the old body copy, kept for pages with more to say) ─────── */
.lp-prose { font-size: 15px; line-height: 1.75; color: #5f6986; max-width: 760px; }
.lp-prose h2 { font-size: 24px; margin: 34px 0 12px; }
.lp-prose ul { margin: 0 0 18px; padding-left: 22px; }
.lp-prose li { margin-bottom: 8px; }
.lp-prose a { color: #5e6cf4; }

/* ── other places ────────────────────────────────────────────────────────── */
/* Useful internal links, so they stay — but styled deliberately rather than left
   looking like a stray line of unstyled anchors under the process cards. */
.lp-others { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--lp-line); }
.lp-others .lp-eyebrow { margin-bottom: 12px; }
.lp-others-list { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lp-others-list a {
  font-size: 13px; font-weight: 650; color: #5e6cf4; text-decoration: none; white-space: nowrap;
}
.lp-others-list a:hover { text-decoration: underline; }

/* ── prose ────────────────────────────────────────────────────────────────── */
/* Reading measure, so the local SEO copy stays a designed section rather than a
   full-width wall of text. */
.lp-prose { max-width: 720px; }

/* Only shown when somebody picks a language this place is not written in. */
.lp-notyet {
  background: #fff8e6; border-left: 3px solid #e0a800; border-radius: 0 8px 8px 0;
  padding: 11px 15px; margin: 0 0 18px; font-size: 14px; color: #6b5410;
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1050px) {
  .lp-shell { width: min(900px, 90vw); }
  .lp-hero-grid { gap: 32px; }
  /* Copy across the top, then cards and price side by side — the three-column row is
     too tight below ~1050px and the price figure starts wrapping. */
  .lp-plan { grid-template-columns: 1.35fr .65fr; }
  .lp-plan .lp-copy { grid-column: 1 / -1; }
  .lp-plan .lp-copy p { max-width: 60ch; }
  .lp-trust { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .lp-hero { padding-top: 38px; }
  .lp-hero-grid, .lp-local, .lp-remote { grid-template-columns: 1fr; }
  /* Single column below ~820px: cards stay 2 × 2, price panel goes full width beneath. */
  .lp-plan { grid-template-columns: 1fr; }
  .lp-plan .lp-copy { grid-column: auto; }
  .lp-cards { grid-template-columns: repeat(2, 1fr); }
  .lp-trust-cards { grid-template-columns: repeat(2, 1fr); }
  .lp-process { grid-template-columns: repeat(2, 1fr); }
  .lp-step:nth-child(3) { border-left: 0; }
  .lp-step:nth-child(3), .lp-step:nth-child(4) { border-top: 1px solid #edf0f6; }
}
@media (max-width: 820px) {
  /* Badge tucks inside the image once the hero stacks, so it cannot hang off the edge
     of a full-width photo and trigger horizontal overflow. */
  .lp-badge { right: 12px; bottom: 12px; }
}
@media (max-width: 560px) {
  .lp-shell { width: min(100% - 28px, 520px); }
  .lp h1 { font-size: 42px; }
  .lp-badge { position: static; margin-top: 14px; }
  .lp-lead { font-size: 14px; }
  .lp-benefits { gap: 13px; }
  .lp-section { padding: 34px 0; }
  .lp-section-head h2, .lp-copy h2 { font-size: 28px; }
  .lp-cards, .lp-trust-cards, .lp-process { grid-template-columns: 1fr; }
  .lp-step + .lp-step, .lp-step:nth-child(3), .lp-step:nth-child(4) {
    border-left: 0; border-top: 1px solid #edf0f6;
  }
  .lp-cta { align-items: flex-start; flex-direction: column; padding: 24px; }
}

/* The mockup's .btn:hover translate is motion for its own sake. */
@media (prefers-reduced-motion: reduce) {
  .lp-btn { transition: none; }
  .lp-btn:hover { transform: none; }
}