/* =====================================================================================================
   The Penthouse · The Founder  (/about/ and /es/nosotros/)
   Page CSS only: every selector is scoped under body[data-floor="penthouse"]. Tokens from /assets/site.css.
   Gold (--deco-*) is decoration only; text keeps the ink tokens. No 100vw, no infinite animation, no new
   HDR media: the city view is CSS + the art agent's SVGs (SDR), the display cases are abstract shapes (D13).
   ===================================================================================================== */

/* ---- 1  Intro: the page head and the service record, beside the window ---- */
body[data-floor="penthouse"] .ph-intro .page-head { padding-block: 0 var(--s-2); }
body[data-floor="penthouse"] .ph-intro .floor-sign { margin-block-end: var(--s-4); }
body[data-floor="penthouse"] .ph-intro h1 { max-width: 14ch; }

body[data-floor="penthouse"] .ph-record {
  margin: 0 0 var(--s-4);
  padding: 0;
  list-style: none;
  max-width: var(--max-text);
}
body[data-floor="penthouse"] .ph-record li {
  position: relative;
  padding-inline-start: 1.6rem;
  line-height: 1.5;
}
body[data-floor="penthouse"] .ph-record li + li { margin-block-start: var(--s-2); }
body[data-floor="penthouse"] .ph-record li::before {      /* gold diamond bullet (decor; the list itself is the cue) */
  content: "";
  position: absolute;
  inset-inline-start: 0.2rem;
  inset-block-start: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--deco-gold);
  transform: rotate(45deg);
}
body[data-floor="penthouse"] .ph-record-lead {
  margin: var(--s-5) 0 var(--s-3);
  font-weight: 600;
  color: var(--ink-1);
  max-width: var(--max-text);
}

/* ---- 2  The city view: a deco penthouse window with the display cases standing in front ----
   Decor only (aria-hidden). Text never sits on it: the far skyline carries the horizon haze colour. */
body[data-floor="penthouse"] .ph-view {
  display: block;
  place-items: normal;          /* .scene__art centres grid items; here every layer spans the full width */
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
}
body[data-floor="penthouse"] .ph-window {
  position: relative;
  width: 100%;
  overflow: clip;
  isolation: isolate;
  aspect-ratio: 16 / 11;
  border: 2px solid var(--deco-gold);
  border-radius: 50% 50% var(--radius-1) var(--radius-1) / 30% 30% var(--radius-1) var(--radius-1);
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, var(--deco-gold-hi), transparent 100%),
    radial-gradient(1px 1px at 31% 12%, var(--deco-gold-hi), transparent 100%),
    radial-gradient(1px 1px at 47% 27%, var(--deco-gold-hi), transparent 100%),
    radial-gradient(1.5px 1.5px at 63% 16%, var(--deco-gold-hi), transparent 100%),
    radial-gradient(1px 1px at 83% 30%, var(--deco-gold-hi), transparent 100%),
    radial-gradient(1px 1px at 9% 38%, var(--deco-gold-hi), transparent 100%),
    linear-gradient(180deg, var(--deco-sky-top) 0%, var(--deco-sky-mid) 64%, #2A3A3C 100%);
  box-shadow:
    0 0 0 4px #05080A,
    0 0 0 5px var(--deco-gold-lo),
    0 40px 70px -40px rgb(0 0 0 / 0.95);
}
body[data-floor="penthouse"] .ph-window__moon {
  position: absolute;
  inset-block-start: 14%;
  inset-inline-end: 16%;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #E8FFFC, var(--deco-window) 62%, var(--deco-gold-lo));
  box-shadow: 0 0 1.5rem 0.25rem var(--glow-window);
  z-index: 0;
}
body[data-floor="penthouse"] .ph-window .ph-window__layer {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  z-index: 1;
}
body[data-floor="penthouse"] .ph-window .ph-window__far { height: 72%; object-position: 22% 100%; }
body[data-floor="penthouse"] .ph-window .ph-window__mid { height: 54%; object-position: 64% 100%; z-index: 2; }
body[data-floor="penthouse"] .ph-window::before {          /* inner hairline, following the arch */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--deco-gold-faint);
  border-radius: inherit;
  z-index: 4;
  pointer-events: none;
}
body[data-floor="penthouse"] .ph-window::after {           /* mullions and transom (brass) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(33.333% - 2px), var(--deco-gold-lo) calc(33.333% - 2px),
      var(--deco-gold) 33.333%, var(--deco-gold-lo) calc(33.333% + 2px), transparent calc(33.333% + 2px)),
    linear-gradient(90deg, transparent calc(66.666% - 2px), var(--deco-gold-lo) calc(66.666% - 2px),
      var(--deco-gold) 66.666%, var(--deco-gold-lo) calc(66.666% + 2px), transparent calc(66.666% + 2px)),
    linear-gradient(180deg, transparent calc(34% - 2px), var(--deco-gold-lo) calc(34% - 2px),
      var(--deco-gold) 34%, var(--deco-gold-lo) calc(34% + 2px), transparent calc(34% + 2px)),
    linear-gradient(180deg, rgb(232 255 252 / 0.04), transparent 45%);   /* glass sheen */
}
body[data-floor="penthouse"] .ph-sill {                    /* the window ledge the cases stand on */
  position: relative;
  z-index: 1;
  height: 10px;
  margin-inline: -3%;
  background: linear-gradient(180deg, var(--deco-gold), var(--deco-gold-lo) 45%, var(--deco-gold-deep));
  border-radius: 2px;
  box-shadow: 0 10px 22px -8px rgb(0 0 0 / 0.9);
}
body[data-floor="penthouse"] .ph-view .ph-cases {
  position: relative;
  z-index: 2;
  display: block;
  width: 94%;
  max-width: none;
  max-height: none;
  height: auto;
  margin: -27% auto 0;          /* the cases stand in front of the lower window, on the room floor */
}
body[data-floor="penthouse"] .ph-floor {                   /* the room floor below the cases */
  height: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-block-start: -2px;
  background:
    linear-gradient(180deg, rgb(134 171 167 / 0.14), transparent 80%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgb(134 171 167 / 0.08) 46px 47px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000000 18%, #000000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000000 18%, #000000 82%, transparent);
}

/* ---- 3  Why he built it ---- */
body[data-floor="penthouse"] .ph-why {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 56rem) {
  body[data-floor="penthouse"] .ph-why { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); }
}
body[data-floor="penthouse"] .ph-why :is(p, si-p) { max-width: var(--max-text); }
body[data-floor="penthouse"] .ph-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--deco-gold-line);
}
body[data-floor="penthouse"] .ph-steps li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
  min-height: 3.25rem;
  padding-block: var(--s-2);
  border-block-end: 1px solid var(--hairline);
  font-weight: 600;
  color: var(--ink-1);
}
body[data-floor="penthouse"] .ph-steps li + li { margin-block-start: 0; }
body[data-floor="penthouse"] .ph-steps li::before {        /* brass plate with a stud (decor; the words carry it) */
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--deco-gold-hi) 0 0.2rem, var(--deco-gold) 0.2rem 0.3rem, transparent 0.32rem),
    radial-gradient(circle at 35% 30%, #111B1D, #05080A 70%);
  border: 1.5px solid var(--deco-gold-hi);
}

/* ---- 4  What we hold ourselves to: one deco card, four ledger rows (title | words) ----
   Rows instead of four cards, so one long answer never leaves three tall empty cards beside it. */
body[data-floor="penthouse"] .ph-pledges { margin-block-start: var(--s-5); padding-block: var(--s-2); }
body[data-floor="penthouse"] .ph-pledge {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-2) var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--hairline);
}
body[data-floor="penthouse"] .ph-pledge:last-child { border-block-end: 0; }
@media (min-width: 48rem) {
  body[data-floor="penthouse"] .ph-pledge { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: baseline; }
}
body[data-floor="penthouse"] .ph-pledge h3 { margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
body[data-floor="penthouse"] .ph-pledge__body { max-width: var(--max-text); }
body[data-floor="penthouse"] .ph-pledge__body :is(p, si-p) { color: var(--ink-2); }
body[data-floor="penthouse"] .ph-pledge__body :is(p, si-p):last-child { margin-block-end: 0; }

/* ---- 5  The book behind the app ---- */
body[data-floor="penthouse"] .ph-book {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 40rem) {
  body[data-floor="penthouse"] .ph-book { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s-6); }
}
body[data-floor="penthouse"] .ph-book .book-cover {
  width: min(100%, 12rem);
  margin: 0;
  justify-self: center;
}
body[data-floor="penthouse"] .ph-book .cover { display: block; }
body[data-floor="penthouse"] .ph-book .cta-row { margin-block-start: var(--s-4); }
body[data-floor="penthouse"] .ph-smallprint {
  max-width: var(--max-text);
  margin: var(--s-7) 0 0;
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--hairline);
}

/* Increase Contrast: drop the glows and sheen; keep the shapes. */
@media (prefers-contrast: more) {
  body[data-floor="penthouse"] .ph-window__moon { box-shadow: none; }
  body[data-floor="penthouse"] .ph-window { box-shadow: 0 0 0 1px var(--mark-2); }
}
/* Print: the art is decoration. */
@media print {
  body[data-floor="penthouse"] .ph-view { display: none; }
}

/* ---- Founder on Instagram: a door with his profile picture in place of the brass door glyph ---- */
body[data-floor="penthouse"] .ph-social { margin-block-start: var(--s-5); max-width: var(--max-text); }
body[data-floor="penthouse"] .ph-insta { display: inline-flex; padding-inline-start: 0.6rem; padding-block: 0.5rem; }
body[data-floor="penthouse"] .ph-insta::before { display: none; }
body[data-floor="penthouse"] .ph-insta__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1.5px var(--deco-gold);
}

/* LES demo: sample pay stub -> plan mapping. */
.les-demo{margin-top:2.5rem}
.les-demo h3{margin-bottom:.5rem}
.les-demo__grid{display:grid;gap:1rem;margin-top:1rem}
@media(min-width:48rem){.les-demo__grid{grid-template-columns:1.2fr 1fr}}
.les-doc{background:rgb(232 255 252 / 0.03);border:1px solid rgb(134 171 167 / 0.25);border-radius:12px;padding:1rem}
.les-doc__banner{margin:0 0 .75rem;font-weight:700}
.les-doc__rows{display:grid;gap:.25rem}
.les-row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:8px;color:inherit;font:inherit;padding:.5rem .6rem;cursor:pointer}
button.les-row:hover{background:rgb(134 171 167 / 0.08)}
.les-row[aria-pressed="true"]{background:rgb(134 171 167 / 0.16);border-color:#86ABA7}
.les-row--deduct{color:var(--ink-2,#86ABA7)}
.les-row--net{border-top:1px solid rgb(134 171 167 / 0.35);border-radius:0;font-weight:700;cursor:default;padding-top:.75rem;margin-top:.25rem}
.les-plan{background:rgb(232 255 252 / 0.03);border:1px solid rgb(134 171 167 / 0.25);border-radius:12px;padding:1rem}
.les-plan__label{margin:0 0 .75rem;font-weight:700}
.les-plan__dests{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem}
.les-plan__dests li{border:1px solid transparent;border-radius:8px;padding:.5rem .6rem;transition:border-color .15s,background .15s}
.les-plan__dests li.lit{background:rgb(134 171 167 / 0.16);border-color:#86ABA7}
.les-plan__note{margin:0;color:#86ABA7;min-height:2.5em}