/* ==========================================================================
   Clicke — seven-scene vertical scroll site
   Geometry follows design/ and README.md verbatim. Every dimension inside a
   stage is expressed in cqw (1cqw = 1% of stage width) so the design scales
   as one unit.
   ========================================================================== */

:root {
  --yellow: #FEDC14;
  --amber:  #D88D26;
  --blue:   #3285C2;
  --lblue:  #A9D4EC;
  --muted:  #6C9CC0;
  --red:    #E4432F;
  --paper:  #f2efe9;

  /* The 16:9 stage. Width is capped so the stage never exceeds the viewport
     height at 16:9; height comes from aspect-ratio, and the scene takes its
     height from the stage. That keeps every scene exactly one stage tall so
     the seven stages stack edge to edge and the ribbon stays continuous.
     Note 100% (not 100vw) — vw includes the scrollbar and would push the
     stage off 16:9. */
  --stage-w: min(100%, calc(100vh * 16 / 9));

  --ribbon-opacity: 0.7;
  --ribbon-glass-opacity: 0.182; /* ribbon x 0.26 */
}

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

html {
  scroll-behavior: smooth;

  /* One continuous gradient for the whole page, in place of seven per-scene
     background blocks with a hard edge at every boundary. It runs through the
     same seven colours in the same order, each landing on its own scene's
     centre — scene N at (N - 0.5)/7 of the page — so every scene boundary
     falls mid-ramp and no edge exists to be seen.

     On the root element the positioning area is the document while the
     painting area is the whole canvas, so the end colours also extend into
     overscroll at both ends. */
  background:
    linear-gradient(to bottom,
      #2f3235  7.142857%,
      #343636 21.428571%,
      #393a38 35.714286%,
      #3e3e39 50%,
      #42413a 64.285714%,
      #47453c 78.571429%,
      #4c493d 92.857143%) no-repeat;
  background-color: #2f3235;
}

body {
  margin: 0;
  padding: 0;
  color: var(--paper);
  font-family: Jost, 'Helvetica Neue', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--lblue); text-decoration: none; transition: color 180ms ease; }
a:hover { color: var(--yellow); }

/* Off-screen store for the shared SVG geometry referenced by <use>. */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Scene + stage
   -------------------------------------------------------------------------- */

.scene {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

/* No background: the page gradient shows through. --scene-bg survives on each
   section, but only as the fill for the desk-screen backings that have to
   occlude the ribbon behind them. */
.stage {
  position: relative;
  width: var(--stage-w);
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
}

/* Shared furniture ------------------------------------------------------- */

/* The warm glow and the yellow wash light the top of the page once, above the
   hero — they are not scene furniture and no longer repeat.

   They sit outside the stage because the stage's size containment makes it a
   stacking context, which would isolate their screen blend and leave them
   compositing against nothing. Out here the backdrop is the page gradient
   itself, which is what they are meant to lighten. The trade is that cqw is
   not available, so the wrapper takes the stage's width and the two layers
   take their heights from percentage padding — which resolves against that
   same width, giving the design's 7.5% and 2.6% of the stage. */
.toplight {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: var(--stage-w);
  margin: 0 auto;
  pointer-events: none;
}

.glow,
.wash {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  mix-blend-mode: screen;
}

.glow {
  padding-top: 7.5%;
  background: radial-gradient(70% 100% at 50% 0%,
    rgba(228,150,44,0.62) 0%,
    rgba(216,141,38,0.34) 34%,
    rgba(216,141,38,0.10) 60%,
    rgba(0,0,0,0) 82%);
}

.wash {
  padding-top: 2.6%;
  background: linear-gradient(to bottom,
    rgba(254,220,20,0.22) 0%,
    rgba(216,141,38,0.08) 50%,
    rgba(0,0,0,0) 100%);
}

.floor {
  position: absolute;
  left: 7cqw;
  right: 7cqw;
  top: 48.86cqw;
  height: 0.19cqw;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(169,212,236,0) 0%,
    rgba(169,212,236,0.42) 1.2%,
    rgba(169,212,236,0.42) 98.8%,
    rgba(169,212,236,0) 100%);
}

/* --------------------------------------------------------------------------
   Ribbon
   -------------------------------------------------------------------------- */

.ribbon-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--ribbon-opacity);
  pointer-events: none;
}

.ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Each ribbon SVG carries both runs: the scene's authored desktop path and the
   straight portrait one. Only the breakpoint decides which is drawn, so both
   copies of a scene's ribbon — real and through-glass — switch together. */
.ribbon > .rb-m { display: none; }

/* Draw. Every ribbon path carries pathLength="1", so a single dash of length 1
   spans the whole path whatever its true length, and the offset is exactly the
   undrawn fraction. stroke-dasharray and stroke-dashoffset are inherited SVG
   properties, so setting them on the <svg> reaches the paths inside the <use>
   shadow tree, where a selector could not.

   --draw is written by app.js from total page scroll progress. Both copies of
   a scene's ribbon — the real one and the clipped copy inside the glass — are
   written in the same frame from the same number, so they cannot desync.

   Without .js-anim (no script, or reduced motion) neither property applies and
   the ribbon renders whole. */
.js-anim .ribbon {
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--draw, 0));
}

/* --------------------------------------------------------------------------
   Glass panel
   -------------------------------------------------------------------------- */

.panel {
  position: absolute;
  top: 9.4cqw;
  width: 57cqw;
  z-index: 5;
  border-radius: 1.1cqw;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.055);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1.4cqw 4cqw rgba(0,0,0,0.22);
  padding: 2.6cqw 3.6cqw;
  overflow: hidden;
}

.panel--left  { left: 5cqw; }
.panel--right { right: 5cqw; text-align: right; }
.panel--hero  { padding: 3.2cqw 3.6cqw 3.4cqw; }

/* CONTACTO holds the form, the consent and the disclosure, and is the one
   panel tall enough to reach the bottom of the stage. It starts 2.4cqw above
   the others so it still closes inside the frame — and its through-glass
   ribbon copy cancels the panel's own inset, so that has to follow. */
#contacto .panel { top: 7cqw; }
#contacto .panel > .panel__ribbon { top: calc(-7cqw - 1px); }

/* Second copy of the scene's ribbon, clipped by the panel, reading as the
   ribbon glowing faintly through frosted glass. Offsets cancel the panel's
   own inset and border so it lands exactly over the stage. */
.panel__ribbon {
  position: absolute;
  top: calc(-9.4cqw - 1px);
  width: 100cqw;
  height: 56.25cqw;
  z-index: 0;
  opacity: var(--ribbon-glass-opacity);
  pointer-events: none;
}

.panel--left  > .panel__ribbon { left:  calc(-5cqw - 1px); }
.panel--right > .panel__ribbon { right: calc(-5cqw - 1px); }

.panel__body { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Panel typography
   -------------------------------------------------------------------------- */

.heading {
  margin: 0;
  font-weight: 200;
  font-size: 5.2cqw;
  line-height: 1.14;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-wrap: pretty;
}

.heading--stack {
  display: flex;
  flex-direction: column;
  gap: 0.4cqw;
}

.heading em {
  font-style: normal;
  font-weight: 500;
  color: var(--lblue);
}

.tagline {
  margin: 1cqw 0 0;
  max-width: 30cqw;
  font-weight: 400;
  font-size: 1.7cqw;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: rgba(169,212,236,0.85);
}

.panel--right .tagline { margin-left: auto; }

.tagline--hero {
  max-width: none;
  white-space: nowrap;
  line-height: 1.3;
}

.bullets {
  margin: 1.4cqw 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7cqw;
}

.panel--right .bullets { align-items: flex-end; }

.bullets li {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85cqw;
  font-weight: 300;
  font-size: 1.45cqw;
  letter-spacing: 0.05em;
  color: rgba(242,239,233,0.82);
}

.panel--right .bullets li { flex-direction: row-reverse; }

.bullets svg {
  width: 0.95cqw;
  height: 0.95cqw;
  display: block;
  flex: none;
}

/* --------------------------------------------------------------------------
   Section entry

   Everything a scene holds except its ribbon rises a little and fades in when
   the scene reaches the viewport. app.js marks the elements and sets each
   one's delay, so the stagger follows document order — the panel first, then
   the world assembling around it — and adds .is-in to the scene once.

   The ribbon is deliberately excluded: it is scroll-driven, and a scene-entry
   transition on top of that would fight the draw.
   -------------------------------------------------------------------------- */

.js-anim .enter {
  opacity: 0;
  transform: translateY(2cqw);
  transition:
    opacity   1500ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js-anim .is-in .enter {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Scene content: figures, desks, accessories
   -------------------------------------------------------------------------- */

/* Horizontal placement rides in on --x from the markup rather than an inline
   left, so the portrait layout can reposition these without having to outrank
   an inline style. */
.figure,
.desk { left: var(--x); }

.figure {
  position: absolute;
  top: 39.86cqw;
  width: 4.19cqw;
  height: 9cqw;
  z-index: 3;
  display: block;
  overflow: visible;
}

/* ASISTENCIA and CONTACTO mount slightly larger and a touch lower. */
.figure--lg {
  top: 40.22cqw;
  width: 4.44cqw;
  height: 9.54cqw;
}

.figure--front { z-index: 4; }
.figure--lead  { z-index: 5; }

.desk {
  position: absolute;
  top: 40.39cqw;
  width: 19.5cqw;
  height: 9.3cqw;
  z-index: 3;
  display: block;
}

.flow-nodes {
  position: absolute;
  left: 6cqw;
  top: 33.5cqw;
  width: 30cqw;
  height: 5.2cqw;
  z-index: 3;
  display: block;
}

.scatter-grid {
  position: absolute;
  left: 62.8cqw;
  top: 35.85cqw;
  width: 30cqw;
  height: 2.55cqw;
  z-index: 3;
  display: block;
}

.assist-rings {
  position: absolute;
  left: 5.6cqw;
  top: 33.5cqw;
  width: 15cqw;
  height: 3.3cqw;
  z-index: 3;
  display: block;
  overflow: visible;
}

.contacto-mark {
  position: absolute;
  left: 66.5cqw;
  top: 5.6cqw;
  width: 11cqw;
  height: 11cqw;
  z-index: 3;
  display: block;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   Sticky header — one for the whole page. The mark's centre knockout is a
   real hole (SVG mask), so it reads correctly over every scene background.
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.header__stage {
  width: var(--stage-w); /* matches the scene stage, so cqw units line up */
  container-type: inline-size;
  display: flow-root;
}

.header__bar {
  margin: 3.4cqw 5cqw 0;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 1.05cqw;
  pointer-events: auto;
}

.header__mark {
  width: 2.3cqw;
  height: 2.3cqw;
  display: block;
  overflow: visible;
}

.header__word {
  font-size: 1.05cqw;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--paper);
  line-height: 1;
}

.header__bar:hover .header__word { color: var(--paper); }

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.form {
  margin-top: 1.8cqw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75cqw;
}

.form__field {
  width: 31cqw;
  height: 3.3cqw;
  border-radius: 1.65cqw;
  border: 1px solid rgba(169,212,236,0.30);
  background: rgba(169,212,236,0.055);
  padding: 0 1.6cqw;
  display: block;
  font-family: inherit;
  font-weight: 300;
  font-size: 1.4cqw;
  letter-spacing: 0.05em;
  color: var(--paper);
  transition: border-color 180ms ease;
}

.form__field::placeholder { color: rgba(242,239,233,0.48); opacity: 1; }
.form__field:focus { outline: none; border-color: rgba(169,212,236,0.60); }

/* Kept to the same pill as the inputs, per the design. The caret still
   scrolls into view; no scrollbar is allowed to break the pill. */
textarea.form__field {
  padding: 0.85cqw 1.6cqw;
  line-height: 1.6cqw;
  resize: none;
  overflow: hidden;
  scrollbar-width: none;
}

textarea.form__field::-webkit-scrollbar { display: none; }

/* Consent, in the fields' own materials: the same hairline and tinted glass,
   filled light blue when it is given. The label is the hit area, so the text
   is as clickable as the box. */
.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.85cqw;
  max-width: 31cqw;
  font-weight: 300;
  font-size: 1.15cqw;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: rgba(242,239,233,0.82);
  cursor: pointer;
}

.form__check {
  position: relative;
  top: 0.12cqw;          /* optically level with the first line's x-height */
  flex: none;
  width: 1.3cqw;
  height: 1.3cqw;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(169,212,236,0.30);
  border-radius: 0.32cqw;
  background: rgba(169,212,236,0.055);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}

.form__check:checked {
  background: var(--lblue);
  border-color: var(--lblue);
}

/* The tick is drawn from two borders rather than set in a glyph, so it scales
   with the box and needs no second font. */
.form__check:checked::after {
  content: '';
  position: absolute;
  left: 0.5cqw;
  top: 0.3cqw;      /* the tick's own centre, a hair high as a tick reads best */
  width: 0.3cqw;
  height: 0.62cqw;
  border: solid #2f3235;
  border-width: 0 0.16cqw 0.16cqw 0;
  transform: rotate(45deg);
}

.form__check:focus-visible {
  outline: 1px solid rgba(169,212,236,0.60);
  outline-offset: 0.2cqw;
}

.form__submit {
  margin-top: 0.7cqw;
  height: 3.3cqw;
  border: 0;
  border-radius: 1.65cqw;
  background: var(--lblue);
  padding: 0 2.6cqw;
  font-family: inherit;
  font-weight: 400;
  font-size: 1.4cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2f3235;
  cursor: pointer;
  transition: background 180ms ease;
}

.form__submit:hover { background: var(--yellow); }

.form__submit:disabled { opacity: 0.6; cursor: default; }
.form__submit:disabled:hover { background: var(--lblue); }

/* Errors show on the field itself, and outrank :focus so the border does not
   go quiet the moment the visitor returns to fix it. */
.form__field--error,
.form__field--error:focus,
.form__check--error,
.form__check--error:focus { border-color: var(--red); }

.form__status {
  margin: 0.4cqw 0 0;
  font-weight: 400;
  font-size: 1.15cqw;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: rgba(169,212,236,0.85);
}

.form__status--error { color: var(--red); }

/* Honeypot — kept out of sight and out of the tab order. */
.form__botcheck {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The disclosure speaks in the contact line's voice — same size, same colour —
   but keeps to the form's width so it reads as part of it rather than as the
   next thing down the panel. */
.form__note {
  margin: 1cqw 0 0;
  max-width: 31cqw;
  font-weight: 400;
  font-size: 1.15cqw;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: rgba(169,212,236,0.85);
}

.contact-line {
  margin: 1.6cqw 0 0;
  font-weight: 400;
  font-size: 1.15cqw;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: rgba(169,212,236,0.85);
}

/* --------------------------------------------------------------------------
   Reduced motion. app.js never adds .js-anim in this mode, so the ribbon is
   already whole and the contents are already in place; what is left is the
   page's own transitions.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  a,
  .form__field,
  .form__check,
  .form__submit { transition: none; }
}

/* --------------------------------------------------------------------------
   Mobile portrait

   The 16:9 stage is abandoned rather than letterboxed: the stage takes the
   whole portrait viewport, one scene per screen, the seven still in order and
   still exactly equal in height — which is what keeps the gradient's stops on
   their scenes' centres and the ribbon's seven shares equal.

   Everything stays in cqw, now 1% of the phone's width, so the design still
   scales as one unit. What cannot carry over are the ratios: 5.2cqw of a
   390px stage is a 20px heading. Each role gets its portrait value instead.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) and (orientation: portrait) {

  :root { --stage-w: 100%; }

  .stage {
    width: 100%;
    height: 100vh;
    height: 100svh;   /* discounts the mobile browser's retracting chrome */
    aspect-ratio: auto;
  }

  /* --- ribbon ----------------------------------------------------------- */

  .ribbon > .rb-d { display: none; }
  .ribbon > .rb-m { display: block; }

  /* --- header ----------------------------------------------------------- */

  .header__bar { margin: 6cqw 5cqw 0; gap: 3cqw; }
  .header__mark { width: 8cqw; height: 8cqw; }
  .header__word { font-size: 3.4cqw; letter-spacing: 0.3em; }

  /* --- panel: full width, one side, no zig-zag -------------------------- */

  .panel,
  .panel--left,
  .panel--right {
    top: 20cqw;
    left: 3.5cqw;
    right: 3.5cqw;
    width: auto;
    padding: 6cqw 5.5cqw 7cqw;
    border-radius: 3.5cqw;
    text-align: left;
  }

  .panel--hero { padding: 7cqw 5.5cqw 8cqw; }

  /* The alternating sides collapse, so the right-hand panels' mirrored
     alignment has to come back off. */
  .panel--right .tagline { margin-left: 0; }
  .panel--right .bullets { align-items: flex-start; }
  .panel--right .bullets li { flex-direction: row; }

  /* The through-glass copy still has to land exactly over the stage, so it
     cancels the portrait inset and matches the portrait stage box. */
  .panel--left > .panel__ribbon,
  .panel--right > .panel__ribbon {
    left: calc(-3.5cqw - 1px);
    right: auto;
    top: calc(-20cqw - 1px);
    width: 100cqw;
    height: 100svh;
  }

  #contacto .panel { top: 12cqw; }
  #contacto .panel > .panel__ribbon { top: calc(-12cqw - 1px); }

  /* --- type ------------------------------------------------------------- */

  .heading { font-size: 11cqw; letter-spacing: 0.14em; line-height: 1.1; }
  .heading--stack { gap: 1cqw; }

  .tagline { margin-top: 2.4cqw; max-width: none; font-size: 4.1cqw; }
  .tagline--hero { white-space: normal; }   /* no room for one line here */

  .bullets { margin-top: 4cqw; gap: 2.2cqw; }
  .bullets li { font-size: 3.6cqw; gap: 2.6cqw; }
  .bullets svg { width: 2.4cqw; height: 2.4cqw; }

  /* --- scene contents --------------------------------------------------- */

  /* The delegation and innovation choruses have nowhere to stand beside a
     full-width panel. The trio that carries the narrative stays, and a single
     desk stands in for the row. */
  .figure:has(use[href="#fig-muted"]) { display: none; }
  .desk ~ .desk { display: none; }

  /* Every scene's trio is one of each treatment, so the three place uniformly
     across all seven without per-scene values. */
  .figure:has(use[href="#fig-outline-yellow"]) { left: 30cqw; }
  .figure:has(use[href="#fig-protagonist"])    { left: 47.4cqw; }
  .figure:has(use[href="#fig-outline-blue"])   { left: 64.8cqw; }

  .figure {
    top: auto;
    bottom: 7cqw;
    width: 14cqw;
    height: 30cqw;
  }

  /* ASISTENCIA and CONTACTO keep the pair stepping forward: larger, lower. */
  .figure--lg {
    bottom: 5.8cqw;
    width: 14.85cqw;
    height: 31.8cqw;
  }

  .floor {
    top: auto;
    bottom: 6.5cqw;      /* its top edge meets the figures' footing */
    left: 14cqw;
    right: 5cqw;
    height: 0.5cqw;
  }

  .desk {
    top: auto;
    bottom: 42cqw;
    left: 27cqw;
    width: 46cqw;
    height: 22cqw;
  }

  /* INNOVAR is the peak of the narrative and cannot collapse to one desk —
     that reads as MEDIR. Its three workstations stay, as a row receding up and
     to the right: each one smaller and higher than the last, overlapping the
     way a room does. Later rules carry more class weight than earlier ones, so
     the three cascade onto the same elements in order. */
  #innovar .desk ~ .desk { display: block; }

  /* One worker at the front desk, so the row reads as workstations in use
     rather than empty furniture. The two behind stay away: three more figures
     in that band, at phone width, is mush. Scaled and seated off the front
     desk's own box, in the proportions the desktop scene uses — and left ahead
     of the desk in document order, so the desk still paints over the body. */
  #innovar .figure:has(use[href="#fig-muted"]) {
    display: block;
    left: 25cqw;
    bottom: 39.7cqw;
    width: 8.6cqw;
    height: 18.4cqw;
  }

  #innovar .figure:has(use[href="#fig-muted"]) ~ .figure:has(use[href="#fig-muted"]) {
    display: none;
  }

  #innovar .desk {
    left: 20cqw;
    bottom: 38cqw;
    width: 40cqw;
    height: 19cqw;
  }

  #innovar .desk ~ .desk {
    left: 38cqw;
    bottom: 47cqw;
    width: 34cqw;
    height: 16cqw;
  }

  #innovar .desk ~ .desk ~ .desk {
    left: 54cqw;
    bottom: 55cqw;
    width: 28cqw;
    height: 13.3cqw;
  }

  .flow-nodes {
    top: auto;
    bottom: 66cqw;
    left: 27cqw;
    width: 46cqw;
    height: 9cqw;
  }

  /* Lifted clear of the receding desk row below it. */
  .scatter-grid {
    top: auto;
    bottom: 72cqw;
    left: 27cqw;
    width: 46cqw;
    height: 4cqw;
  }

  .assist-rings {
    top: auto;
    bottom: 44cqw;
    left: 27cqw;
    width: 40cqw;
    height: 10cqw;
  }

  /* Down at the ribbon's lane, so the line still threads the mark's west ring
     as it does on desktop — and clear of the tall CONTACTO panel. */
  .contacto-mark {
    top: auto;
    bottom: 8cqw;
    left: 2.7cqw;
    width: 14cqw;
    height: 14cqw;
  }

  /* --- form ------------------------------------------------------------- */

  /* The tightest the form goes before the fields start to crowd: the panel
     below is what has to fit, and this is the space that is not type. */
  .form { margin-top: 3.5cqw; gap: 1.8cqw; }

  .form__field {
    width: 100%;
    height: 11cqw;
    border-radius: 5.5cqw;
    padding: 0 5cqw;
    font-size: 3.7cqw;
  }

  textarea.form__field { padding: 3cqw 5cqw; line-height: 5cqw; }

  .form__submit {
    margin-top: 2.4cqw;
    height: 11cqw;
    border-radius: 5.5cqw;
    padding: 0 8cqw;
    font-size: 3.7cqw;
  }

  .form__consent {
    max-width: none;
    gap: 2.6cqw;
    font-size: 3.1cqw;
    line-height: 1.5;
  }

  .form__check {
    top: 0.4cqw;
    width: 4.6cqw;
    height: 4.6cqw;
    border-radius: 1.1cqw;
  }

  .form__check:checked::after {
    left: 1.78cqw;
    top: 1.05cqw;
    width: 1.05cqw;
    height: 2.2cqw;
    border-width: 0 0.55cqw 0.55cqw 0;
  }

  .form__check:focus-visible { outline-offset: 0.7cqw; }

  .form__status { margin-top: 1.5cqw; font-size: 3.1cqw; }

  .form__note { margin-top: 2.5cqw; max-width: none; font-size: 3.1cqw; line-height: 1.6; }

  .contact-line { margin-top: 3.5cqw; font-size: 3.1cqw; line-height: 1.6; }

  /* The entry rise is in cqw, so it needs a portrait value to stay legible:
     the phone's stage is a fifth of the desktop's width. */
  .js-anim .enter { transform: translateY(5cqw); }
}

/* The one viewport where the closing trio cannot stand: a 16:9 phone, where
   the CONTACTO panel — with a status message showing, which is the state that
   has to fit — reaches past their heads. Every taller phone keeps them.

   13/25 = 0.52 is just under 0.5209, the width-to-height ratio at which the
   clearance turns negative, so this covers every viewport that would collide
   and none that would not. The mark and the floor line stay: the panel clears
   both even here. */
@media (max-width: 760px) and (orientation: portrait) and (min-aspect-ratio: 13/25) {
  #contacto .figure { display: none; }
}

/* Screen-reader-only labels. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Standalone pages — the 404 and the privacy notice

   Documents, not scenes: no stage, no ribbon, no container queries. They take
   the page gradient from html, which a short document simply gets in one
   screenful, and the site's type and palette. Sizing is in rem and vw rather
   than cqw, because there is no stage here for a cqw to be 1% of.
   -------------------------------------------------------------------------- */

.doc {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  padding: clamp(2.5rem, 8vw, 5.5rem) 1.5rem clamp(3rem, 10vw, 7rem);
}

.doc__inner { width: 100%; max-width: 38rem; }

.doc__mark-link { display: inline-block; }

.doc__mark {
  display: block;
  width: clamp(3.25rem, 9vw, 4.5rem);
  height: clamp(3.25rem, 9vw, 4.5rem);
  overflow: visible;   /* the outer rings sit outside the 104-unit box */
}

.doc__title {
  margin: clamp(1.75rem, 5vw, 2.75rem) 0 0;
  font-weight: 200;
  font-size: clamp(1.8rem, 6.5vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-wrap: pretty;
  color: var(--paper);
}

.doc .doc__lead {
  margin: 1.15rem 0 0;
  max-width: 30rem;
  font-weight: 400;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(169,212,236,0.85);
}

/* Section headings are the bullet labels' weight rather than the heading's:
   this is a page to be read, not a scene to be looked at. */
.doc h2 {
  margin: clamp(1.9rem, 5vw, 2.6rem) 0 0;
  font-weight: 400;
  font-size: clamp(0.9rem, 2.3vw, 1rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lblue);
}

.doc h2 + p { margin-top: 0.7rem; }

.doc p {
  margin: 0.9rem 0 0;
  font-weight: 300;
  font-size: clamp(1rem, 2.5vw, 1.05rem);
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: rgba(242,239,233,0.82);
}

.doc .doc__updated {
  margin-top: clamp(2.2rem, 6vw, 3rem);
  font-size: 0.9rem;
  color: rgba(242,239,233,0.48);
}

.doc .doc__home {
  margin-top: clamp(2.2rem, 6vw, 3rem);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}