/*
  Contact ("Let's work Together", node 6641:4267 in Figma) — pixel-matched the same
  way as the hero and about-intro: one relatively-positioned section at the 1920px
  reference, with the title and decorative shapes at their exact Figma x/y, fluidly
  scaled with clamp(). The form itself is built from Figma's real auto-layout gaps
  (same call header.css makes for the navbar) rather than copied coordinates, since
  Figma modeled it as flex rows with consistent gaps, not free-floating fields.

  The form posts to the same Formspree endpoint the old Bootstrap site used
  (public_html/form.html) — no server of our own, so no reason to switch providers.
*/
.contact {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/*
  Base height matches the 1920x1263 Figma reference (title + form + the fixed
  tower/ground composition below them). --shift is 0 by default; assets/js/
  contact-builder.js raises it when the player's built stack needs more headroom
  above the ground (see .contact-shift below) — adding it here, in the same
  property the shift-group reads, is what makes the section actually grow instead
  of the taller composition just overflowing past its bottom edge.
*/
.contact-hero {
  position: relative;
  height: calc(clamp(658px, 65.781vw, 1263px) + var(--shift, 0px));
  background: linear-gradient(
    to bottom,
    var(--color-bg) calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) + var(--shift, 0px)),
    var(--color-green-2) calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) + var(--shift, 0px))
  );
}

/*
  Below the ground, everything stays the same green all the way into the footer
  — the ground's own fill (.contact-ground) plus this gradient on .contact-hero
  cover the ground itself and the rest of this section, and this covers the
  site-signature strip between the section and .site-footer (which is already
  --color-green-2, so the three pieces read as one continuous band instead of
  dropping back to the page background in between). Scoped to this page via the
  `contact-page` body class set in contact.njk (bodyClass) rather than editing
  .site-signature directly, since that partial is shared by every other page,
  where it needs to stay on the dark background.
*/
.contact-page .site-signature {
  background-color: var(--color-green-2);
  color: var(--color-bg);
}

/* .site-footer's own margin-top is the breathing room other (dark-background)
   pages need before the green footer starts — here everything is already the
   same green, so that gap would just be an unwanted dark seam. */
.contact-page .site-footer {
  margin-top: 0;
}

/*
  Title: same "duplicate text, offset in a second color" trick as .digital-designer
  and .about-intro__title, but here Figma's own text already breaks into two lines
  ("Let's work" / "Together") instead of one, so the lines are stacked in normal
  flow inside a single absolutely-positioned <h1> rather than positioned
  individually — simpler, and keeps the two lines as one semantic heading.
*/
.contact-hero__title {
  position: absolute;
  left: clamp(97px, 9.688vw, 186px);
  top: clamp(90px, 9.01vw, 173px);
  width: clamp(263px, 26.302vw, 505px);
  margin: 0;
  font-family: var(--font-regular);
  font-weight: normal;
  letter-spacing: 0.03em;
}

/*
  "Let's work" is center-aligned within the title's own width now (Figma added
  text-center to just this line, not "Together"), so the two lines read as
  intentionally off-center from each other rather than both flush left.
*/
.contact-hero__title-line {
  display: block;
  text-align: center;
  color: var(--color-pink-2);
  font-size: clamp(25px, 2.5vw, 48px);
}

.contact-hero__title-line--accent {
  text-align: left;
  color: var(--color-mint-2);
  font-size: clamp(54px, 5.363vw, 102.968px);
  text-shadow: clamp(5px, 0.469vw, 9px) 0 0 var(--color-pink-2);
}

/*
  Field layout: Figma modeled this with real auto-layout (flex + gap), so it's
  reproduced as flex rows/gaps rather than absolute-positioned fields — the two
  columns are exactly (911px - 111px gap) / 2 = 400px each, so flex:1 on the
  fields reproduces that split without hardcoding the width a second time.
*/
.contact-form {
  position: absolute;
  left: clamp(467px, 46.667vw, 896px);
  top: clamp(98px, 9.844vw, 189px);
  width: clamp(474px, 47.448vw, 911px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(13px, 1.25vw, 24px);
}

.contact-form__row {
  display: flex;
  width: 100%;
  gap: clamp(58px, 5.781vw, 111px);
}

.contact-form__field {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.contact-form__field label {
  font-family: var(--font-regular);
  font-size: clamp(11px, 1.144vw, 21.966px);
  letter-spacing: 0.03em;
  color: var(--color-cream);
}

.contact-form__field input,
.contact-form__field textarea {
  margin-top: clamp(29px, 2.917vw, 56px);
  padding: 0 0 clamp(4px, 0.4vw, 8px);
  background: transparent;
  border: none;
  border-bottom: clamp(2px, 0.2vw, 4px) solid var(--color-green-2);
  color: var(--color-cream);
  font-family: var(--font-regular);
  font-size: clamp(9px, 0.9vw, 17px);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-mint-2);
}

.contact-form__field--message {
  width: 100%;
}

.contact-form__field--message textarea {
  margin-top: clamp(42px, 4.219vw, 81px);
  resize: vertical;
  min-height: clamp(48px, 4.5vw, 86px);
  font-family: inherit;
}

/*
  Figma's Send button is now the same "Button / Primary" component the header CTA
  uses (node 6655:202), just a different instance — hugs its own text via padding
  rather than a fixed width, so it's sized that way here too instead of reusing
  .btn-primary's fixed clamp(141px, ..., 272px) width, which was tuned for
  "Contact Me :)", not "Send".
*/
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(5px, 0.521vw, 10px) clamp(22px, 2.188vw, 42px);
  background-color: var(--color-mint-2);
  color: var(--color-ink);
  border: none;
  border-radius: 999px;
  font-family: var(--font-regular);
  font-size: clamp(9px, 0.938vw, 18px);
  letter-spacing: 0.005em;
  transition: background-color 0.2s var(--ease-standard);
}

.contact-form__submit:hover {
  background-color: var(--color-green-2);
  color: var(--color-ink);
}

/*
  The build area (node 6655:175 in Figma — the tower and ground grouped as one
  unit — plus the 4 loose top-level rectangles, node 6641:4281/4283/4289/4291): a
  fixed decorative tower standing on a full-width green ground, plus loose pieces
  the player can drag anywhere on that ground — including stacking them on each
  other, which is why they're plain absolutely-positioned elements rather than
  anything grid/flow-based.

  .contact-shift is the one thing assets/js/contact-builder.js actually moves: a
  single `translateY(var(--shift))` on this wrapper carries the ground, the tower,
  and every piece down together when the built stack needs more room (requirement
  from the brief: "toda la base... baja de posición"), instead of recalculating
  each piece's own position. Everything inside keeps its coordinates local to this
  wrapper, so the shift is the only thing that ever has to change.
*/
.contact-arena {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.contact-shift {
  position: absolute;
  inset: 0;
  transform: translateY(var(--shift, 0px));
}

.contact-tower {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.contact-tower__shape {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-tower__shape-inner {
  display: block;
}

.contact-tower__shape--2 { left: clamp(72px, 7.167vw, 137.61px); top: calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) - clamp(152px, 15.211vw, 292.06px)); width: clamp(30px, 3.017vw, 57.93px); height: clamp(30px, 3.017vw, 57.93px); }
.contact-tower__shape--2 .contact-tower__shape-inner { width: clamp(21px, 2.133vw, 40.963px); height: clamp(21px, 2.133vw, 40.963px); background-color: var(--color-mint-2); transform: rotate(45deg); }

.contact-tower__shape--3 { left: clamp(48px, 4.824vw, 92.63px); top: calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) - clamp(144px, 14.351vw, 275.532px)); width: clamp(22px, 2.2vw, 42.237px); height: clamp(22px, 2.2vw, 42.237px); }
.contact-tower__shape--3 .contact-tower__shape-inner { width: clamp(16px, 1.555vw, 29.866px); height: clamp(16px, 1.555vw, 29.866px); background-color: var(--color-pink-2); transform: rotate(135deg); }

.contact-tower__shape--4 { left: clamp(47px, 4.68vw, 89.87px); top: calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) - clamp(175px, 17.492vw, 335.85px)); width: clamp(31px, 3.118vw, 59.869px); height: clamp(31px, 3.118vw, 59.869px); }
.contact-tower__shape--4 .contact-tower__shape-inner { width: 100%; height: 100%; background-color: var(--color-green-2); }

.contact-tower__shape--5 { left: clamp(57px, 5.742vw, 110.24px); top: calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) - clamp(88px, 8.796vw, 168.88px)); width: clamp(29px, 2.902vw, 55.718px); height: clamp(29px, 2.902vw, 55.718px); }
.contact-tower__shape--5 .contact-tower__shape-inner { width: clamp(21px, 2.133vw, 40.963px); height: clamp(21px, 2.133vw, 40.963px); background-color: var(--color-mint-2); transform: rotate(60.88deg); }

.contact-tower__shape--6 { left: clamp(54px, 5.372vw, 103.15px); top: calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) - clamp(122px, 12.161vw, 233.49px)); width: clamp(34px, 3.365vw, 64.595px); height: clamp(34px, 3.365vw, 64.595px); }
.contact-tower__shape--6 .contact-tower__shape-inner { width: 100%; height: 100%; background-color: var(--color-green-2); }

.contact-tower__shape--7 { left: clamp(39px, 3.854vw, 74px); top: calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) - clamp(59px, 5.883vw, 112.95px)); width: clamp(59px, 5.908vw, 113.435px); height: clamp(59px, 5.908vw, 113.435px); }
.contact-tower__shape--7 .contact-tower__shape-inner { width: 100%; height: 100%; background-color: var(--color-green-2); }

/*
  A second, mostly-mirrored tower on the right (Figma node ids 6663:215-221,
  added alongside the original 6641:* set) — same glued-to-ground technique.
  --14 is the mint counterpart of --7's big green square, sitting at the exact
  same height on the other side.
*/
.contact-tower__shape--8 { left: clamp(365px, 36.533vw, 701.44px); top: calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) - clamp(88px, 8.809vw, 169.14px)); width: clamp(29px, 2.916vw, 55.994px); height: clamp(29px, 2.917vw, 56px); }
.contact-tower__shape--8 .contact-tower__shape-inner { width: clamp(20px, 2.02vw, 38.797px); height: clamp(21px, 2.104vw, 40.395px); background-color: var(--color-pink-2); transform: rotate(135.13deg); }

.contact-tower__shape--9 { left: clamp(387px, 38.695vw, 742.94px); top: calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) - clamp(144px, 14.376vw, 276.01px)); width: clamp(21px, 2.135vw, 41px); height: clamp(35px, 3.542vw, 68px); }
.contact-tower__shape--9 .contact-tower__shape-inner { width: clamp(35px, 3.542vw, 68px); height: clamp(21px, 2.135vw, 41px); background-color: var(--color-mint-2); transform: rotate(90deg); }

.contact-tower__shape--10 { left: clamp(364px, 36.403vw, 698.94px); top: calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) - clamp(124px, 12.401vw, 238.1px)); width: clamp(16px, 1.56vw, 29.947px); height: clamp(16px, 1.56vw, 29.947px); }
.contact-tower__shape--10 .contact-tower__shape-inner { width: 100%; height: 100%; background-color: var(--color-pink-2); }

.contact-tower__shape--11 { left: clamp(374px, 37.445vw, 718.94px); top: calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) - clamp(161px, 16.146vw, 310.01px)); width: clamp(19px, 1.875vw, 36px); height: clamp(18px, 1.771vw, 34px); }
.contact-tower__shape--11 .contact-tower__shape-inner { width: 100%; height: 100%; background-color: var(--color-green-2); }

.contact-tower__shape--12 { left: clamp(356px, 35.622vw, 683.94px); top: calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) - clamp(149px, 14.948vw, 287px)); width: clamp(26px, 2.561vw, 49.176px); height: clamp(26px, 2.574vw, 49.427px); }
.contact-tower__shape--12 .contact-tower__shape-inner { width: clamp(19px, 1.875vw, 36px); height: clamp(18px, 1.771vw, 34px); background-color: var(--color-green-2); transform: rotate(-129.9deg); }

.contact-tower__shape--13 { left: clamp(375px, 37.497vw, 719.94px); top: calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) - clamp(108px, 10.838vw, 208.1px)); width: clamp(20px, 2.031vw, 39px); height: clamp(20px, 2.031vw, 39px); }
.contact-tower__shape--13 .contact-tower__shape-inner { width: 100%; height: 100%; background-color: var(--color-green-2); }

.contact-tower__shape--14 { left: clamp(346px, 34.632vw, 664.94px); top: calc(var(--ground-top, clamp(378px, 37.755vw, 724.895px)) - clamp(59px, 5.877vw, 112.83px)); width: clamp(59px, 5.908vw, 113.435px); height: clamp(59px, 5.908vw, 113.435px); }
.contact-tower__shape--14 .contact-tower__shape-inner { width: 100%; height: 100%; background-color: var(--color-mint-2); }

/*
  The ground: full section width (not just the tower's footprint), per the brief.
  Its `top` is set by assets/js/contact-builder.js as --ground-top, measured live
  from the Message field's own rendered bottom edge + 155px (Figma's gap between
  Rectangle 26 and the Message field) — not a hardcoded Figma y — so the ground
  stays correctly below the whole form even if the real rendered form height ever
  drifts from Figma's. The clamp() here is only the pre-JS/no-JS fallback.

  Every .contact-tower__shape's `top` above reads this SAME --ground-top (minus
  its own fixed distance-above-the-ground) instead of a frame-relative y, so the
  tower — grouped with the ground in Figma as one unit (node 6655:175) — always
  stays glued to it with zero gap, wherever --ground-top ends up.

  Flat fill now (the left-to-right fade from an earlier revision was dropped in
  Figma once the ground grew from a 40px strip to this 274px block).
*/
.contact-ground {
  position: absolute;
  left: 0;
  top: var(--ground-top, clamp(378px, 37.755vw, 724.895px));
  width: 100%;
  height: clamp(143px, 14.271vw, 274px);
  background-color: var(--color-green-2);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: clamp(13px, 1.25vw, 24px);
  padding-left: clamp(33px, 3.281vw, 63px);
  overflow: hidden;
  pointer-events: auto;
}

.contact-ground__hint {
  margin: 0;
  color: var(--color-bg);
  font-family: var(--font-regular);
  font-size: clamp(13px, 1.302vw, 25px);
  letter-spacing: 0.03em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s var(--ease-standard);
}

.contact-ground:hover .contact-ground__hint {
  opacity: 1;
}

/*
  Loose pieces: draggable (assets/js/contact-builder.js), so cursor/touch-action/
  user-select all signal "grab this" instead of the page's usual text-selection
  behavior. Resting positions below are the 4 loose rectangles from the Figma
  reference; new ones spawned with the F key get the same structure with inline
  custom properties instead of a numbered class.
*/
.contact-piece {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.15s var(--ease-standard);
}

.contact-piece:active,
.contact-piece.is-dragging {
  cursor: grabbing;
}

/* Dims on hover alone, and independently for the whole grab-to-drop span while
   dragging (contact-builder.js toggles .is-dragging on pointerdown/pointerup) —
   two separate triggers for the same feedback. */
.contact-piece:hover,
.contact-piece.is-dragging {
  opacity: 0.55;
}

.contact-piece__inner {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-piece--1 { left: clamp(257px, 25.658vw, 492.637px); top: clamp(361px, 36.056vw, 692.285px); width: clamp(39px, 3.905vw, 74.988px); height: clamp(39px, 3.905vw, 74.988px); }
.contact-piece--1 .contact-piece__inner { width: clamp(28px, 2.771vw, 53.202px); height: clamp(28px, 2.771vw, 53.202px); background-color: var(--color-pink-2); transform: rotate(-49.68deg); }

.contact-piece--2 { left: clamp(211px, 21.124vw, 405.584px); top: clamp(359px, 35.923vw, 689.729px); width: clamp(19px, 1.885vw, 36.183px); height: clamp(19px, 1.885vw, 36.183px); }
.contact-piece--2 .contact-piece__inner { width: clamp(14px, 1.385vw, 26.601px); height: clamp(14px, 1.385vw, 26.601px); background-color: var(--color-mint-2); transform: rotate(60.88deg); }

.contact-piece--3 { left: clamp(166px, 16.615vw, 319px); top: clamp(352px, 35.225vw, 676.314px); width: clamp(26px, 2.638vw, 50.644px); height: clamp(26px, 2.638vw, 50.644px); }
.contact-piece--3 .contact-piece__inner { width: 100%; height: 100%; background-color: var(--color-green-2); }

.contact-piece--4 { left: clamp(218px, 21.816vw, 418.86px); top: clamp(340px, 34.021vw, 653.212px); width: clamp(38px, 3.842vw, 73.777px); height: clamp(38px, 3.818vw, 73.3px); }
.contact-piece--4 .contact-piece__inner { width: 100%; height: 100%; background-color: var(--color-green-2); }

@media (max-width: 767px) {
  .contact-hero {
    height: auto;
    padding: 32px 20px 64px;
  }

  .contact-hero__title {
    position: static;
    width: auto;
    text-align: center;
  }

  .contact-form {
    position: static;
    width: auto;
    align-items: stretch;
    margin-top: var(--space-6);
  }

  .contact-form__row {
    flex-direction: column;
    gap: var(--space-4);
  }

  .contact-form__submit {
    align-self: flex-end;
  }

  .contact-arena {
    display: none;
  }
}