/* ── Contact popup ───────────────────────────────────────────────────
   Penpot board `contact_POPUP` — file cf4308d2-1cfa-81f3-8008-91508b7cce7f,
   shape 8e41c63d-d08f-5cd8-a605-df11ec616da9, 580 x 720, #FFFFFF, radius 70.

   Shared by both tours on purpose. The rest of `360/` is two forks with
   duplicated assets, but this is one component drawn once, and two copies
   of it would drift the first time anyone polishes one of them.

   Every number here is read from the board, never estimated. The card is a
   fixed 580 x 720 canvas of absolutely positioned nodes, which is what the
   board is — and it is the SAME design as the site's own contact block in
   `corpus2026.css`, re-anchored: x 892 -> 99 and y minus 73, node for node
   (177/104, 276/203, 244/171, 522/449, 561/488, 685/612). Where a decision
   was already taken there — the notebook rules, the centred `enviar` label
   — this file ports it rather than re-deciding it.

   `--cpk` is the size of one design unit, the same trick `--k` plays in
   `corpus2026.css`.

   No inline `style` attributes: the tours ship `style-src 'self'` in their
   .htaccess, so every coordinate is a class, not a custom property passed
   through markup.
   ──────────────────────────────────────────────────────────────────── */

.cp {
  position: fixed;
  inset: 0;
  /* Above everything both tours stack: their ceiling is 400 (the menus at
     100/150, the catalog and its chrome at 200/300/400). At 60 the burger
     button drew straight over the scrim. */
  z-index: 500;
  display: grid;
  place-items: center;
  /* INVENTED, and said out loud: `contact_POPUP` is a standalone board, so
     the file says nothing about what sits behind it. A white card over a
     lit panorama needs something to sit on; this is the most neutral scrim
     there is, and it is the one value in this file with no source. */
  background: rgba(0, 0, 0, 0.5);
}

/* `display: grid` above would otherwise beat the `hidden` attribute. */
.cp[hidden] { display: none; }

.cp-card {
  /* One design unit. Capped at 1px because the board is drawn at 1:1, and
     shrinking below that only when the viewport cannot hold 580 x 720 with
     a 24 margin. There is NO mobile design for this popup: the card scales
     whole instead of reflowing, because a reflow would be invention. */
  --cpk: min(1px, (100vw - 48px) / 580, (100svh - 48px) / 720);

  /* The board's per-node tracking — 0.96 at 24, 0.8 at 20, 0.64 at 16, 0.48
     at 12 — is 0.04em exactly at every size. It is a TOKEN and not an
     inherited declaration on purpose: `letter-spacing` computes to an
     absolute length where it is written, so declaring it once on the card
     hands every child the card's own 0.04 x 16 = 0.64px. Measured: it did,
     on all nine text nodes. As a custom property it is substituted per
     element and resolves against that element's font-size, which is why
     `corpus2026.css` carries it as `--fl-track` too. */
  --cp-track: 0.04em;

  position: relative;
  width: calc(580 * var(--cpk));
  height: calc(720 * var(--cpk));
  border-radius: calc(70 * var(--cpk));
  background: #fff;
  color: #000;
  font-family: 'Lato', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.2;
}

/* The tours have no global border-box, and the fields need one: their height
   is the distance down to the rule (32 = one 24 line plus 8 of air), padding
   included. With content-box they measured 40 and hung 8 past the rule. */
.cp,
.cp *,
.cp *::before {
  box-sizing: border-box;
}

.cp-card > *,
.cp-form > * {
  position: absolute;
  margin: 0;
}

.cp-form {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* `X` at 511,37 (17 x 29) — a Lato 400 capital X in the board, not a
   multiplication sign, so it stays a letter here too. */
.cp-close {
  /* `.cp-form` spans the whole card and comes later in the DOM, so without
     this it paints over the X and eats its click — invisibly, because the
     form has no background. Measured: Playwright could not click the button
     at all, "form intercepts pointer events". */
  z-index: 1;
  left: calc(511 * var(--cpk));
  top: calc(37 * var(--cpk));
  width: calc(17 * var(--cpk));
  height: calc(29 * var(--cpk));
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  font-family: inherit;
  font-size: calc(24 * var(--cpk));
  font-weight: 400;
  letter-spacing: var(--cp-track);
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

/* The glyph's own box is 17 x 29, which is a third of a finger. The hit area
   grows around it without moving a single pixel: the pseudo-element paints
   nothing, it only catches the pointer. */
.cp-close::before {
  content: '';
  position: absolute;
  inset: calc(-14 * var(--cpk));
}

.cp-title {
  left: calc(99 * var(--cpk));
  top: calc(104 * var(--cpk));
  font-size: calc(24 * var(--cpk));
  font-weight: 400;
  letter-spacing: var(--cp-track);
}

/* `Line 6` and `Line 7` — 345 wide, 0.5 of stroke. The message's three
   (347, 391, 437) are deliberately NOT here: the textarea paints them
   itself, below. */
.cp-rule {
  left: calc(99 * var(--cpk));
  width: calc(345 * var(--cpk));
  height: calc(0.5 * var(--cpk));
  background: #000;
}

.cp-rule--nombre { top: calc(203 * var(--cpk)); }
.cp-rule--email  { top: calc(273 * var(--cpk)); }

.cp-field {
  left: calc(99 * var(--cpk));
  width: calc(345 * var(--cpk));
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  font-family: inherit;
  font-size: calc(20 * var(--cpk));
  font-weight: 400;
  letter-spacing: var(--cp-track);
  line-height: 1.2;
  appearance: none;
}

/* The board draws the three placeholders at #000 with 0.25 of opacity. */
.cp-field::placeholder {
  color: rgba(0, 0, 0, 0.25);
  opacity: 1;
}

.cp-field:focus-visible {
  outline: calc(1 * var(--cpk)) solid rgba(0, 0, 0, 0.35);
  outline-offset: calc(2 * var(--cpk));
}

.cp-field--nombre {
  top: calc(171 * var(--cpk));
  height: calc(32 * var(--cpk));
  padding-bottom: calc(8 * var(--cpk));
}

.cp-field--email {
  top: calc(241 * var(--cpk));
  height: calc(32 * var(--cpk));
  padding-bottom: calc(8 * var(--cpk));
}

/* Ported from `.fl-contact-msg`, decision and all (Denis, 31-ago-2026:
   the text is written ON the lines, like a notebook, so the rules travel
   with the text when it scrolls — which fixed rules cannot do). Line box
   121/3, each with its rule at the bottom, the last one landing on the
   board's own 437. The uniform step is invention: the board's three rules
   sit at 347, 391 and 437, which is not an even ladder.

   The rule is 1px at 50%, not `0.5 * --cpk`: a subpixel stroke inside a
   repeating pattern of fractional period rasterises differently on each
   turn, and at cpk < 1 some of the rules simply vanish. */
.cp-field--msg {
  --cp-cuaderno: calc(121 * var(--cpk) / 3);
  --cp-raya: calc(var(--cp-cuaderno) - 1px);

  top: calc(316 * var(--cpk));
  height: calc(121 * var(--cpk));
  resize: none;
  overflow: auto;
  line-height: var(--cp-cuaderno);
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 var(--cp-raya),
    rgba(0, 0, 0, 0.5) var(--cp-raya) var(--cp-cuaderno));
  background-attachment: local;
}

/* The board puts the counter at 409,449 with 35 of width, so its right
   edge dies at 444 — the right edge of the rules. It is anchored by that
   edge, not by the left one, so a longer label grows inwards. */
.cp-count {
  right: calc(136 * var(--cpk));
  top: calc(449 * var(--cpk));
  font-size: calc(12 * var(--cpk));
  letter-spacing: var(--cp-track);
  color: rgba(0, 0, 0, 0.25);
}

/* `Rectangle 4` (99,488 · 82 x 36 · #444444 · radius 15) plus its label.
   The label is centred, which is what `corpus2026.css` settled on after
   measuring: the board's 18 of left offset is only symmetric for the
   board's own text width, and with our Lato it reads off-centre. */
.cp-send {
  left: calc(99 * var(--cpk));
  top: calc(488 * var(--cpk));
  width: calc(82 * var(--cpk));
  height: calc(36 * var(--cpk));
  padding: 0;
  border: 0;
  border-radius: calc(15 * var(--cpk));
  background: #444;
  color: #fffefa;
  font-family: inherit;
  font-size: calc(16 * var(--cpk));
  font-weight: 400;
  letter-spacing: var(--cp-track);
  text-align: center;
  cursor: pointer;
}

/* 99,612 — Light 300 with `WhatsApp` in Regular 400. The underline is a
   loose node in the board (`link` / `Line 3`, 260,636 · 98 wide · 1 of
   stroke), which is 24 under the text top: the text's own underline. */
.cp-wa {
  left: calc(99 * var(--cpk));
  top: calc(612 * var(--cpk));
  font-size: calc(20 * var(--cpk));
  font-weight: 300;
  letter-spacing: var(--cp-track);
  color: #000;
}

.cp-wa a {
  font-weight: 400;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: calc(1 * var(--cpk));
  text-underline-offset: calc(5 * var(--cpk));
}

/* The trap field. Out of sight but NOT `display: none`, which is the one a
   bot skips. It keeps the `position: absolute` every child of the form gets,
   with no coordinates: it sits wherever the flow left it, one pixel wide. */
.cp-trampa {
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

/* The acknowledgement, in the gap the board leaves between `enviar` (which
   ends at 524) and the WhatsApp line (612). INVENTED: the board draws no sent
   state and no error state, so this is placed, not measured — it borrows the
   body's own size and ink so it cannot introduce a value of its own. Empty at
   rest, so nothing paints until there is something to say. */
.cp-estado {
  left: calc(99 * var(--cpk));
  top: calc(536 * var(--cpk));
  width: calc(345 * var(--cpk));
  font-size: calc(16 * var(--cpk));
  letter-spacing: var(--cp-track);
  color: #000;
}

/* Labels the board does not draw — it shows placeholders only — but that
   a screen reader needs. Same helper as the site's `.fl-a11y`. */
.cp-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}