/* ═══════════════════════════════════════════════════════════════════════════
   /  — the language gate.  MODERN TECHNICAL.  Prefix: lang-
   Self-contained: this page no longer loads /styles.css, /sections.css or
   /css/promo-banner.css. It has no header, no banner and no form, so it links
   nothing but this sheet. The 94 legal pages that share those stylesheets are
   therefore untouched by anything written here.

   Same system as /pt/pv-mda-ht (the approved reference), same 32 tokens, same
   two faces, same one easing curve. What is different is the JOB: 28 words and
   two doors. So the page is one OBJECT rather than a run of sections.

   The direction, in four rules:
   1. The same tone steps, the same hairlines, the same flat brand-green button.
      The photograph is the ground; the gate is a raised plate seated on it.
   2. THE SIGNATURE — the pipe. Both lines of copy are already split by "|":
      Welcome | Bem-vindo · Select your language | Selecione o seu idioma.
      That glyph is set in the mono face, in accent, and then made structural:
      the same 1px seam runs down the middle of the plate, between the two
      choices. The page's one ornament is a punctuation mark the copy already
      had. Nothing is added, nothing is reworded.
   3. Full colour on every mark. The two flags and the lock-up are never
      dimmed, never desaturated; each flag sits on a neutral plate with a
      hairline so light artwork has something to sit on. Only the PHOTOGRAPH
      carries an art-directed filter.
   4. It is a redirect gate, not a destination: one stylesheet, two preloaded
      faces, no external JS. The motion is the reference's arrival gesture and
      nothing else — plus its scroll-idle sweep, because a short viewport can
      still put a choice below the fold.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── faces ────────────────────────────────────────────────────────────────── */
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-500.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── tokens ───────────────────────────────────────────────────────────────── */
/* Copied verbatim from /css/pvmdahtpt.css — 32 tokens, same names, same values. */
:root{
  --ink:#08090B;          /* page ground                                   */
  --ink-2:#0B0D10;        /* recessed band                                 */
  --surface:#101317;      /* raised panel                                  */
  --surface-2:#161A1F;    /* nested cell / hover                           */
  --surface-3:#191D22;    /* top layer                                     */
  --rule:rgba(255,255,255,.075);
  --rule-2:rgba(255,255,255,.145);
  --fg:#EEF1F4;
  --fg-2:#A6AEB6;
  --fg-3:#767E86;
  --acc:#3BE39C;          /* fine accent only: rules, ticks, marks, labels  */
  --acc-soft:rgba(59,227,156,.34);

  /* the brand green. ONE job on this page: the primary button. It is never a
     headline word, never a panel, never a field of colour. */
  --brand:#00FF95;
  --brand-hi:#5BFFBC;     /* hover — lighter, never a glow                  */
  --brand-lo:#00DD81;     /* pressed                                        */
  --brand-ink:#04231A;    /* the type that sits on it                       */

  --ease:cubic-bezier(.22,.61,.36,1);

  --sans:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --pad:clamp(20px,5vw,48px);
  --gap:clamp(16px,2.2vw,32px);
  --sec:clamp(56px,6.3vw,96px);
  --radius:6px;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
.lang-page{
  margin:0;background:var(--ink);color:var(--fg-2);
  font-family:var(--sans);font-size:16px;line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;min-height:100dvh;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;
}
:where(.lang-page) :where(img,svg){max-width:100%}
.lang-page p{margin:0}
.lang-page h1{margin:0;font-weight:700}
/* zero specificity on purpose. `.lang-page a` weighs 0-1-1 and would silently
   out-rank `.lang-cta--primary` (0-1-0) — that alone put --fg-2 type on the
   green button and made the one decision on the page unreadable. */
:where(.lang-page) a{color:inherit;text-decoration:none}

:where(a,button):focus-visible{
  outline:2px solid var(--acc);outline-offset:3px;border-radius:2px;
}

/* ── the ground ───────────────────────────────────────────────────────────────
   The one photograph on the page. Cropped, not dropped in at native ratio, and
   art-directed down to a texture so the plate has something to sit ON without
   competing with it. A filter is legitimate here and ONLY here — no mark on
   this page is ever dimmed. */
.lang-ground{
  position:fixed;inset:0;z-index:0;pointer-events:none;
/* Scaled past `cover` on purpose. At cover the dot-wave is a small bright band
   that lands wherever the viewport ratio puts it and reads as a smudge; at 190%
   it opens into a field the plate can sit INSIDE. The brightness is doing the
   same job the reference's saturate() does on its hero art — the source frame
   is almost black, so it has to be lifted before any of it is visible at all. */
  background:url(/assets/2024_07_select_language-1.avif) 50% 30%/190% auto no-repeat var(--ink);
  filter:saturate(.16) contrast(1.2) brightness(2.3);
}
/* seats the photograph into the page instead of letting it float, exactly as
   the reference seats its hero plate */
.lang-ground::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(80% 56% at 50% 48%,rgba(8,9,11,.94),rgba(8,9,11,.25) 86%),
    linear-gradient(to bottom,rgba(8,9,11,.62),rgba(8,9,11,0) 30%,rgba(8,9,11,0) 66%,rgba(8,9,11,.9));
}

/* ── the gate ─────────────────────────────────────────────────────────────── */
.lang-gate{
  position:relative;z-index:1;grid-row:1;
  display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;
  padding:var(--sec) var(--pad) calc(var(--sec) * .5);
}

/* THE PLATE. Hairline border, a single accent hairline capping it, the inset
   top highlight every plate in this system carries, and one soft drop so it
   reads as a raised object on the photograph. No glow. */
.lang-door{
  width:100%;max-width:720px;
  padding:clamp(28px,3.6vw,52px);
  border:1px solid var(--rule);border-top:1px solid var(--acc-soft);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0)),var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 90px -40px rgba(0,0,0,.9);
  display:grid;grid-template-columns:minmax(0,1fr);
}

/* ── masthead ─────────────────────────────────────────────────────────────── */
.lang-door__head{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;row-gap:var(--s4)}
/* the lock-up: full colour, never a filter, never an opacity */
.lang-mark{
  width:clamp(168px,17vw,208px);height:auto;display:block;
  margin-bottom:var(--s4);
}
.lang-title{
  font-size:clamp(2.05rem,1.3rem + 2.7vw,3.4rem);
  line-height:1.06;letter-spacing:-.033em;font-weight:700;
  color:#C9D1D8;text-wrap:balance;
}
.lang-sub{
  font-size:clamp(1rem,.95rem + .25vw,1.14rem);line-height:1.62;
  color:var(--fg-2);max-width:62ch;text-wrap:balance;
}

/* THE SIGNATURE. The pipe the copy already contains, set in the mono face and
   in accent — the page's only ornament. Its advance width is pinned so a font
   swap can never move the line it sits in (CLS stays at zero). */
.lang-seam{
  display:inline-block;width:.72em;text-align:center;
  font-family:var(--mono);font-weight:400;color:var(--acc);
  letter-spacing:0;
}
.lang-title .lang-seam{margin:0 .1em;font-size:.74em;vertical-align:.02em}
.lang-sub .lang-seam{margin:0 .06em;font-size:.9em;color:var(--acc-soft)}

/* ── the rule between the masthead and the doors ──────────────────────────── */
.lang-rule{
  position:relative;height:1px;margin-block:clamp(28px,3.4vw,44px);
  background:var(--rule);
}
.lang-rule::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--acc-soft),rgba(59,227,156,0) 58%);
  transform-origin:0 50%;
}

/* ── the two doors ────────────────────────────────────────────────────────── */
.lang-choices{
  position:relative;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:calc(var(--gap) * 2);
}
/* the seam: the same glyph, made structural — neutral hairline with the pipe's
   own accent at its core, in the same place the pipe sits in the line above. */
.lang-choices::before{
  content:"";position:absolute;left:50%;top:-6px;bottom:-6px;width:1px;
  margin-left:-.5px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--rule-2) 14%,var(--acc-soft) 50%,var(--rule-2) 86%,rgba(255,255,255,0));
  transform-origin:50% 50%;
}
/* .lang-choice is the positioned ancestor for the link's stretched hit area
   below — the whole cell, plate included, is one target. */
/* plate and button sit 12px apart so the pair reads as ONE control — the door
   leaf — while the doubled column gap keeps the two leaves plainly separate. */
.lang-choice{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:stretch;row-gap:var(--s3);
}
/* NOTHING inside the cell may be positioned. The link's hit area below is an
   absolutely positioned ::after that has to resolve against .lang-choice — the
   moment the anchor itself becomes a containing block the hit area collapses
   back onto the button and clicking the flag stops working. Measured: it did.
   So the hover feedback is carried by the plate and the button's own colour,
   not by a wash layer that would need to sit above them (and would put a veil
   over a national flag, which this page never does). */

/* the flag on a neutral plate. Light artwork gets a plate, never a dimming. */
.lang-plate{
  display:grid;place-items:center;
  width:100%;aspect-ratio:16/10;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.lang-flag{display:block;width:84px;height:84px;object-fit:contain;object-position:center}
.lang-choice:hover .lang-plate,
.lang-choice:focus-within .lang-plate{border-color:var(--rule-2);background:var(--surface-3)}

/* ── the button ───────────────────────────────────────────────────────────── */
.lang-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;border-radius:var(--radius);
  border:1px solid transparent;background:none;cursor:pointer;
  font-size:.8125rem;font-weight:600;letter-spacing:.015em;line-height:1.2;
  text-align:center;
  transition:background-color .16s var(--ease),border-color .16s var(--ease),
             color .16s var(--ease),transform .13s var(--ease);
}
/* THE brand button. Flat green, dark ink, no glow, no offset stamp shadow —
   the weight comes from the colour and the type, not from an effect. Both
   choices carry it: the page must not put a thumb on either language. */
.lang-cta--primary{
  background:var(--brand);color:var(--brand-ink);border-color:var(--brand);
  font-weight:700;letter-spacing:.055em;padding:0 28px;
}
.lang-cta--primary:hover{background:var(--brand-hi);border-color:var(--brand-hi)}
.lang-cta--primary:active{background:var(--brand-lo);border-color:var(--brand-lo)}
.lang-cta--primary:focus-visible{outline-color:var(--fg)}
.lang-anim .lang-cta--primary:hover{transform:translateY(-1px)}
.lang-anim .lang-cta--primary:active{transform:translateY(0)}

/* the choice's whole area is the hit target — flag included — so the plate and
   the button are one decision, not two. No new link: this is the existing
   anchor, stretched. */
/* The reference's CTAs are set in caps because its SOURCE COPY is in caps. Here
   the copy is "English" and "Português", so they stay that way: text-transform
   is not a style-only change — innerText reports the transformed string, and a
   word diff against HEAD reads it as two words lost and two invented. Same
   weight, same colour, same states; only the tracking eases off, because caps
   tracking on lowercase reads loose. */
.lang-choice__link{
  width:100%;min-height:52px;
  flex-direction:row-reverse;gap:10px;
  font-size:.9375rem;letter-spacing:.012em;
}
/* the reference's 1px lift is switched OFF here, and only here: a transform on
   the anchor makes the anchor the containing block for this ::after, which
   shrinks the hit area off the flag, which un-hovers, which drops the
   transform — a flicker loop. The colour states are untouched. */
.lang-anim .lang-choice__link:hover,
.lang-anim .lang-choice__link:active{transform:none}
/* the whole cell — flag included — is one hit target. Resolves against
   .lang-choice, which is the only positioned box in here. */
.lang-choice__link::after{content:"";position:absolute;inset:-12px -14px;border-radius:var(--radius)}
.lang-choice__link svg{flex:0 0 auto;width:18px;height:18px}
.lang-choice__link svg path{fill:currentColor}

/* ── footer ───────────────────────────────────────────────────────────────── */
.lang-foot{
  position:relative;z-index:1;grid-row:2;
  padding:var(--s6) var(--pad) var(--s7);
}
.lang-foot__inner{width:100%;max-width:720px;margin-inline:auto}
.lang-foot__copy{
  font-family:var(--mono);font-size:.75rem;line-height:1.5;letter-spacing:.04em;
  color:var(--fg-3);
}

/* ── ≤767px: the doors stack, the seam turns ──────────────────────────────── */
@media (max-width:767px){
  /* a phone frame is already a crop of the field — don't magnify it further */
  .lang-ground{background-size:330% auto;background-position:50% 22%}
  .lang-gate{padding:var(--s7) var(--pad) var(--s5)}
  .lang-door{padding:clamp(22px,6vw,32px)}
  .lang-mark{width:clamp(150px,44vw,190px)}
  .lang-choices{grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
  .lang-choices::before{
    left:-4px;right:-4px;top:50%;bottom:auto;width:auto;height:1px;margin:-.5px 0 0;
    background:linear-gradient(90deg,rgba(255,255,255,0),var(--rule) 18%,var(--rule) 82%,rgba(255,255,255,0));
  }
  /* a phone has no room for a 16:10 leaf twice over — the plate becomes a band */
  .lang-plate{aspect-ratio:auto;height:104px}
  .lang-flag{width:64px;height:64px}
  .lang-foot{padding:var(--s5) var(--pad) var(--s6)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION
   Nothing here is a resting state. The controller adds .lang-anim to <html>
   and sets [data-rv] on the elements it will move — with JavaScript off, or
   with prefers-reduced-motion, neither exists and the page is simply the page.
   Only transform and opacity are animated, so nothing reflows and cumulative
   layout shift stays at zero.
   ═══════════════════════════════════════════════════════════════════════════ */

/* scroll entrance — 320ms, one direction, once */
.lang-anim [data-rv]{opacity:0;transform:translate3d(0,12px,0)}
.lang-anim [data-rv].is-in{
  opacity:1;transform:none;
  transition:opacity .32s var(--ease) var(--rv-d,0ms),transform .32s var(--ease) var(--rv-d,0ms);
}
/* the gate arrives on load, a little shorter and a little tighter */
.lang-anim [data-rv="hero"]{transform:translate3d(0,10px,0)}
.lang-anim [data-rv="hero"].is-in{
  transition:opacity .3s var(--ease) var(--rv-d,0ms),transform .3s var(--ease) var(--rv-d,0ms);
}

/* THE signature in motion: the hairline under the masthead draws itself in from
   the left, and the seam between the two doors draws itself down. One gesture,
   one curve, used twice — it is the page's own rule, not a new decoration.
   The undrawn state lives ONLY under .lang-anim, so with JavaScript off both
   rules are simply present. */
.lang-anim .lang-rule::before{transform:scaleX(0)}
.lang-anim .lang-choices::before{transform:scale3d(1,0,1)}
.lang-anim .is-ruled::before{transform:none;transition:transform .4s var(--ease)}
.lang-anim .lang-rule.is-ruled::before{transition-delay:180ms}
.lang-anim .lang-choices.is-ruled::before{transition-delay:240ms}
/* stacked, the seam is horizontal — so is its gesture. Stated after the rule
   above, or the vertical axis would silently win at every width. */
@media (max-width:767px){
  .lang-anim .lang-choices::before{transform:scale3d(0,1,1)}
  .lang-anim .lang-choices.is-ruled::before{transform:none}
}

/* ── OFF. Every reveal resolved, every transition dropped. ─────────────────── */
@media (prefers-reduced-motion:reduce){
  html,.lang-anim{scroll-behavior:auto !important}
  .lang-page *,.lang-page *::before,.lang-page *::after{
    transition:none !important;animation:none !important;
  }
  [data-rv]{opacity:1 !important;transform:none !important}
  .lang-rule::before,.lang-choices::before{transform:none !important}
  .lang-anim .lang-cta--primary:hover{transform:none}
}