/* Sky Parc 4 reservation app.
   Tokens, type and spacing follow urbania.com.pa so this reads as the same
   company. Sora for display, Poppins for body, both self hosted. */

@font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800;
  font-display: swap; src: url('/fonts/sora.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/fonts/poppins-600.woff2') format('woff2'); }

:root {
  --ink: #474746;
  --link: #8a6a2e;
  --gold: #b8924b;
  --gold-soft: #efe3cc;
  --muted: #6f6d66;
  --sand: #dccbad;
  --paper: #f4f2ef;
  --white: #fff;
  --line: #e3ded5;
  --bad: #9d3b2f;
  --ok: #3f6b4a;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;

  --wrap: 1100px;
  --r: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15;
  letter-spacing: -0.01em; margin: 0 0 .6rem; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); }
p { margin: 0 0 1rem; }
a { color: var(--link); }
code { font-family: ui-monospace, Menlo, monospace; font-size: .88em;
  background: var(--white); border: 1px solid var(--line); padding: .05em .35em; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ------------------------------------------------------------------ masthead */

.mast {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  background: var(--white); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.mast-brand { display: block; line-height: 0; }
/* portrait wordmark: anchor on height, never width */
.mast-brand img { height: 46px; width: auto; display: block; }
.mast-title { display: flex; flex-direction: column; border-left: 1px solid var(--line);
  padding-left: 1.1rem; }
.mast-project { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: .02em; }
.mast-sub { font-size: .78rem; color: var(--muted); letter-spacing: .06em;
  text-transform: uppercase; }

.mast-switch { margin-left: auto; display: flex; gap: .3rem; }
.mast-switch a { font-size: .8rem; letter-spacing: .03em; text-decoration: none;
  color: var(--muted); padding: .4rem .8rem; border: 1px solid var(--line); }
.mast-switch a.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.mast-switch a:hover:not(.is-on) { border-color: var(--gold); color: var(--link); }

main { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem) 4rem; }

/* ------------------------------------------------------------------- chooser */

.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem; }
.pick-card { display: block; text-decoration: none; color: inherit; background: var(--white);
  border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: 1.6rem 1.8rem;
  transition: transform .15s, box-shadow .15s; }
.pick-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(71,71,70,.12); }
.pick-kicker { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; }
.pick-card h2 { margin: .3rem 0 1rem; }
.pick-card dl { display: flex; flex-wrap: wrap; gap: 0 1.8rem; margin: 0 0 1.3rem; }
.pick-card dt { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); }
.pick-card dd { margin: 0 0 .6rem; font-weight: 500; }
.pick-cta { display: inline-block; font-family: var(--font-display); font-weight: 600;
  font-size: .9rem; color: var(--white); background: var(--link); padding: .7rem 1.3rem; }

/* ---------------------------------------------------------------------- hero */

.hero { padding: clamp(2.5rem, 7vw, 4.5rem) 0 2.5rem; }
.kicker { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: .9rem; }
.lede { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--muted); max-width: 56ch; }

.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0 2.5rem;
  padding: 1.5rem 0 0; margin: 1.5rem 0 0; border-top: 1px solid var(--line); }
.hero-facts li { font-size: .84rem; color: var(--muted); }
.hero-facts strong { display: block; font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------- steps */

.step { border-top: 1px solid var(--line); padding: 2.5rem 0; }
.step.is-locked { opacity: .38; pointer-events: none; filter: grayscale(.4); }
.step.is-locked .step-n { background: var(--line); color: var(--muted); }

.step-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .5rem; }
.step-n { flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold); color: var(--white); font-family: var(--font-display);
  font-weight: 600; font-size: .9rem; display: grid; place-items: center; }
.step-head h2 { margin: 0; }
.step-note { color: var(--muted); font-size: .92rem; max-width: 62ch; }

/* --------------------------------------------------------------------- stack */

.legend { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.4rem 0 1rem;
  font-size: .8rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: .45rem; }
/* swatches mirror the unit colours without inheriting .unit's flex sizing */
.legend .sw { width: 14px; height: 14px; flex: none; border: 1px solid rgba(0,0,0,.14); }
.legend .sw.is-free { background: var(--gold); }
.legend .sw.is-blocked { background: #eae6df; }
.legend .sw.is-taken { background: var(--ink); }
.legend .sw.is-paid { background: var(--ok); }

.stack-wrap { overflow-x: auto; padding-bottom: .5rem; }
.stack { min-width: 620px; display: flex; flex-direction: column; gap: 3px;
  background: var(--white); border: 1px solid var(--line); padding: 12px; }

.floor { display: flex; align-items: stretch; gap: 3px; }
.floor-tag { flex: none; width: 34px; display: grid; place-items: center;
  font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.floor-units { flex: 1; display: flex; gap: 3px; }

.unit {
  /* flex-grow carries the real area, so a floor is drawn to scale */
  min-width: 0; border: 0; padding: 0; font: inherit; cursor: default;
  height: 30px; display: grid; place-items: center;
  font-size: .72rem; font-weight: 500; letter-spacing: .04em;
  background: var(--gold-soft); color: var(--muted);
  border: 1px solid transparent; transition: transform .12s, box-shadow .12s;
}
.unit .l { pointer-events: none; }

.unit.is-free { background: var(--gold); color: var(--white); cursor: pointer; }
.unit.is-free:hover, .unit.is-free:focus-visible {
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(184,146,75,.4); }
.unit.is-blocked { background: #eae6df; color: #a9a49b; }
.unit.is-taken { background: var(--ink); color: #cfcbc4; }
.unit.is-paid { background: var(--ok); color: var(--white); }
.unit.is-sel { outline: 3px solid var(--ink); outline-offset: 1px; z-index: 2; }

.stack-empty { color: var(--muted); font-size: .9rem; }

/* --------------------------------------------------------------------- forms */

.picked { background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); padding: 1.1rem 1.3rem; margin: 1.3rem 0; }
.picked h3 { font-size: 1.3rem; margin: 0 0 .3rem; }
.picked dl { display: flex; flex-wrap: wrap; gap: 0 2rem; margin: .6rem 0 0; }
.picked dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); }
.picked dd { margin: 0 0 .5rem; font-weight: 500; }
.picked .price-note { font-size: .84rem; color: var(--muted); margin: .7rem 0 0;
  padding-top: .7rem; border-top: 1px dashed var(--line); }

.fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.2rem;
  margin: 1.4rem 0; }
label { display: flex; flex-direction: column; gap: .35rem; font-size: .78rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
input, select {
  font: inherit; font-size: .95rem; text-transform: none; letter-spacing: 0;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r); padding: .62rem .75rem;
  width: 100%;
}
input:focus, select:focus { border-color: var(--gold); outline: none;
  box-shadow: 0 0 0 3px rgba(184,146,75,.18); }
input[aria-invalid="true"] { border-color: var(--bad); }

.check { flex-direction: row; align-items: flex-start; gap: .7rem;
  text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--ink);
  font-weight: 400; line-height: 1.5; max-width: 70ch; }
.check input { width: 18px; height: 18px; flex: none; margin-top: .18rem; }

.btn { font: inherit; font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; border-radius: var(--r); padding: .85rem 1.6rem;
  cursor: pointer; transition: background .15s, color .15s; }
.btn-primary { background: var(--link); color: var(--white); }
.btn-primary:hover { background: #6f5423; }
.btn-primary[disabled] { background: var(--line); color: var(--muted); cursor: not-allowed; }
.btn-ghost { background: transparent; border-color: var(--link); color: var(--link); }

.err { color: var(--bad); font-size: .9rem; font-weight: 500; margin: .8rem 0 0; }

/* ------------------------------------------------------------------- payment */

.pay-summary { background: var(--white); border: 1px solid var(--line);
  padding: 1rem 1.3rem; margin: 1.3rem 0; display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: baseline; gap: .6rem; }
.pay-summary .amt { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; }
/* The hint sits underneath; the SDK's iframe stacks on top of it and hides it
   while the button list is mounted. When the secure overlay takes over and the
   container empties, the hint is what the buyer sees on the page behind it. */
.uc-wrap { position: relative; background: var(--white); border: 1px solid var(--line);
  padding: 1rem; min-height: 220px; display: grid; }
.uc-hint { grid-area: 1 / 1; align-self: center; margin: 0 auto; max-width: 46ch;
  text-align: center; color: var(--muted); font-size: .92rem; }
.uc { grid-area: 1 / 1; min-height: 190px; }
.pay-secure { font-size: .8rem; color: var(--muted); margin-top: 1rem; }

/* ------------------------------------------------------------------- receipt */

.receipt { background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--ok); padding: 1.6rem 1.8rem; }
.receipt h3 { font-size: 1.5rem; }
.receipt dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem;
  margin: 1.2rem 0 0; }
.receipt dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); }
.receipt dd { margin: 0; font-weight: 500; }

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

.foot { border-top: 1px solid var(--line); background: var(--white);
  padding: 2rem clamp(1rem, 4vw, 2.5rem); color: var(--muted); font-size: .82rem; }
.foot p { max-width: 80ch; margin: 0 auto .6rem; }
.foot-fine { font-size: .76rem; }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 700px) {
  .fields { grid-template-columns: 1fr; }
  .mast-brand img { height: 38px; }
  .hero-facts { gap: 0 1.6rem; }
  .picked dl { gap: 0 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ------------------------------------------------- image hero + gallery (v2)
   Added for the per-project image-led layout. Presentation only. Scoped to
   .hero-img / .gallery so the text-only fallback (certification pages) and the
   rest of the app are untouched. Full-bleed breakout because main is capped at
   --wrap. House rule: no em/en dashes in rendered copy. */

.hero-img {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: clamp(360px, 62vh, 680px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0;
  background: var(--ink);
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(26,25,23,.82) 0%, rgba(26,25,23,.35) 42%, rgba(26,25,23,.08) 70%, rgba(26,25,23,.28) 100%);
}
.hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(1.8rem, 5vw, 3.2rem) clamp(1rem, 4vw, 2rem) clamp(1.6rem, 4vw, 2.6rem);
  color: var(--white);
}
.hero-img .kicker { color: var(--gold-soft); }
.hero-img h1 { color: var(--white); font-size: clamp(2rem, 5.2vw, 3.4rem);
  text-shadow: 0 1px 24px rgba(0,0,0,.35); margin-bottom: .5rem; }
.hero-img .lede { color: rgba(255,255,255,.92); max-width: 50ch;
  text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.hero-img .hero-facts { border-top: 1px solid rgba(255,255,255,.22); }
.hero-img .hero-facts li { color: rgba(255,255,255,.82); }
.hero-img .hero-facts strong { color: var(--white); }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(.6rem, 1.5vw, 1rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) 0 0;
}
.gallery .shot { margin: 0; }
.gallery .shot img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--r); display: block;
}
.gallery .shot figcaption {
  font-size: .76rem; color: var(--muted); letter-spacing: .02em;
  padding: .4rem .1rem 0; line-height: 1.4;
}
/* The first gallery tile (exterior/facade) spans two columns when there is room,
   so each project leads with its building. */
@media (min-width: 720px) { .gallery .shot:first-child { grid-column: span 2; } }