/*
 * COPA MG — THE PHASE A LANDING.
 * ===========================================================================
 *
 * This sheet is loaded INSTEAD OF copa.css, never alongside it. That is the
 * whole reason it exists as a separate file rather than as a block appended to
 * the deck's stylesheet:
 *
 *   1. NO MG VOLT GREEN CAN REACH THIS PAGE. --accent (#c9ff28) is never
 *      referenced below. copa.css — which spends --accent on the bracket, the
 *      timeline, the market list and the old form's focus ring — is not loaded
 *      here at all, so there is no rule that could apply it. The absence is
 *      structural, not a matter of remembering.
 *
 *   2. The deck at /presentacion is untouched. It still loads copa.css and
 *      still renders exactly as it did in every meeting it has been shown in.
 *
 * @mg/design's tokens.css, base.css and components.css ARE still loaded, for
 * the reset, the Inter faces and the type primitives. The package is frozen and
 * nothing here modifies it: every Copa-specific value is a --cp-* token
 * declared below, in this file, owned by this application.
 *
 * ---------------------------------------------------------------------------
 * MOBILE IS THE DESIGN, NOT A BREAKPOINT
 * ---------------------------------------------------------------------------
 * Every rule below is written for a phone first. The two media queries at the
 * bottom EXPAND the composition; nothing shrinks. The hero in particular is a
 * genuinely different composition on each — a vertical poster on a phone, with
 * the scene below the lock-up; a landscape frame on a desktop, with the scene
 * beside it — because one arrangement cannot be both. The trophy is never
 * behind the type in either.
 *
 * ---------------------------------------------------------------------------
 * THE LIGHT IS A PHOTOGRAPH, NOT A GRADIENT
 * ---------------------------------------------------------------------------
 * The hero's spotlight, haze, floor and contact shadow are not drawn here. They
 * are photographic information carried in public/images/copa-escena.webp, built
 * by tools/build-hero-scene.py from the trophy mood reference with the CANONICAL
 * MG mark engraved into the pedestal.
 *
 * Three earlier passes tried to synthesise that scene with radial-gradients and
 * every one of them read as "a trophy PNG on a black page", because a gradient
 * has no volumetric scatter, no grain and no floor texture. CSS's job here is
 * now to place the plate, dissolve its edges, and carry its glow a little way
 * past them. It is not to invent the photography.
 *
 * ---------------------------------------------------------------------------
 * COLOUR
 * ---------------------------------------------------------------------------
 * Black, white, silver, and champagne ON EDGES ONLY — hairlines, crest
 * outlines, rims, a handful of small labels. Never a filled surface, never a
 * button, never body copy. V1 confined the warmth to two hairlines and came
 * back reading as a refined wireframe; the correction is to spend it more
 * widely without ever letting it become a plane.
 *
 * The brightness of this page still comes from the trophy's own metal, not from
 * the interface.
 *
 * ---------------------------------------------------------------------------
 * ONE ROOM, NOT FIVE SECTIONS
 * ---------------------------------------------------------------------------
 * There is deliberately no hairline between the hero, the eight places, the
 * form and the accordion. Rules between sections are what make a page read as
 * stacked blocks. Continuity is carried instead by the ground staying the same
 * black throughout and by a single soft glow behind the form, so scrolling
 * feels like moving through the room rather than past its furniture.
 */

/* --- The display face ----------------------------------------------------- */

/* PLAYFAIR DISPLAY 700 — the headline face, and the single largest visual
   change in this pass.
   @mg/design ships Inter 300-600 and no serif, and the package is frozen, so
   this is vendored into THIS APPLICATION's own public/fonts. It is SIL OFL 1.1
   (licence shipped alongside it at public/fonts/LICENSE-PlayfairDisplay.txt),
   latin subset, one weight, 23 KB — the whole cost of the identity.

   `swap` rather than `block`: the headline is the largest thing on the page and
   a blocked render leaves the composition empty. It reflows once, in the
   fraction of a second before a 23 KB font arrives from the same origin. */
@font-face {
  font-family: 'Playfair Display';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/playfair-display-700.woff2') format('woff2');
}

/* --- Copa-local tokens ---------------------------------------------------- */

.cp {
  /* Ground. Deeper than @mg/design's --bg (#080808), because a cinematic frame
     needs a true black for the lit areas to fall away to.

     Darkened again this pass, and it was measurable rather than a matter of
     taste: the art direction's unlit half sits at a median luminance of
     0.7/255, while #050506 computes to 5.3 — so the previous ground WAS the
     grey the composition kept reading as, before a single gradient was drawn
     on it. #020203 lands at 2.3 and lets the light be the only thing in the
     frame that is not black. */
  --cp-black: #020203;

  --cp-white: #f7f7f5;
  /* Measured off the reference headline. Not pure white — #fff on black is a
     glare, and the reference deliberately is not. */
  --cp-ivory: #f8f8f8;

  --cp-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* WHERE THE LIGHT IS, so the one supporting bloom and the vignette stay
     anchored to the photograph rather than to the middle of the page. The lamp,
     cone, haze and floor variables that used to live here are gone along with
     the gradients that read them — the light is in the plate now. */
  --cp-light-x: 50%;

  --cp-silver: #d4d7db;
  --cp-silver-dim: #9aa0a7;   /* 7.4:1 on --cp-black — the muted tone floor */

  --cp-line: rgba(255, 255, 255, 0.13);
  --cp-line-strong: rgba(255, 255, 255, 0.28);

  /* CHAMPAGNE, NOT GOLD — desaturated far enough to read as warm metal rather
     than as a colour.

     V1 spent this in two places and the page came back too monochromatic: a
     refined wireframe rather than a competition. V2 spends it more widely but
     under a hard rule — WARMTH ONLY ON EDGES. Hairlines, crest outlines, rims,
     the odd small label. It is never a filled surface, never a button, never
     body copy. A page that is black, silver and white with warm edges reads as
     metal under a light; the same page with warm PLANES reads as a casino.

     Re-measured against the art direction in this pass, and CORRECTED. The
     previous values were sampled by eye and came out pale, grey and slightly
     pink (#c9b48f); the reference's actual gold is deeper and more saturated —
     modal fill #a08850, small-caps marks #b39761, the rule label #a48955. That
     difference is most of why the old page read as "tasteful web beige" rather
     than as antique gold under a light.

     --cp-warm-bright  the type: eyebrow, date, 8 LUGARES, the headline stops
     --cp-warm         edges and small marks
     --cp-warm-dim     hairlines and crest contours
     --cp-warm-faint   the barely-there boundary of the application plane */
  --cp-warm-bright: #b39761;
  --cp-warm: #a89055;
  --cp-warm-dim: rgba(168, 144, 85, 0.62);
  --cp-warm-faint: rgba(168, 144, 85, 0.24);

  /* The application plane. Graphite, a step up off the page's black, which is
     what makes the form register as a surface you act on rather than as more
     page. */
  --cp-plane: #0c0d10;
  --cp-plane-edge: rgba(255, 255, 255, 0.07);
  --cp-field: rgba(255, 255, 255, 0.028);
  --cp-field-edge: rgba(255, 255, 255, 0.10);

  --cp-danger: #ff9090;

  --cp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cp-gutter: clamp(1.4rem, 6vw, 5.5rem);

  /* ONE COLUMN BELOW THE HERO. The crests, the note under them, the
     application plane and its heading all share this measure on desktop.
     Without it each block found its own left edge — the note at the section
     gutter, the crests centred in one width, the form centred in another — and
     three different starts down one page read as carelessness. */
  --cp-column: 62rem;

  /* One spacing scale. Nothing is spaced by feel. */
  --cp-1: 0.45rem;
  --cp-2: 0.8rem;
  --cp-3: 1.35rem;
  --cp-4: clamp(1.75rem, 4.5vw, 2.5rem);
  /* Tightened. The page had generous negative space that had stopped reading as
     composure and started reading as sections drifting apart — most obviously
     between the crests and the form. Reduced roughly a quarter at the top of
     the scale, where the dead space actually was; the small steps are
     untouched, because rhythm inside a block was never the problem. */
  --cp-5: clamp(2.4rem, 6vw, 3.5rem);
  --cp-6: clamp(3.25rem, 8.5vw, 5.25rem);
}

/* --- Ground --------------------------------------------------------------- */

html {
  /* Must track --cp-black; it is painted before the body rules resolve. */
  background: #020203;
  scroll-behavior: smooth;
}

body.cp {
  background: var(--cp-black);
  color: var(--cp-white);
  /* The one backstop against horizontal overflow. The stage is a full-bleed,
     over-sized composition and a single mispositioned layer would otherwise
     hand a phone a sideways scrollbar. */
  overflow-x: hidden;
}

.cp ::selection {
  background: var(--cp-white);
  color: var(--cp-black);
}

/* Focus is never removed, only restyled. Every interactive element on this page
   resolves to this unless it defines something at least as visible. */
.cp a:focus-visible,
.cp button:focus-visible,
.cp summary:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--cp-warm);
  outline-offset: 3px;
}

.cp-section {
  margin: 0 auto;
  max-width: 78rem;
  padding: 0 var(--cp-gutter);
  width: 100%;
}

/* --- Chrome --------------------------------------------------------------- */

/* Weightless. It sits over the hero and never takes a surface: the first thing
   on the page must be the Copa, not a navigation bar. There is no menu, no
   theme switch and no language switch — the landing has one destination and it
   is further down the same page. */
/* Only rendered for an authenticated reviewer now, and only carrying the way
   out — the Academia MG mark that used to live here was removed so Copa MG can
   open the hero on its own. */
.cp-top {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  left: 0;
  padding: 1.1rem var(--cp-gutter);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}

.cp-top-mark {
  display: inline-flex;
}

/* Up from 17px. At the old size the mark read as a utility icon in a corner
   rather than as the signature on the experience. This is about as far as it
   can go before it starts arguing with the headline. */
.cp-top-mark img {
  display: block;
  height: 22px;
  width: auto;
}

.cp-logout {
  background: transparent;
  border: 0;
  color: var(--cp-silver-dim);
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 0.35rem 0;
  text-transform: uppercase;
}

.cp-logout:hover {
  color: var(--cp-white);
}

/* --- 1 · The opening frame ------------------------------------------------ */

/* THE HERO AND THE EIGHT PLACES SHARE ONE LIT ENVIRONMENT.
   Measured off the art direction, the whole composition — eyebrow, headline,
   supporting line, date, action, cup, rule, eight places — is a single frame
   with one light in it. The previous pass built the hero and the places as two
   independently-padded sections, each with its own background, and the result
   read as a layout rather than as a photograph. Here the light belongs to this
   wrapper and both sections sit inside it, so the haze around the cup falls
   across the places row exactly as it does in the reference.

   `isolation` gives the trophy's screen blend a defined group whose base is
   this element's black. Without it the blend resolves against whatever happens
   to be behind and the asset's black composites as an opaque rectangle. */
.cp-opening {
  /* MOBILE ANCHORS. The cup sits under the copy and low in the frame, so the
     source is overhead-centre and the floor is down at the pedestal. Desktop
     moves both; nothing else about the lighting changes between them. */
  --cp-light-x: 50%;
  background: var(--cp-black);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

/* THE ONE SUPPORTING LAYER.
   The lamp, the haze and the floor used to be three CSS gradients here. They
   are gone: all of that is photographic information now and it lives in the
   plate (tools/build-hero-scene.py). What a rectangular image cannot do is
   spill its light PAST its own edges, and without that the scene reads as a
   picture placed beside some text rather than as one lit room containing both.

   So this is a single, very faint bloom, anchored to the plate's own centre and
   much larger than it — it carries the glow across the copy column and down
   into the places row. It is not allowed to be bright enough to read as a
   gradient in its own right: the moment you can see it as a shape, it is doing
   the thing this pass exists to stop. */
.cp-ambient {
  background:
    radial-gradient(58% 52% at var(--cp-light-x) 34%,
      rgba(196, 210, 232, 0.055) 0%,
      rgba(170, 186, 210, 0.018) 46%,
      transparent 78%);
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* A vignette closes the frame, so the light reads as a room rather than as a
   gradient on a web page. Drawn as a radial gradient rather than an inset
   box-shadow: a large blurred inset shadow traces the element's own corner
   geometry, and that outline was plainly visible along the top edge. */
.cp-opening::after {
  background: radial-gradient(
    118% 74% at var(--cp-light-x) 44%,
    transparent 44%,
    rgba(2, 2, 3, 0.34) 78%,
    rgba(2, 2, 3, 0.80) 100%
  );
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  /* Painted last among .cp-opening's positioned children, so it closes the
     frame over both the cup and the type without needing a z-index — which
     would isolate it and, worse, invite the same blending trap. */
}

/* NO z-index HERE, AND THAT IS LOAD-BEARING.
   A z-index on a positioned element creates a stacking context, and an element
   inside a stacking context can only blend against what is painted INSIDE it.
   With `z-index: 2` on this section the trophy's `mix-blend-mode: screen` had
   no backdrop to resolve against — the lighting layers are siblings, outside
   the context — so its black stopped disappearing and the cup rendered as a
   plainly visible black rectangle sitting on the lit frame.

   Left as position:relative with auto z-index, this still paints above the
   light (positioned, later in DOM) but shares .cp-opening's blending group, so
   screen resolves against the light exactly as intended. Same trap as the
   `transform` one an earlier pass hit: transform, isolation and z-index all
   create stacking contexts and all break backdrop resolution. */
.cp-hero {
  position: relative;
}

/* MOBILE COMPOSITION — A VERTICAL POSTER.
   Copy first, complete and undisturbed; then the cup, in its own space, with
   black around it so the light can be seen falling on it. The figure is capped
   rather than greedy: a trophy that fills the width has no room left for the
   halo, and perceiving the light is worth more than perceiving size. */
.cp-hero-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 4svh, 2.2rem);
  /* Was clamp(3.5rem, 11svh, 6.2rem): that top padding existed to clear the
     Academia MG mark floating above it. With the mark gone the hero starts
     where the lock-up starts, so the space came back rather than being left
     behind as a hole. */
  padding: clamp(2rem, 6svh, 3.4rem) var(--cp-gutter) 0;
  position: relative;
}

/* ONE LEFT-ALIGNED EDITORIAL COLUMN, ON EVERY SIZE.
   A previous pass centred the supporting line, the date and the action beneath
   the headline on phones. Seen on an actual device that was the weaker of the
   two: the left rail is what gives this hero its editorial character and its
   continuity with the desktop art direction, and breaking it halfway down the
   lock-up read as indecision rather than as composition. Reverted — every line
   of the hero now shares one edge at every width. */
.cp-hero-copy {
  align-items: flex-start;
  display: flex;
  flex: none;
  flex-direction: column;
  max-width: 34rem;
  text-align: left;
}


/* --- The lock-up ---------------------------------------------------------- */

/* THE EDITORIAL EYEBROW. Champagne, widely tracked, small. Measured off the
   reference at #b39761 — a deeper, more saturated antique gold than the pale
   champagne this page used before. */
/* THE COPA IDENTITY. Now a mark rather than a line of type, so the rule that
   used to set its tracking and size only has to give it room. */
/* The mark opens the editorial block and belongs to it: the space beneath it
   is smaller than the space above the block, so it reads as attached to the
   headline rather than floating near the top of the page. */
.cp-eyebrow {
  margin: 0 0 clamp(1.3rem, 3.8vw, 1.9rem);
}

/* THE PRODUCT LOCKUP: COPA OVER THE OFFICIAL MG MARK.
   =========================================================================
   Two rows sharing one silhouette. COPA is tracked out until its INK spans
   exactly the width of the mark's INK, and sits on the same left edge.

   WHY THESE ARE LITERAL PIXEL VALUES AND NOT A NEAT RATIO.
   Matching the two widths is an optical problem, and CSS boxes are the wrong
   ruler for it, twice over:

     1. The mark's artwork does not fill its own canvas. Its ink runs
        0.402%..99.732% of the 747x374 file horizontally and starts 2.674%
        down, so the visible mark is 99.33% of the width of the box it is
        drawn in, offset 0.402% from its left edge.
     2. A text box is not its ink either. "C" carries a left side bearing,
        "A" a right one, and letter-spacing adds a phantom gap after the
        FINAL letter, which is why margin-right cancels one full step.

   So the tracking below is SOLVED, not chosen. Visible width is linear in
   letter-spacing — with four letters only the last is displaced, by 3s — so
   setting the word's ink width equal to the mark's ink width has exactly one
   answer per breakpoint. The two breakpoints need different values because
   the mark-height-to-font-size ratio differs (58/12 vs 46/10.5), not because
   either was tuned by eye.

   Verified by rendering: COPA and the mark occupy identical pixel columns at
   both breakpoints, left and right delta zero.

   Changing the mark height, the font size or the typeface invalidates the
   tracking. Re-solve it rather than nudging it. */
.cp-lockup {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
}

/* The designation. Small, tracked, and champagne — the tone the rest of the
   page already uses for its accents (OCTUBRE 2026, 8 LUGARES), which is what
   keeps it reading as a Copa label rather than as part of the MG mark. */
.cp-lockup-word {
  color: var(--cp-warm-bright);
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 20.864px;     /* solved: spans the mark's ink exactly */
  line-height: 1;
  margin-bottom: 2.9px;         /* coarse half of the gap — see below */
  margin-left: -0.631px;        /* aligns COPA's ink to the mark's ink, not its box */
  margin-right: -20.864px;      /* kill the phantom gap after the last letter */
  text-transform: uppercase;
  /* THE GAP IS SET IN TWO PARTS, AND IT HAS TO BE.
     The mark is a replaced element, and the renderer snaps a block's painted
     position to whole CSS pixels: sweeping margin-bottom across a 3px range
     produces exactly three achievable gaps, 5.33 / 6.33 / 7.33px, and nothing
     between them. The approved 0.145 x 46px = 6.67px is not one of them.
     A transform is composited rather than laid out, so it is not snapped. The
     margin buys the nearest reachable gap and this carries the remainder. */
  transform: translateY(-0.34px);
  white-space: nowrap;
}

/* THE OFFICIAL MARK, UNMODIFIED.
   Sized by height with width:auto so its proportions are the file's own. The
   artwork bleeds to its own frame, so it carries no built-in clearance and
   every gap around it is literal. */
.cp-lockup-mark {
  display: block;
  height: 46px;
  opacity: 0.97;
  width: auto;
}

/* THE HEADLINE — A HIGH-CONTRAST DIDONE, WHICH IS THE POINT.
   The previous pass set this in Inter 600 uppercase because @mg/design ships
   Inter and nothing else, and reasoned that case and tracking could carry the
   editorial character. Rendered beside the art direction that reasoning does
   not survive: the prestige in the reference comes from the modulation itself —
   hairline serifs against heavy vertical stems — and no weight of a grotesque
   produces it. Playfair Display is a libre Didone (SIL OFL 1.1, vendored into
   this application's own public/fonts, NOT into the frozen design package) and
   is the closest honest match to the reference's face.

   Set in ivory (#f8f8f8, measured) rather than pure white, at a line height
   under 1 so the two lines lock together as one mass. */
.cp-headline {
  color: var(--cp-ivory);
  font-family: var(--cp-display);
  font-size: clamp(2.7rem, 12.4vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 0.94;
  margin: 0;
  /* Left, always. */
  text-align: left;
  text-transform: uppercase;
}

/* NEVER WRAPPED. Each line is a designed break, so the viewport is not allowed
   to add one: at the desktop size the column was a few pixels narrower than
   "8 COLEGIOS." and the 8 fell onto a line of its own, which turned the lock-up
   into three ragged lines. The sizes below are chosen so this never has to
   clip, and the mobile clamp is verified against a 375px screen. */
.cp-headline-line {
  display: block;
  white-space: nowrap;
}

/* The full stops in champagne. One piece of colour inside the headline, and
   the detail that keeps a serif on black from reading as a book jacket. */
.cp-dot {
  color: var(--cp-warm-bright);
}

/* Supporting copy, set as spaced caps rather than as a sentence — in the
   reference this line is typographic material, not prose. Back to Inter: a
   second serif voice here would fight the headline. */
.cp-subline {
  color: var(--cp-silver);
  /* Up from clamp(0.74rem, 3vw, 0.86rem). At the old size this line was
     tracked-out caps at roughly 12px on a phone, which is a caption, not the
     sentence that explains what the Copa is. */
  font-size: clamp(0.84rem, 3.5vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.85;
  margin: clamp(1.2rem, 3.4vw, 1.6rem) 0 0;
  text-transform: uppercase;
}

.cp-subline span {
  display: block;
}

/* The date, in champagne. No hairline over it any more — the rule was carrying
   the line in the old composition, and against the reference it read as a
   divider inside a lock-up that has no dividers. */
.cp-edition {
  color: var(--cp-warm-bright);
  font-size: clamp(0.78rem, 3.1vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  margin: clamp(1.1rem, 3vw, 1.45rem) 0 0;
  text-transform: uppercase;
}

/* THE ACTION. Outlined and rounded, which is a deliberate departure from the
   reference's solid gold rectangle: at web scale a filled champagne slab
   outweighs the headline and the composition inverts. Champagne border,
   champagne arrow, champagne label on hover — the gold is in the details. */
.cp-cta {
  align-items: center;
  /* On the rail with everything else in the lock-up. */
  align-self: flex-start;
  background: rgba(2, 2, 3, 0.46);
  border: 1px solid var(--cp-warm-dim);
  border-radius: 999px;
  color: var(--cp-ivory);
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 500;
  gap: 0.9rem;
  letter-spacing: 0.14em;
  margin-top: clamp(1.5rem, 4vw, 2rem);
  padding: 0.95rem 1.75rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 240ms ease, background-color 240ms ease, color 240ms ease;
}

.cp-cta:hover {
  background: rgba(2, 2, 3, 0.66);
  border-color: var(--cp-warm-bright);
  color: #fff;
}

.cp-cta-arrow {
  color: var(--cp-warm-bright);
  transition: transform 300ms var(--cp-ease);
}

.cp-cta:hover .cp-cta-arrow {
  transform: translateX(3px);
}

/* --- The scene ------------------------------------------------------------ */

/* A WINDOW ONTO THE PHOTOGRAPH, SIZED SO THE ROOM SURVIVES.
   The box matches the plate's own aspect so nothing is cropped: the cup only
   occupies the middle ~55% of the frame, and the black, haze and spotlight
   either side of it are load-bearing. Sizing this box to the CUP rather than to
   the SCENE — which is what "make the trophy bigger" would mean here — would
   crop the atmosphere away and put us straight back to a cutout on black. */
.cp-figure {
  align-self: center;
  aspect-ratio: 840 / 800;
  flex: none;
  /* Driven by viewport HEIGHT, with the width falling out of the plate's own
     aspect. Sized by width instead, the scene's floor dropped below the fold on
     a 375x667 screen — and the floor is the half of this photograph that does
     the grounding, so losing it costs more than a smaller cup does. */
  height: clamp(13rem, 36svh, 23rem);
  margin-top: clamp(0.2rem, 1svh, 0.9rem);
  max-width: 96%;
  position: relative;
  width: auto;
}

.cp-figure picture {
  display: block;
  inset: 0;
  position: absolute;
}

.cp-trophy {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: contain;
  position: absolute;
  width: 100%;
  /* The plate's ground is black and its edges are feathered to black in the
     asset. Screen over black returns the source, so that black IS the page's
     black and the photograph dissolves into the composition — no matte, no
     visible rectangle, and the feathered corners simply stop existing. */
  mix-blend-mode: screen;
}

/* --- 2 · The eight places ------------------------------------------------- */

/* Closing the same frame, not opening a new one. The padding here is what
   makes the row read as the bottom of the composition rather than as the next
   section down the page. */
.cp-places {
  padding: clamp(1.8rem, 5svh, 2.6rem) 0 clamp(1.6rem, 4svh, 2.4rem);
  /* No z-index, for the same reason as .cp-hero above. */
  position: relative;
}

/* thin champagne line —— 8 LUGARES —— thin champagne line */
.cp-rule {
  align-items: center;
  display: flex;
  gap: clamp(1rem, 4vw, 1.8rem);
  margin: 0;
}

.cp-rule::before,
.cp-rule::after {
  content: '';
  flex: 1;
  height: 1px;
}

.cp-rule::before {
  background: linear-gradient(to right, transparent, var(--cp-warm-faint) 30%, var(--cp-warm-dim));
}

.cp-rule::after {
  background: linear-gradient(to left, transparent, var(--cp-warm-faint) 30%, var(--cp-warm-dim));
}

/* The title of the section the page is built around. Up again from the last
   pass and set in the same champagne as the eyebrow, so the frame opens and
   closes on the same colour. */
.cp-rule-label {
  color: var(--cp-warm-bright);
  flex: none;
  font-size: clamp(1rem, 4.1vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  /* The tracking pushes the last letter off its own box; without this the
     text sits visibly left of centre between its two rules. */
  text-indent: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* "Más información" is a utility label, not a section title. Same component,
   different job. */
.cp-more .cp-rule-label {
  color: var(--cp-warm);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}

/* Eight vacancies, not eight cards. */
/* Same rule as desktop, solved for four columns: 4C + 3G = row with G = 0.8C
   gives C = row/6.4. Small shields with a lot of air between them — the row
   should read as reserved positions, not as a grid of buttons. */
.cp-crests {
  display: grid;
  gap: min(11vw, 3.6rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: clamp(1.5rem, 4.5vw, 2.2rem) 0 0;
  padding: 0;
}

.cp-crest {
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 2vw, 0.85rem);
}

.cp-crest svg {
  display: block;
  height: auto;
  width: 100%;
}

/* ONE FINE CHAMPAGNE CONTOUR AND NOTHING ELSE.
   The previous crest carried a gradient fill, an inset second shield, a rim
   highlight and a plinth, and the stack read as an icon somebody had designed.
   The art direction draws a single hairline and puts a dot under it. The
   restraint is the ceremony: an empty contour reads as a place reserved, a
   rendered badge reads as a graphic. */
.cp-crest-body {
  fill: rgba(255, 255, 255, 0.012);
  /* Brighter than the page's hairlines. Side by side the reference's shields
     read as gold drawn on black; at --cp-warm-dim ours read as a watermark. */
  stroke: rgba(181, 155, 94, 0.82);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* The dot beneath. This is what turns eight outlines into eight positions. */
.cp-crest-dot {
  background: var(--cp-warm-bright);
  border-radius: 50%;
  display: block;
  height: 4px;
  margin: 0 auto;
  width: 4px;
}

/* Outside the lit frame: this is the page talking, not the campaign. */
.cp-places-note {
  color: var(--cp-silver);
  font-size: clamp(1rem, 3.9vw, 1.08rem);
  line-height: 1.62;
  margin: 0;
  padding: var(--cp-5) var(--cp-gutter) 0;
}

.cp-places-note span {
  display: block;
  margin: 0 auto;
  max-width: 46ch;
}

/* --- 2b · Fechas y sede --------------------------------------------------- */

/* THE LOGISTICS, SET AS EDITORIAL RATHER THAN AS A SCHEDULE WIDGET.
   Nothing new is introduced here: the champagne rule and its tracked label are
   the same component the eight places use, the hairline-separated rows are the
   same ones "Más información" uses, and the numerals take the page's own
   display serif. A card, a table or a calendar grid would all have been easier
   and all three would have read as a component dropped into an editorial page.

   Two shapes, because the information has two shapes. The five nights are a
   SEQUENCE — they want a rail, read left to right, with the progression visible
   in one glance. Days, times and venue are FACTS ABOUT ALL OF THEM — they want
   a label/value list. Forcing either into the other's form is what produces a
   schedule table nobody reads. */
.cp-schedule {
  padding: var(--cp-6) 0 0;
}

/* MOBILE-FIRST, AND ON A PHONE THIS IS NOT A RAIL. Five columns inside 390px
   leaves about 62px each, which is narrower than "09 OCT" sets and would break
   "SEMIFINALES" across three lines. So the base is five rows — date on the
   left, stage on the right — which is the same sequence read top to bottom and
   stays legible at any width. The rail comes back at 700px. */
.cp-dates {
  list-style: none;
  margin: clamp(1.7rem, 5vw, 2.5rem) 0 0;
  padding: 0;
}

/* A hairline over each night rather than a box around it — the same device the
   accordion below uses, so the page has one way of separating rows. */
.cp-date {
  align-items: baseline;
  border-top: 1px solid var(--cp-line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.75rem 0;
}

/* NO CLOSING RULE UNDER THE LAST NIGHT. It was there, and next to the facts
   list — which opens with its own hairline — it drew two parallel lines with a
   gap between them, which reads as a mistake rather than as a separation. The
   facts' own top rule closes the rail. */

/* STACKED, THE CHAMPAGNE LINE IS A SECTION DIVIDER AND IT EARNS ITS PLACE.
   Read top to bottom, the five nights are one list, and this rule is the only
   thing marking where the group stage and the semifinal end and the final
   begins. It is the same job the champagne hairline does everywhere else on
   this page: say "this one".

   IT IS SWITCHED OFF THE MOMENT THE LIST BECOMES A RAIL — see the 700px block
   below. Side by side, the five are sibling columns with identical hairlines
   above them, and a single gold one over the fifth stops reading as a
   transition and starts reading as a border somebody forgot to match. */
.cp-date.is-final {
  border-top-color: var(--cp-warm-dim);
}

.cp-date-num {
  align-items: baseline;
  color: var(--cp-ivory);
  display: flex;
  font-family: var(--cp-display);
  /* Tabular, lining figures: five numerals in a row have to align as a rail,
     and old-style figures would set 09 and 30 at different heights. */
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-size: clamp(1.55rem, 4.6vw, 2.45rem);
  gap: 0.38em;
  letter-spacing: -0.02em;
  line-height: 1;
}

.cp-date.is-final .cp-date-num {
  color: var(--cp-warm-bright);
}

/* THE MONTH IS ALWAYS SHOWN, on every night and not only on the one that
   changes. Marking 06 alone as NOV would make it look like the exception; the
   rail reads as a rail when all five are typeset identically, and the reader
   still sees exactly where October ends. */
.cp-date-mon {
  color: var(--cp-warm);
  font-family: inherit;
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.cp-date-stage {
  color: var(--cp-silver-dim);
  font-size: clamp(0.68rem, 2.4vw, 0.76rem);
  letter-spacing: 0.11em;
  text-align: right;
  text-transform: uppercase;
  /* Never wraps: "SEMIFINALES" broken over two lines in a five-row list is the
     one thing that would make this look like a table. */
  white-space: nowrap;
}

/* Days / horarios / sede / final. Same width cap as the accordion below it, so
   the two label columns on this page share one measure. */
.cp-facts {
  margin: clamp(1.9rem, 5vw, 2.7rem) 0 0;
  max-width: 46rem;
}

/* MOBILE STACKS THE LABEL ABOVE ITS VALUE. A two-column list on a 390px
   screen spends 8.5rem of it on a five-letter label and leaves about 180px for
   "Club de Campo Aranzazú · Garín", which then wraps — a wrap caused entirely
   by a column that had nothing in it. Stacked, every value gets the full
   measure and nothing breaks. The two columns return at 700px. */
.cp-fact {
  border-top: 1px solid var(--cp-line);
  display: grid;
  gap: 0.35rem;
  padding: var(--cp-3) 0;
}

.cp-fact:last-child {
  border-bottom: 1px solid var(--cp-line);
}

/* The same champagne small-caps as "Más información" — a utility label, not a
   section title, so it takes the quieter of the two rule-label treatments. */
.cp-fact dt {
  color: var(--cp-warm);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cp-fact dd {
  color: var(--cp-silver);
  font-size: clamp(0.98rem, 3.6vw, 1.05rem);
  line-height: 1.55;
  margin: 0;
}

/* Two slots, spaced apart and separated by a champagne middot. The gap is
   deliberately generous: two times set tight against a dash is exactly the
   range this must never look like. */
.cp-fact-times {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cp-time {
  color: var(--cp-ivory);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.cp-time-sep {
  color: var(--cp-warm-dim);
}

.cp-venue-name {
  color: var(--cp-white);
  display: block;
}

.cp-venue-scope {
  color: var(--cp-silver-dim);
  display: block;
  font-size: 0.87em;
  margin-top: 0.2rem;
}

/* AN OUTBOUND LINK, DELIBERATELY SMALL. It is a convenience for somebody
   working out whether they can get there, not a call to action competing with
   "Postulá a tu equipo" further down. Champagne, one hairline underneath, and
   an arrow that says the page changes. */
.cp-venue-map {
  align-items: baseline;
  border-bottom: 1px solid var(--cp-warm-faint);
  color: var(--cp-warm-bright);
  display: inline-flex;
  font-size: 0.88em;
  gap: 0.4em;
  letter-spacing: 0.02em;
  margin-top: 0.55rem;
  padding-bottom: 2px;
  text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease;
}

.cp-venue-map:hover {
  border-bottom-color: var(--cp-warm);
  color: var(--cp-ivory);
}

.cp-venue-arrow {
  font-size: 0.9em;
  transition: transform 250ms var(--cp-ease);
}

.cp-venue-map:hover .cp-venue-arrow {
  transform: translate(1px, -1px);
}

/* Available to assistive technology, absent from the page. The one use is the
   word between the two kick-off times, which a sighted reader gets as a
   middot. `clip-path` rather than `display: none` — hidden content is not
   announced at all, which would defeat the point. */
.cp-sr {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* THE RAIL, once there is room for it. Five nights side by side is the shape
   that shows the progression — three group dates, a semifinal, a final — as a
   single left-to-right movement, which the stacked list can only imply. */
@media (min-width: 700px) {
  .cp-dates {
    display: grid;
    gap: clamp(1rem, 3vw, 1.9rem);
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .cp-date {
    display: block;
    padding: clamp(0.7rem, 2vw, 0.95rem) 0 0;
  }

  /* THE DIVIDER GOES BACK TO NEUTRAL HERE, TIED TO THE LAYOUT AND NOT TO A
     NUMBER. The champagne line means "the list breaks here", which is only
     true while the nights are stacked; the instant they become five columns it
     contradicts the four hairlines beside it.

     THIS IS DELIBERATELY THE 700px BLOCK — the one that makes the rail — and
     not a separate 1024px rule. The brief named 1024, but the rail starts at
     700, so a 1024 switch would have left 700–1023px showing the gold border
     on the fifth of five sibling columns: precisely the state the brief asks
     to remove, just at widths nobody happened to look at. Binding the two to
     one breakpoint means they cannot disagree at any width, now or later.

     The final's hierarchy does not depend on this line. 06 NOV stays champagne
     (see .cp-date.is-final .cp-date-num), it keeps its FINAL label, and it is
     last. Those carry it. */
  .cp-date.is-final {
    border-top-color: var(--cp-line);
  }

  .cp-date-stage {
    display: block;
    margin-top: 0.6rem;
    text-align: left;
  }

  /* Label beside value, sharing one measure down the column. */
  .cp-fact {
    gap: 0.3rem 1.6rem;
    grid-template-columns: minmax(6rem, 8.5rem) 1fr;
  }

  .cp-fact dt {
    padding-top: 0.3rem;
  }
}

/* --- 3 · The CAMPSA benefit ----------------------------------------------- */

/* A TRANSITION, NOT A SECOND HERO AND NOT A SPONSOR PANEL.
   It has to register as an important benefit on the way from the eight places
   to the form, which means real presence — but it must not become another
   full-viewport statement competing with the hero. So: no surface, no card, no
   border, no logo lockup. One champagne rule to open it, the page's own display
   serif at roughly half the hero's size, and a lot of black around it.

   Nothing here introduces CAMPSA's own blue and red. Copa MG is still the brand
   speaking; CAMPSA is what it is offering. */
/* The bottom is deliberately tighter than the top. The block opens with a
   champagne rule that needs air above it to separate it from the eight places;
   it closes into the form, which brings its own generous top padding, and the
   two together were leaving ~98px of dead space between the mark and "Postulá
   a tu equipo" on a phone. */
.cp-benefit {
  padding: var(--cp-6) 0 clamp(1rem, 3vw, 1.7rem);
}

.cp-benefit-rule {
  background: linear-gradient(to right, var(--cp-warm-dim), var(--cp-warm-faint) 40%, transparent);
  height: 1px;
  margin: 0 0 clamp(1.6rem, 5vw, 2.4rem);
  width: min(11rem, 42%);
}

/* The same face as the hero headline, deliberately much smaller — this is the
   second-loudest statement on the page and must stay second. "MÁS DE 400
   UNIVERSIDADES" is the selling point, so the line is allowed to be big enough
   to be read in one glance and no bigger. */
.cp-benefit-heading {
  color: var(--cp-ivory);
  font-family: var(--cp-display);
  font-size: clamp(1.9rem, 8.2vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.04;
  margin: 0;
  max-width: 18ch;
  text-transform: uppercase;
  text-wrap: balance;
}

.cp-benefit-body {
  color: var(--cp-silver);
  font-size: clamp(1rem, 3.9vw, 1.08rem);
  line-height: 1.62;
  margin: clamp(1.1rem, 3.4vw, 1.5rem) 0 0;
  max-width: 46ch;
}

/* THE PARTNER MARK.
   Sized by WIDTH with height auto, so the badge's aspect is never touched — it
   is a crest, and a stretched crest is a broken logo. Width rather than height
   because the desktop composition below places it in a column, and a column is
   a width.

   Substantially larger than the signature it started as: at ~63px wide it read
   as a footer badge, and the review pass had already established that this
   crest's ring type stops being readable at small sizes. Shrinking a mark until
   its defects stop showing is the one outcome that was ruled out.

   Nothing is added to make it visible — no glow, no shadow, no border, no
   container. It is light artwork on black, which is the whole reason Candidate
   A was chosen. Opacity keeps it a step under the ivory copy so it stays
   clearly secondary to the claim. */
.cp-benefit-mark {
  display: block;
  height: auto;
  margin: clamp(1.5rem, 4.5vw, 2.1rem) 0 0;
  opacity: 0.85;
  width: clamp(7rem, 32vw, 8.75rem);
}

/* --- 3 · Postulación ------------------------------------------------------ */

.cp-apply {
  padding: var(--cp-5) 0 var(--cp-6);
  position: relative;
  /* The anchor lands below the floating mark rather than under it. */
  scroll-margin-top: 0;
}

/* The one thing keeping the lower page in the same room as the hero.

   It starts ABOVE this section, not at its top edge: a gradient whose box
   begins exactly where the section begins draws a visible horizontal seam
   across the page, which reads as precisely the section divider this layout
   is built to avoid. */
.cp-apply::before {
  /* The light peaks over the plane, not over the box's own top edge. Centring
     a radial gradient at `50% 0%` puts its maximum exactly on the boundary of
     the element that carries it, which draws a hard horizontal line across the
     page — it was cutting straight through the second row of crests. The peak
     is moved down into the section and the whole layer is masked in, so the
     top edge is transparent by construction and has nothing to reveal. */
  background: radial-gradient(115% 52% at 50% 34%, rgba(255, 253, 248, 0.055), transparent 72%);
  content: '';
  inset: -14rem 0 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
  pointer-events: none;
  position: absolute;
}

.cp-apply > .cp-section {
  position: relative;
}

.cp-label {
  color: var(--cp-warm);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  margin: 0;
  text-transform: uppercase;
}

.cp-heading {
  font-size: clamp(1.85rem, 8vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: var(--cp-3) 0 0;
  max-width: 16ch;
  text-wrap: balance;
}


.cp-notice {
  border-left: 2px solid var(--cp-warm-faint);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  /* Inside the plane these precede the fields, so the gap belongs underneath.
     With a top margin instead, the notice sat directly on the first field's
     label. */
  margin: 0 0 var(--cp-4);
  max-width: 44ch;
  padding-left: var(--cp-2);
}

.cp-notice strong {
  color: var(--cp-white);
  font-size: 0.92rem;
  font-weight: 500;
}

.cp-notice span {
  color: var(--cp-silver-dim);
  font-size: 0.86rem;
}

/* THE APPLICATION PLANE.
 *
 * V1's form was so fully integrated that it could be read straight past as
 * editorial text. This is the smallest change that fixes it: a graphite surface
 * a step up off the page's black, one warm hairline along its top edge where
 * the light would catch it, and a soft glow falling onto it from above.
 *
 * What it is deliberately not: a card. No full border, no radius to speak of,
 * no shadow spilling onto the page, no lightening of the palette. The boundary
 * should be felt before it is noticed. */
.cp-plane {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 252, 245, 0.035), transparent 68%),
    linear-gradient(to bottom, var(--cp-plane), #08090b);
  border-radius: 16px;
  border-top: 1px solid var(--cp-warm-faint);
  /* Up from --cp-5. The heading sits directly above this now — the paragraph
     between them was removed as a duplicate of the form's own question — so the
     plane carries the separation that paragraph used to provide. Deliberate
     space, not a gap left behind by a deletion. */
  margin: clamp(2.9rem, 7vw, 4.2rem) 0 0;
  padding: clamp(1.5rem, 5.5vw, 2.6rem) clamp(1.25rem, 4.5vw, 2.4rem) clamp(1.75rem, 6vw, 2.9rem);
  position: relative;
}

/* Sides and foot: present, but an order of magnitude quieter than the lit top
   edge, so the plane reads as a surface catching light rather than as a box. */
.cp-plane::after {
  border: 1px solid var(--cp-plane-edge);
  border-radius: inherit;
  border-top: 0;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.cp-form {
  display: grid;
  gap: var(--cp-4);
  grid-template-columns: minmax(0, 1fr);
}

.cp-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.cp-field-label {
  color: var(--cp-silver-dim);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* THE QUALITATIVE QUESTION IS A FIELD LABEL, LIKE EVERY OTHER ONE.
   It used to be given its own treatment — sentence case, full white, at reading
   size — on the argument that it is the only genuine question on the form.
   Rendered beside NOMBRE Y APELLIDO / COLEGIO / WHATSAPP / EMAIL that argument
   does not hold: one label set larger and brighter than its neighbours reads as
   a heading that has fallen into the form, and it broke the column's rhythm
   rather than rewarding it.

   There is deliberately NO `.cp-field-question .cp-field-label` rule any more.
   The question inherits .cp-field-label unchanged — same family, size, weight,
   tracking, case, colour and spacing above its input — so REMOVING the override
   is the fix. Adding any rule back here would undo it. */

/* A FIELD SHOULD LOOK LIKE A FIELD.
   V1 used a bare bottom rule, which is beautiful and, on this ground, almost
   invisible — part of why the section read as prose. These have a faint filled
   well, a hairline all round and a brighter lower edge: enough to say "type
   here" at a glance, nowhere near a boxed SaaS input. */
.cp-input,
.cp-select,
.cp-textarea {
  background: var(--cp-field);
  border: 1px solid var(--cp-field-edge);
  border-bottom-color: rgba(255, 255, 255, 0.24);
  /* Softened from 9px, proportional to the plane's 16px. Enough to sit in the
     same rounded language as the pill CTA; nowhere near a pill itself, because
     a field has to keep reading as a field. */
  border-radius: 12px;
  color: var(--cp-white);
  font: inherit;
  /* 1rem is load-bearing on iOS: anything below 16px makes Safari zoom the
     whole page the moment the field is focused, which throws the composition
     away on the single most important screen of the funnel. */
  font-size: 1rem;
  padding: 0.8rem 0.85rem;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  width: 100%;
}

.cp-input::placeholder,
.cp-textarea::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.cp-textarea {
  line-height: 1.5;
  min-height: 6rem;
  resize: vertical;
}

/* THE SELECT IS AN INPUT THAT HAPPENS TO HAVE A LIST.
   It inherits the well, the hairline, the radius and the focus ring from the
   rules above by sharing their selectors, so the only job left here is to undo
   the platform's own chrome and put back a chevron that belongs to this page.

   `font-size: 1rem` is load-bearing for the same reason it is on the inputs:
   anything smaller and iOS zooms the whole page when the picker opens. */
.cp-select {
  appearance: none;
  -webkit-appearance: none;
  /* The chevron, drawn in the page's own silver rather than the OS blue. */
  background-image: linear-gradient(45deg, transparent 50%, var(--cp-silver-dim) 50%),
                    linear-gradient(135deg, var(--cp-silver-dim) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) center, calc(100% - 0.75rem) center;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  cursor: pointer;
  /* Room for the chevron, so a long option never runs underneath it. */
  padding-right: 2.6rem;
}

/* The placeholder row reads as a prompt, the real options as answers. */
.cp-select:invalid,
.cp-select option[value=""] {
  color: rgba(255, 255, 255, 0.42);
}

.cp-select:has(option:checked:not([value=""])) {
  color: var(--cp-white);
}

/* The picker itself is drawn by the OS, so the one thing worth setting is that
   its rows are legible against this page's palette rather than white-on-white. */
.cp-select option {
  background: var(--cp-plane);
  color: var(--cp-white);
}

/* ==========================================================================
   MARIANO, TO CAMERA
   ==========================================================================
   Kept as one block, its desktop rules included, rather than split across this
   sheet's breakpoint sections: every value here exists to hold one composition
   together and reading them apart is how it gets broken.

   THE PROBLEM THIS SOLVES. The footage is HIGH-KEY — a near-white wall in
   daylight — and this page is #020203. A bright 16:9 rectangle dropped on that
   ground reads as a hole punched through the page. The answer is the hero's own
   idea: the hero is a lit trophy on black, so this is a lit person on black,
   given the same treatment — a plate, a champagne hairline, light carried OUT
   past its own edges, and corners dissolved rather than cut.

   WARMTH ONLY ON EDGES is this sheet's rule and it holds here: champagne is the
   plate's hairline, the label, the rail and the mark. Never a filled surface. */
.cp-mariano {
  /* More air above than below. The gap after the hero is a deliberate beat;
     the gap before 8 LUGARES only has to separate. */
  padding-top: clamp(3rem, 9vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 7vw, 4rem);
}

/* THE LABEL STAYS IN THE GUTTER WHILE THE PLATE ESCAPES IT. That split is the
   whole mobile design: the name reads as type, in the text column with
   everything else on the page; the video reads as cinema, edge to edge. The
   label costs the video no width at all. */
.cp-mariano-label {
  border-top: 1px solid var(--cp-warm-dim);
  color: var(--cp-warm-bright);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  margin: 0 0 clamp(0.9rem, 2vw, 1.15rem);
  padding-top: 0.85rem;
  text-transform: uppercase;
}

.cp-plate {
  /* The source's true ratio, declared exactly, so the box never letterboxes or
     crops by a rounding error. It is a hair wider than 16:9. */
  aspect-ratio: 832 / 464;
  background: #050506;
  /* Full-bleed by default. `calc(50% - 50vw)` measures this element's own
     container inset and cancels exactly it; the margin-left:50% +
     translateX(-50%) idiom resolves its percentage against the wrong box. */
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
  overflow: hidden;
  position: relative;
  width: 100vw;
  /* The glow OUT. This is what stops the white rectangle reading as a hole:
     the plate's light bleeds into the black around it, as the hero's ambient
     does for the trophy. Very faint, very large. */
  box-shadow: 0 0 100px -20px rgba(255, 248, 235, 0.1);
}

.cp-plate-video {
  background: #050506;
  display: block;
  height: 100%;
  /* CONTAIN, NEVER COVER. The shot was lit open, with Mariano centred and wide
     empty wall either side; any crop tightens a frame that was composed not to
     be. Nothing is cut at any width. */
  object-fit: contain;
  width: 100%;
}

/* Corners dissolved, not cut, so the bright frame has no hard geometric edge
   against the page. The centre is untouched — he is never dimmed. */
.cp-plate::after {
  background: radial-gradient(120% 120% at 50% 45%,
    rgba(2, 2, 3, 0) 45%,
    rgba(2, 2, 3, 0.28) 78%,
    rgba(2, 2, 3, 0.62) 100%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* THE WHOLE PLATE IS THE BUTTON. The visible mark can therefore be small and
   off to one side without the tap target following it: on a phone this is
   390x218, not a 46px strip. */
.cp-plate-hit {
  background: transparent;
  border: 0;
  cursor: pointer;
  inset: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 3;
}
.cp-plate-hit:focus-visible {
  outline: 2px solid var(--cp-warm-bright);
  outline-offset: -4px;
}

/* THE RAIL. One champagne hairline across the foot of the plate with the mark
   at its left, over a gradient that gives both something to sit on. Inert:
   `pointer-events` stays off it so the button above owns every pixel. */
.cp-plate-rail {
  align-items: center;
  background: linear-gradient(to top, rgba(2, 2, 3, 0.82), rgba(2, 2, 3, 0.18));
  border-top: 1px solid var(--cp-warm);
  bottom: 0;
  color: var(--cp-warm-bright);
  display: flex;
  height: clamp(46px, 7vw, 58px);
  left: 0;
  padding-left: clamp(1rem, 3.2%, 1.75rem);
  pointer-events: none;
  position: absolute;
  right: 0;
  transition: background-color 240ms ease;
  z-index: 2;
}
.cp-plate-rail svg {
  display: block;
  height: auto;
  width: clamp(13px, 1.5vw, 16px);
}
.cp-plate-hit:hover ~ .cp-plate-rail,
.cp-plate-hit:focus-visible ~ .cp-plate-rail {
  background: linear-gradient(to top, rgba(2, 2, 3, 0.9), rgba(2, 2, 3, 0.28));
}

/* Once it is playing the page's furniture leaves and the native controls take
   over — no custom player, no half-built control set to be trapped in. */
.cp-plate.is-playing::after,
.cp-plate.is-playing .cp-plate-rail { display: none; }
.cp-plate.is-playing .cp-plate-hit { display: none; }

/* ------------------------------------------------ muted autoplay, and sound
   The video now starts by itself, muted, when it comes properly into view. That
   creates a state the click-to-play design never had: PLAYING BUT SILENT. It
   needs to say two things at once — this is running, and you can hear it.

   THE RAIL ALREADY THERE DOES BOTH. Its left mark goes (the video is playing;
   a play triangle would be a lie) and the right end, which was empty, takes the
   sound control. No floating pill, no second bar, no overlay — the component
   keeps the silhouette that was approved. */
.cp-plate.is-muted-autoplay .cp-plate-rail {
  display: flex;
  /* ABOVE THE PLATE'S CLICK LAYER. The rail ships at z-index 2 and
     .cp-plate-hit at 3, and a child's z-index cannot escape its parent's
     stacking context — so the sound button rendered but was unreachable, with
     the hit layer swallowing every click aimed at it. The rail itself stays
     pointer-events: none, so lifting it makes exactly one thing clickable: the
     button. Every other pixel of the frame still belongs to the plate. */
  z-index: 4;
}
.cp-plate.is-muted-autoplay .cp-plate-rail > svg { visibility: hidden; }

.cp-plate-sound {
  align-items: center;
  background: none;
  border: 0;
  color: var(--cp-warm-bright);
  cursor: pointer;
  display: none;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  gap: 0.5rem;
  letter-spacing: 0.16em;
  /* Pushes it to the rail's right end, opposite where the play mark was. */
  margin-left: auto;
  padding: 0 clamp(1rem, 3.2%, 1.75rem) 0 0;
  pointer-events: auto;
  text-transform: uppercase;
  transition: color 240ms ease;
}
.cp-plate.is-muted-autoplay .cp-plate-sound { display: flex; }
.cp-plate-sound svg { display: block; height: auto; width: 15px; }
.cp-plate-sound:hover { color: #f0dcae; }
.cp-plate-sound:focus-visible { outline: 2px solid var(--cp-warm-bright); outline-offset: 3px; }

/* Captions, styled with ::cue only — no custom caption renderer. They matter
   more here than on a normal video: playback starts silent, so for the first
   seconds the captions ARE the message. */
.cp-plate video::cue {
  background: rgba(2, 2, 3, 0.72);
  color: var(--cp-white);
  font-size: 0.9em;
  line-height: 1.35;
}
/* Lift the caption band clear of the rail so the two never overlap. */
.cp-plate.is-muted-autoplay video::-webkit-media-text-track-container {
  transform: translateY(calc(-1 * clamp(46px, 7vw, 58px)));
}

/* ==========================================================================
   THE HERO ORDER, BELOW 1024px
   ==========================================================================
   Mariano now comes immediately after the proposition and the date, before the
   visitor has to scroll past the trophy, and the CTA follows him.

     lockup → headline → subline → OCTUBRE 2026 → VIDEO → CTA → trophy

   HOW, WITHOUT DUPLICATING ANYTHING. `order` cannot move a node between
   parents, so this could not be done from the old DOM at all: the CTA lived
   inside .cp-hero-copy and the video was a separate section. The template
   change is structural and small — the CTA, the video and the trophy are now
   SIBLINGS inside .cp-hero-inner, which is the element that already switches
   from a flex column to a two-column grid at 1024px.

   SO THIS BREAKPOINT NEEDS NO RULES AT ALL. The order above is simply the DOM
   order, which is also the right reading order for a screen reader and for the
   majority of this audience. Everything below is the DESKTOP restoration. */
.cp-hero-cta { display: flex; }
.cp-hero-cta .cp-cta { margin-top: 0; }

/* The video had its own band under the hero and the air to match; following the
   date directly, it wants less. */
.cp-hero-inner > .cp-mariano {
  padding-top: clamp(1.6rem, 5vw, 2.4rem);
  padding-bottom: clamp(1.6rem, 5vw, 2.4rem);
  width: 100%;
}

@media (min-width: 700px) {
  .cp-mariano {
    padding-top: clamp(4.5rem, 11vw, 8.5rem);
    padding-bottom: clamp(3.5rem, 8vw, 6rem);
  }
  /* Desktop returns the plate to the page's central axis and to a width the
     832px source can fill without being upscaled: at 820 it renders at 0.99x,
     which is why the composition and the asset agree. The label shares the
     plate's width, so the hairline reads as the object's top edge. */
  .cp-mariano-wrap {
    margin: 0 auto;
    max-width: 820px;
  }
  .cp-plate {
    border-radius: 2px;
    margin-inline: 0;
    max-width: 100%;
    width: 100%;
    box-shadow:
      0 0 0 1px var(--cp-warm-faint),
      0 0 120px -20px rgba(255, 248, 235, 0.1),
      0 40px 120px -50px rgba(0, 0, 0, 0.9);
  }
}

/* On touch there is no drag handle to grab, but the browser still paints the
   grip — outside the rounded corner it reads as a stray full stop sitting in
   the plane. No affordance, so no mark. */
@media (pointer: coarse) {
  .cp-textarea { resize: none; }
}

/* Focus has to be visible on a dark ground at arm's length: the well lifts, the
   border goes white, and a soft ring separates it from its neighbours. */
.cp-input:focus,
.cp-select:focus,
.cp-textarea:focus {
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--cp-white);
  box-shadow: 0 0 0 3px rgba(247, 247, 245, 0.12);
  outline: none;
}

.cp-field.has-error .cp-input,
.cp-field.has-error .cp-select,
.cp-field.has-error .cp-textarea {
  border-color: var(--cp-danger);
}

.cp-error {
  color: var(--cp-danger);
  font-size: 0.85rem;
  margin: 0;
}

.cp-error-form {
  margin: 0 0 var(--cp-4);
}

/* The honeypot. Kept out of sight without `display: none`, which some automated
   fillers skip — the point is that a bot CAN reach it. */
.cp-trap {
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.cp-submit-row {
  display: flex;
}

/* THE ONE WARM FILL ON THE PAGE, AND THE ONLY EXCEPTION TO "EDGES ONLY".
   It earns it: this is the last action in the funnel, and inside a plane whose
   every other element is grey it is the thing that must be unmistakable. The
   champagne is the same muted token used on the hairlines, not a brighter or
   more saturated "button gold", and the label is the page's own black on it —
   11.6:1, well past AA. A white button would have been louder here, not
   quieter: pure white is the highest-contrast surface on a black page.

   Rendered, the fill was right at desktop width and too loud stretched edge to
   edge on a phone — the same colour, four times the area, became the loudest
   thing on a page whose whole palette is black, white and hairlines. The fix
   is the area, not the colour: an intrinsic-width pill everywhere, with the
   tap target held at 48px+ by the vertical padding. */
.cp-submit {
  align-self: flex-start;
  flex: 0 0 auto;
  background: var(--cp-warm);
  border: 1px solid var(--cp-warm);
  border-radius: 999px;
  color: var(--cp-black);
  cursor: pointer;
  font: inherit;
  /* Set in the same tracked caps as the hero action, so the two reads as one
     language rather than as a campaign button and a form button. */
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 1.05rem 2rem;
  text-transform: uppercase;
  transition: opacity 180ms ease;
}

.cp-submit:hover {
  background: #d6c3a3;
  border-color: #d6c3a3;
}

.cp-submit[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Said once on the form and again on the confirmation. Never in small print. */
/* Understated, but readable. Secondary in colour and size — never in
   legibility, because this is the sentence that sets the applicant's
   expectations and it must not read as small print. */
.cp-disclaimer {
  color: var(--cp-silver-dim);
  font-size: 0.94rem;
  line-height: 1.65;
  margin: var(--cp-4) 0 0;
  max-width: 46ch;
}

/* --- 4 · Más información -------------------------------------------------- */

.cp-more {
  padding: 0 0 var(--cp-6);
}

.cp-more-list {
  margin: var(--cp-5) 0 0;
  max-width: 46rem;
}

.cp-acc {
  border-top: 1px solid var(--cp-line);
}

.cp-acc:last-child {
  border-bottom: 1px solid var(--cp-line);
}

.cp-acc summary {
  align-items: center;
  color: var(--cp-white);
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  font-weight: 400;
  gap: 1rem;
  justify-content: space-between;
  letter-spacing: -0.01em;
  list-style: none;
  padding: var(--cp-3) 0;
}

.cp-acc summary::-webkit-details-marker {
  display: none;
}

/* Typographic rather than an icon: one character, no asset, and it reads at any
   size. */
.cp-acc summary::after {
  color: var(--cp-silver-dim);
  content: '+';
  flex: none;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
}

.cp-acc[open] summary::after {
  content: '–';
}

.cp-acc-body {
  color: var(--cp-silver-dim);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  max-width: 56ch;
  padding: 0 0 var(--cp-3);
}

/* --- 5 · Footer ----------------------------------------------------------- */

.cp-foot {
  align-items: center;
  border-top: 1px solid var(--cp-warm-faint);
  color: var(--cp-silver-dim);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.68rem;
  font-weight: 500;
  gap: 1rem;
  justify-content: space-between;
  letter-spacing: 0.16em;
  margin: 0 auto;
  max-width: 78rem;
  padding: var(--cp-4) var(--cp-gutter) var(--cp-5);
  text-transform: uppercase;
  width: 100%;
}

.cp-foot img {
  display: block;
  height: 14px;
  opacity: 0.72;
  width: auto;
}

/* --- Privacidad ----------------------------------------------------------- *
 *
 * Una página para leer, no para mirar: columna angosta, texto plano, sin
 * escenario. Arranca debajo de la marca de arriba, que va en absoluto. */

.cp-legal {
  padding: calc(var(--cp-6) + 1rem) 0 var(--cp-6);
}

.cp-legal-fecha {
  color: var(--cp-silver-dim);
  font-size: 0.9rem;
  margin: var(--cp-2) 0 0;
}

.cp-legal-texto {
  color: var(--cp-silver);
  font-size: 1rem;
  line-height: 1.65;
  margin-top: var(--cp-4);
  max-width: 66ch;
}

.cp-legal-texto h2 {
  color: var(--cp-white);
  font-size: 1.05rem;
  font-weight: 600;
  margin: var(--cp-4) 0 var(--cp-1);
}

.cp-legal-texto p,
.cp-legal-texto ul {
  margin: 0 0 var(--cp-2);
}

.cp-legal-texto ul {
  padding-left: 1.2rem;
}

.cp-legal-texto li {
  margin-bottom: var(--cp-1);
}

.cp-legal-texto strong {
  color: var(--cp-ivory);
  font-weight: 600;
}

.cp-legal-texto a {
  color: var(--cp-warm-bright);
}

/* --- Confirmation --------------------------------------------------------- */

.cp-thanks {
  align-items: center;
  display: flex;
  min-height: 100svh;
  padding: var(--cp-6) 0;
  position: relative;
}

.cp-thanks-body {
  color: var(--cp-silver);
  font-size: clamp(1rem, 4vw, 1.15rem);
  line-height: 1.55;
  margin: var(--cp-3) 0 0;
  max-width: 40ch;
}

.cp-back {
  align-items: center;
  color: var(--cp-silver-dim);
  display: inline-flex;
  gap: 0.6rem;
  font-size: 0.9rem;
  margin-top: var(--cp-5);
  text-decoration: none;
}

.cp-back:hover {
  color: var(--cp-white);
}

/* --- Reveal --------------------------------------------------------------- *
 *
 * Armed only by landing.js adding .cp-js to <html>. A browser without
 * IntersectionObserver, or with JavaScript off, renders every crest visible
 * from the start — the reveal is decoration and must never be load-bearing. */

.cp-js .cp-crest {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 900ms var(--cp-ease) calc(var(--i, 0) * 65ms),
    transform 900ms var(--cp-ease) calc(var(--i, 0) * 65ms);
}

.cp-js .cp-crest.is-in {
  opacity: 1;
  transform: none;
}

/* --- Tablet --------------------------------------------------------------- */

@media (min-width: 700px) {
  .cp-headline {
    font-size: clamp(3.1rem, 7.5vw, 4.6rem);
  }

  .cp-figure {
    height: clamp(20rem, 46svh, 28rem);
  }

  /* Two columns for the four short contact fields. The question and the submit
     stay full width: one is the only interesting thing on the form and the
     other is the end of it, and neither wants to be half a row. */
  .cp-form {
    column-gap: clamp(1.25rem, 3vw, 2.25rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Fields bottom-align, so a label that wraps to two lines — the US question
     is a full sentence and does at narrower desktop widths — cannot knock its
     own input out of line with the one beside it. Letting it share a row
     instead of taking the whole one is also what keeps EMAIL from sitting
     alone with a hole next to it. */
  .cp-form {
    align-items: end;
  }

  /* `.cp-field-question` was the textarea, which closed the two-column block by
     spanning it. The question is gone and EMAIL is the last field now, so it
     inherits the job — otherwise five fields in two columns leave a hole beside
     EMAIL with the send button underneath it. */
  .cp-field-wide,
  .cp-submit-row {
    grid-column: 1 / -1;
  }

  /* Still 4 x 2, as approved. A row of eight only earns its place once there is
     width enough for each shield to keep its presence. */
  .cp-crests {
    gap: clamp(1.25rem, 3vw, 2.25rem);
  }
}

/* --- Desktop -------------------------------------------------------------- */

@media (min-width: 1024px) {
  /* THE CAMPAIGN FRAME, AT FULL WIDTH.
     Proportions taken off the art direction rather than from a column system.
     In the reference the copy block runs from 6% to ~44% of the frame and the
     cup occupies the right 45%, its centre at 65%; the whole thing — including
     the places row — fits one 3:2 frame. So the opening is given roughly one
     viewport and the two blocks are placed at those fractions, which is why
     this is an asymmetric grid rather than the 50/50 split the previous pass
     defaulted to. */
  .cp-opening {
    /* The cup's true centre in this grid, measured in the browser
       rather than guessed: 0.92fr/1.08fr inside a 96rem max-width with the
       gutters above puts it at 71.5% of the viewport. The light has to be
       anchored to the object, not to a round number. */
    --cp-light-x: 71.5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* ONE VIEWPORT, WHOLE. The frame must CONTAIN the places row, not run past
       it: in the art direction the rule sits at 79% of the frame and the
       shields at 84-94%, all inside the same picture. An earlier attempt let
       this element grow to 1078px inside a 900px viewport and the eight places
       — the closing movement of the composition — fell below the fold, which
       put the page straight back to "hero, then a separate section". Every
       height below is budgeted against that. */
    min-height: min(100svh, 56rem);
    padding: clamp(2.5rem, 5svh, 3.4rem) 0 clamp(0.25rem, 0.8svh, 1rem);
  }

  .cp-hero-inner {
    align-items: center;
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    /* Copy left, cup right, at the reference's ratio. */
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    margin: 0 auto;
    max-width: 96rem;
    padding: 0 clamp(2rem, 5vw, 4.5rem);
  }


  /* The alignment is now identical to mobile's — one left rail — so this only
     widens the measure. The explicit left/flex-start values are kept as a
     guard: if the mobile column is ever centred again, desktop must not follow
     it. */
  .cp-hero-copy {
    align-items: flex-start;
    max-width: 40rem;
    text-align: left;
  }

  /* THE APPROVED DESKTOP COMPOSITION, REBUILT FROM THE SAME FOUR NODES.
     Below 1024px the CTA, the video and the trophy are siblings in DOM order,
     which is the mobile reading order. Here they are placed instead: copy and
     CTA stack in column one, the trophy spans both of those rows in column two,
     and the video takes a full-width row underneath — which is exactly where it
     rendered before this change. Grid is the only mechanism that can do this;
     `order` cannot put the CTA back beneath the copy while the trophy sits
     alongside both. Desktop is not redesigned, it is restored. */
  .cp-hero-inner { grid-template-rows: auto auto auto; }
  .cp-hero-inner > .cp-hero-copy { grid-column: 1; grid-row: 1; }
  .cp-hero-inner > .cp-hero-cta  { grid-column: 1; grid-row: 2; align-self: start; }
  .cp-hero-inner > .cp-figure    { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .cp-hero-inner > .cp-mariano   { grid-column: 1 / -1; grid-row: 3; }

  /* The space between the date and the CTA used to come from .cp-hero-copy's
     own flex gap. As a separate grid row the CTA loses it, so it is restated
     here and the rail spacing is unchanged. */
  .cp-hero-inner > .cp-hero-cta { margin-top: clamp(0.1rem, 1vw, 0.6rem); }

  /* And the standalone section's breathing room, now that the video is a grid
     row rather than a band of its own. */
  .cp-hero-inner > .cp-mariano {
    padding-top: clamp(4.5rem, 11vw, 8.5rem);
    padding-bottom: clamp(3.5rem, 8vw, 6rem);
  }

  .cp-cta {
    align-self: flex-start;
  }

  /* Big. In the reference the headline is the second-largest object in the
     frame after the cup, and at the previous pass's size it was neither. */
  /* The lockup opens the left editorial column. The mark grows 46 -> 58px and
     COPA 10.5 -> 12px, and the tracking is RE-SOLVED for that pair rather than
     scaled: the word has to span the mark's new ink width, and the relationship
     between the two sizes is not the same at both breakpoints. The margins move
     with it for the same reason — both are derived from the mark's own width
     and height, which have changed. */
  .cp-lockup-word {
    font-size: 12px;
    letter-spacing: 27.467px;
    margin-bottom: 5.14px;
    margin-left: -0.202px;
    margin-right: -27.467px;
    /* Reachable gaps here are 7.33 / 8.33 / 9.33px; the approved 0.145 x 58px
       = 8.41px falls between, so the same two-part treatment applies. */
    transform: translateY(-0.08px);
  }

  .cp-lockup-mark {
    height: 58px;
  }

  /* Bigger again. In the reference the headline block fills 16% of the frame
     height and runs to 44% of its width; at the previous size it stopped at
     37% and left a dead band between the type and the cup. */
  .cp-headline {
    font-size: clamp(3.4rem, 5.6vw, 5.6rem);
  }

  .cp-subline {
    font-size: clamp(0.8rem, 0.95vw, 0.92rem);
  }

  /* COMMANDING, AND GROUNDED. Height rather than width drives it: the cup runs
     nearly the full height of the reference frame. `align-self: end` stands it
     on the floor line instead of floating it in the middle of its cell, which
     is what lets the floor pool land at its feet. */
  /* On desktop the column drives it: the plate takes the full width of its
     cell and its own aspect gives the height, so the scene is never cropped in
     either direction. */
  .cp-figure {
    align-self: center;
    height: auto;
    margin-top: 0;
    max-width: none;
    width: 100%;
  }

  /* THE BENEFIT SHARES THE FORM'S COLUMN, AND CHANGES SHAPE WITH IT.
     Both of these rules were briefly in the 700px block while the form takes
     its column at 1024px — which would have left 700-1023px with the benefit
     constrained to a 62rem column and the form still full-gutter, i.e. the
     exact misalignment this rule exists to fix, just moved to a narrower band.
     Composition and alignment change at the same breakpoint or not at all.
     It is the transition INTO the form, and on a wide screen the two were
     starting on different left edges — the benefit block 42px left of "Postulá
     a tu equipo" below it. Two different starts in consecutive sections read as
     carelessness, which is the same reason --cp-column exists at all. */
  /* Capped on the INNER blocks, not on the section — which is exactly how
     .cp-apply .cp-heading is capped. Capping the section instead let the
     benefit start at the viewport edge minus its own centring margin while the
     form started at the gutter, and at 1024px precisely those two disagreed by
     45px. Matching the mechanism, not just the number, makes them agree at
     every width. */
  .cp-benefit-inner {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--cp-column);
  }

  /* TWO COLUMNS, AND THE MARK TAKES THE SPACE THE TEXT WAS NOT USING.
     Stacked, the copy ran to about 55% of the column and left ~640px of empty
     black to its right while the mark sat underneath at 72px wide. The mark now
     occupies that space instead.

     `align-items: center` centres it against the ROW, and the row is exactly
     the headline plus the paragraph — the rule is deliberately outside this
     grid (see views/landing.ejs), so this is optical centring on the text
     composition rather than alignment to either edge of it.

     The 1.05fr/auto split with a wide gap is what keeps the negative space
     between the two: the text keeps its own measure, the mark keeps its air. */
  .cp-benefit-grid {
    align-items: center;
    display: grid;
    gap: clamp(2.5rem, 6vw, 5rem);
    grid-template-columns: minmax(0, 1.05fr) auto;
  }

  .cp-benefit-mark {
    margin-top: 0;
    width: clamp(10rem, 14.5vw, 13.5rem);
  }

  /* Eight across, closing the frame. A lineup of contenders, which two rows of
     four cannot be. Wider than the old 62rem column: the reference runs the row
     from 10% to 90% of the frame, nearly edge to edge, and that width is what
     makes it read as the base of the composition. */
  /* MEASURED, NOT COMPOSED BY EYE.
     In the art direction each shield is 89px wide in a 1536px frame — 5.8% of
     the width — and the gap between them is 72px, a full 0.8x the shield's own
     width. The row spans 10.5% to 89.6%. Those two facts together are what make
     it read as eight reserved positions rather than as a row of icons: the
     shields are small and the air between them is enormous. The previous pass
     had 141px shields separated by 26px, which is the opposite composition.

     8C + 7G = row, with G = 0.8C, gives C = row/13.6 — hence these numbers. */
  .cp-crests {
    /* Every value in this block is budgeted so the shields land INSIDE the
       viewport at 1440x900. The frame is only the composition it manages to
       contain. */
    margin-top: clamp(1.1rem, 2.6svh, 1.7rem);
    gap: min(4.6vw, 4.9rem);
    grid-template-columns: repeat(8, minmax(0, 1fr));
    margin-left: auto;
    margin-right: auto;
    max-width: min(79vw, 84rem);
  }

  .cp-places {
    padding: clamp(0.8rem, 2svh, 1.2rem) 0 0;
  }

  .cp-places .cp-section {
    max-width: 84rem;
    padding: 0 clamp(2rem, 5vw, 4.5rem);
  }

  .cp-places-note {
    text-align: center;
  }

  /* The application area gets a deliberate column instead of the whole width.
     V1 left the form narrow and hard against the left gutter with an ocean of
     unused black beside it, which read as an accident rather than as
     composition. Centring the plane and letting the fields pair up uses the
     width on purpose and keeps the measure readable. */
  .cp-plane {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--cp-column);
    padding: clamp(2.4rem, 3.4vw, 3.4rem) clamp(2.4rem, 3.4vw, 3.6rem) clamp(2.6rem, 3.8vw, 3.8rem);
  }

  .cp-apply .cp-label,
  .cp-apply .cp-heading,
  .cp-apply .cp-disclaimer {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--cp-column);
  }

  .cp-apply .cp-heading {
    font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  }
}

/* --- Reduced motion ------------------------------------------------------- */

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

  .cp-js .cp-crest {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cp-cta,
  .cp-cta-arrow,
  .cp-input,
  .cp-textarea,
  .cp-submit,
  .cp-plate-rail,
  .cp-venue-map,
  .cp-venue-arrow {
    transition: none;
  }

  /* The arrow's nudge on hover is decoration; the link works without it. */
  .cp-venue-map:hover .cp-venue-arrow {
    transform: none;
  }
}