/* ==========================================================================
   EuphoricQuartz — design system 3D (branch design/3d-ds, local experiment)

   The design system of the 3d-website prototype, applied to the homepage:
   - type: Syne ExtraBold, upper-case and tight, for display; Inter for text
     and for the labels (upper-case, wide tracking) — no mono;
   - colour: near-black #07070c and a warm off-white #f3f0ea, the grey ramp
     as alpha steps of that white; the accent is the prototype's palettes,
     one per section (see "Colour" below) — no single brand violet;
   - surfaces: glass cards (4% white, 1px hairline, 22px radius), pill
     buttons that invert on hover, no section rules;
   - motion and texture: film grain, a round difference-blend cursor that
     grows on links and on the crystal, a loading counter.

   Loaded last, after styles.css and home3d.css, so it restyles without
   touching them: rolling this back is removing one <link> (and the loader
   markup), or switching branch.
   ========================================================================== */

/* --- Fonts (self-hosted, latin subset, variable; SIL OFL) ------------------ */

@font-face {
  font-family: 'Syne';
  src: url('/assets/fonts/syne-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens ----------------------------------------------------------------
   Same names as styles.css, so every existing rule picks the new values up.
   The text steps are alpha on --fg; the lowest (--t-4, 55%) is still 5.9:1
   on --bg. --bg and --fg stay hex: crystal.js and oscilloscope.js parse them. */

:root[data-theme='dark'] {
  --bg: #07070c;
  --fg: #f3f0ea;
  --fg-strong: #ffffff;
  --t-0: rgba(243, 240, 234, 0.92);
  --t-1: rgba(243, 240, 234, 0.74);
  --t-2: rgba(243, 240, 234, 0.66);
  --t-3: rgba(243, 240, 234, 0.6);
  --t-4: rgba(243, 240, 234, 0.55);
  --t-5: rgba(243, 240, 234, 0.58);
  --line: rgba(243, 240, 234, 0.14);
  --line-2: rgba(243, 240, 234, 0.26);
  --field: rgba(243, 240, 234, 0.38);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --bullet: rgba(243, 240, 234, 0.4);
  --header-bg: rgba(7, 7, 12, 0.55);
  --focus: #f3f0ea;

  --glass: rgba(255, 255, 255, 0.04);
  --display: 'Syne', 'Archivo', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --r-card: 22px;
  --r-pill: 999px;
  --section-pad: clamp(96px, 16vh, 180px);

  /* Default palette (header, footer, cursor, progress rule): iris. */
  --q-1: #00d4ff;
  --q-2: #8a6bff;
  --q-3: #ff4fd8;
}

/* --- Colour: one palette per section ---------------------------------------
   The 3d-website changes the blob's colours section by section; here each
   section carries its own three stops, and everything that reads --q-*
   inside it — the title phrase, the team labels, a card's number on hover,
   the light under the pointer, the filled button's hover — follows. The
   crystal reads the same tokens off each section (crystal.js) and blends
   between them as the page scrolls, so the scene and the type always agree.
   The prototype's darkest stops (#5b2bff, #2a6bff, #7b2fff) are lifted so
   every stop is at least 5:1 on --bg, as text and as a fill under dark text.

     iris    #00d4ff  #8a6bff  #ff4fd8   cyan · violet · pink
     ember   #ff5e3a  #ffb800  #9a85ff   coral · amber · lavender
     lagoon  #00c2a8  #4f86ff  #d1ff4f   teal · blue · lime
     neon    #ff2e88  #9b5cff  #00e5ff   magenta · violet · cyan

   The derived tokens are declared again on every section: a custom property
   resolves var() where it is declared, so the :root --quartzo would keep
   the :root stops. */

:root,
.section {
  --quartzo: linear-gradient(100deg, var(--q-1) 0%, var(--q-2) 55%, var(--q-3) 100%);
  --q-glow: color-mix(in srgb, var(--q-2) 16%, transparent);
}

.hero            { --q-1: #00d4ff; --q-2: #8a6bff; --q-3: #ff4fd8; }   /* iris */
.section-about   { --q-1: #ff5e3a; --q-2: #ffb800; --q-3: #9a85ff; }   /* ember */
.section-what    { --q-1: #00c2a8; --q-2: #4f86ff; --q-3: #d1ff4f; }   /* lagoon */
.section-work    { --q-1: #ff2e88; --q-2: #9b5cff; --q-3: #00e5ff; }   /* neon */
.section-team    { --q-1: #ff5e3a; --q-2: #ffb800; --q-3: #9a85ff; }   /* ember */
.section-contact { --q-1: #00c2a8; --q-2: #4f86ff; --q-3: #d1ff4f; }   /* lagoon */

body {
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Labels: Inter, upper-case, wide — the mono face is retired ------------- */

.eyebrow,
.field-label,
.cap-stack,
.fig-caption,
.work-count,
.footer-bar,
.lang-switch,
.hud,
.stats dt,
.hero-scroll {
  font-family: var(--body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.eyebrow {
  font-size: 12.5px;
  color: var(--t-4);
}

.field-label,
.cap-stack,
.fig-caption,
.work-count,
.footer-bar,
.hud {
  font-size: 11px;
  letter-spacing: 0.18em;
}

/* --- Display ---------------------------------------------------------------- */

.hero-title,
.section-title,
.contact-title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.hero-title {
  font-size: clamp(40px, 6.6vw, 116px);   /* "QUE FUNCIONA." has to fit one line */
  margin-bottom: 36px;
}

.section-title {
  font-size: clamp(32px, 4.4vw, 68px);
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.contact-title {
  font-size: clamp(42px, 5vw, 80px);
  margin-bottom: 28px;
}

.what-intro {
  max-width: 980px;
}

.what-intro .eyebrow,
.contact-copy .eyebrow {
  margin-bottom: 28px;
}

.what-intro .section-title {
  margin-bottom: 28px;
}

.what-intro .section-sub {
  max-width: 60ch;
}

.lede,
.section-sub,
.cap-body,
.team-list li,
.contact-sub {
  letter-spacing: -0.005em;
}

/* --- Header ----------------------------------------------------------------- */

.site-header {
  border-bottom-color: transparent;
}

.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.nav {
  font-weight: 500;
  letter-spacing: 0;
}

/* Section links: a hairline that draws in from the left on hover. */
.nav-sections {
  position: relative;
}

.nav-sections::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}

.nav-sections:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  padding: 0 20px;
  border-radius: var(--r-pill);
  border-color: var(--line-2);
  background: var(--glass);
}

.nav-cta:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

.controls {
  border-radius: var(--r-pill);
  border-color: var(--line-2);
  overflow: hidden;
}

.lang-switch {
  padding: 0 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

.lang-switch:hover {
  background: var(--fg);
  color: var(--bg);
}

/* --- Buttons: pills that invert, with an arrow that turns on hover ----------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.45s var(--ease);
}

.btn::after {
  content: "→";
  display: inline-block;
  transition: transform 0.45s var(--ease);
}

.btn:hover::after {
  transform: rotate(-45deg);
}

:root .btn-solid {
  background: var(--fg);
  color: var(--bg);
}

/* Hover lights the button in its section's gradient, dark text on it. */
:root .btn-solid:hover {
  background: var(--quartzo);
  color: var(--bg);
}

.btn-outline {
  border: 1px solid var(--line-2);
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.btn-outline:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

/* home3d.css cut the colour transitions on magnetic elements; this system
   fades them. */
.eq-magnetic {
  transition: transform 0.45s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* --- Sections: no rules between them, more air --------------------------------- */

:root .section {
  border-bottom: none;
  border-image: none;
}

.section-what,
.section-team {
  padding-block: var(--section-pad);
}

/* --- Hero: the title runs the full width, the crystal sits behind it ------- */

@media (min-width: 821px) {
  .hero .hero-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;   /* the grid's align-items: center would centre the copy */
  }

  /* The full-width title runs over the figure's top-left corner. */
  .hud-tl {
    display: none;
  }

  .hero-copy {
    position: relative;
    z-index: 1;
    max-width: none;
  }

  .hero-copy .lede {
    max-width: 46ch;
  }

  /* Out of the flow, on the right half. Positioned with insets and auto
     margins — never a transform: the 2D fallback canvas lives in here and a
     transformed ancestor would re-anchor it. */
  .hero-figure {
    position: absolute;
    top: 0;
    bottom: 0;
    right: clamp(20px, 5vw, 48px);
    width: 42%;
    height: min(500px, 68%);
    margin-block: auto;
  }
}

/* --- Cards: glass, rounded, two-up with the even ones dropped ------------- */

.cap-grid {
  border-bottom: none;
  gap: clamp(14px, 2vw, 28px);
}

.cap,
.cap-grid-2 .cap,
.cap-grid-2 .cap:nth-child(odd),
.cap-grid-2 .cap:nth-child(even) {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  padding: 32px 32px 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--glass);
  transition: border-color 0.4s, transform 0.6s var(--ease);
}

@media (pointer: fine) {
  .cap {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

.cap > :not(.cap-num) {
  grid-column: 1;
}

@media (min-width: 821px) {
  .cap-grid-2 .cap:nth-child(even) {
    margin-top: 56px;
  }
}

/* The number: big, outlined; it fills with the quartz gradient on hover. */
.cap-num {
  grid-row: auto;
  margin-bottom: 28px;
  padding-top: 0;
  font-family: var(--display);
  font-size: 58px;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
}

.eq-tilt:hover .cap-num {
  -webkit-text-stroke-color: transparent;
  background: var(--quartzo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cap-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.cap-body {
  font-size: 17px;
}

.cap-stack {
  color: var(--t-4);
}

/* Rounded cards: the light follows the radius; the straight hairline sweep
   of home3d.css gives way to the border lighting up. */
.eq-tilt::before,
.eq-glow::before {
  border-radius: inherit;
}

.eq-tilt::after {
  display: none;
}

.eq-tilt:hover {
  border-color: var(--line-2);
}

/* --- Team ------------------------------------------------------------------- */

.team-grid {
  padding: 44px;
  border-color: var(--line);
  border-radius: var(--r-card);
  background: var(--glass);
}

.team-name {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.bullet {
  border-radius: 50%;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px clamp(32px, 5vw, 64px);
  margin-top: 52px;
  border: none;
}

.stats > div,
.stats > div + div,
.stats > div:nth-child(3),
.stats > div:nth-child(n + 3) {
  padding: 0;
  border: none;
}

.stats dd {
  font-family: var(--display);
  font-size: clamp(40px, 4.4vw, 60px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--fg);
}

.stats dt {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--t-4);
}

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

.contact-grid {
  padding-block: var(--section-pad) clamp(96px, 14vh, 160px);
}

.contact-details {
  gap: 22px;
}

/* Email and phone as glass pills, like the 3d-website's contact link. */
.contact-value {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 14px 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--glass);
  font-family: var(--display);
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.45s var(--ease);
}

.contact-value::after {
  content: "→";
  font-family: var(--body);
  font-weight: 400;
  transition: transform 0.45s var(--ease);
}

.contact-value:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

.contact-value:hover::after {
  transform: rotate(-45deg);
}

.contact-form {
  padding: 42px 40px 44px;
  border-color: var(--line);
  border-radius: var(--r-card);
  background: var(--glass);
}

.contact-form input,
.contact-form textarea {
  font-family: var(--body);
  border-bottom-color: var(--line-2);
}

.form-status {
  border-radius: 0 12px 12px 0;
}

/* --- Footer ----------------------------------------------------------------- */

:root .site-footer {
  border-image: none;
  border-top: 1px solid var(--line);
}

.footer-brand .brand-name {
  font-size: 20px;
}

.footer-bar {
  border-top-color: var(--line);
}

/* --- HUD around the crystal ------------------------------------------------- */

.hud b {
  color: var(--t-1);
  font-weight: 500;
}

/* --- Cursor: one round dot, difference-blended, that grows -------------------- */

.eq-cursor {
  display: none;
}

.eq-reticle {
  mix-blend-mode: difference;
}

.eq-reticle::before,
.eq-cursor-link .eq-reticle::before,
.eq-crystal-hover .eq-reticle::before,
.eq-cursor-down .eq-reticle::before {
  border-radius: 50%;
  background: var(--fg-strong);
  rotate: 0deg;
}

.eq-reticle::before {
  width: 14px;
  height: 14px;
  transition: width 0.4s var(--ease), height 0.4s var(--ease);
}

.eq-cursor-link .eq-reticle::before {
  width: 64px;
  height: 64px;
}

.eq-crystal-hover .eq-reticle::before {
  width: 110px;
  height: 110px;
}

.eq-cursor-down .eq-reticle::before {
  width: 10px;
  height: 10px;
}

/* --- Film grain, as strong as the prototype's --------------------------------- */

.eq-3d body::after {
  opacity: 0.07;
}

/* --- Loading screen ------------------------------------------------------------
   Exists only while <html> has .eq-loading, which the inline script in <head>
   sets when scripts run and motion is welcome — never with JavaScript off or
   under reduced motion. motion.js counts to 100 and lifts it; the inline
   script removes the class after 5s whatever happens, so a failed script
   can never leave the page locked. */

.loader {
  display: none;
}

.eq-loading .loader,
.loader.is-leaving {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 5vw, 48px);
  background: var(--bg);
}

.loader.is-leaving {
  transform: translateY(-100%);
  transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}

/* No overflow: hidden on <html> while loading: it turned <body> (which has
   overflow-x: hidden) into a scroll container, and once it was lifted Chrome
   could keep the sticky header's position stale — the header scrolled away
   with the page and came back only later. Scrolling is held by the inline
   script in <head> instead (wheel, touch, keys), which leaves layout alone. */
.loader.is-leaving {
  pointer-events: none;
}

.loader-label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-4);
}

.loader-count {
  font-family: var(--display);
  font-size: clamp(80px, 18vw, 224px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* The hero's entrance waits behind the loader. */
.eq-loading .hero-copy > * {
  animation-play-state: paused;
}

/* --- Small screens -------------------------------------------------------------- */

@media (max-width: 820px) {
  .team-grid {
    padding: 30px 22px 32px;
  }

  .contact-form {
    padding: 30px 22px 32px;
  }

  .cap,
  .cap-grid-2 .cap,
  .cap-grid-2 .cap:nth-child(odd),
  .cap-grid-2 .cap:nth-child(even) {
    padding: 26px 24px 28px;
  }

  .cap-num {
    font-size: 46px;
    margin-bottom: 22px;
  }
}

/* Syne ExtraBold is wide — about 1em per capital, measured: on a phone the
   longest word of each title has to fit the column ("CONSTRUÍMOS.",
   "SELECIONADO.", "CONNOSCO.") down to 320px, so the display sizes follow
   the viewport width there. Wide letters (M, W, R, D) run to ~1.16em: a
   12-letter word full of them, like "PROGRAMADOR.", does not fit — reword
   rather than shrink every title. */
@media (max-width: 560px) {
  .hero-title {
    font-size: clamp(28px, 9.2vw, 56px);   /* "FUNCIONA." at 320px */
  }

  .section-title {
    font-size: clamp(20px, 7vw, 40px);
  }

  .contact-title {
    font-size: clamp(24px, 8.4vw, 48px);
  }

  .cap-title {
    font-size: 20px;
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-actions .btn {
    flex: 1 1 100%;
  }
}

@media (max-width: 420px) {
  .brand-name {
    font-size: 14px;
  }

  .nav-cta {
    padding: 0 12px;
  }
}

.nav-cta {
  white-space: nowrap;
}


@media (prefers-reduced-motion: reduce) {
  .btn::after,
  .contact-value::after,
  .nav-sections::after,
  .cap {
    transition: none;
  }
}

/* --- About: the quartz story, as one big paragraph that lights up -------- */

.section-about,
.section-work {
  padding-block: var(--section-pad);
}

.about-grid .eyebrow {
  margin-bottom: 28px;
}

.about-grid .section-title {
  margin-bottom: 44px;
}

.about-text {
  max-width: 21em;
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: pretty;
}

.section-about .stats {
  margin-top: 64px;
}

/* --- Cards dealt like a shuffled deck (motion.js) --------------------------
   While .eq-shuffle is on <html> the script owns each card's translate,
   rotate, scale and opacity — the individual transform properties, so the
   pointer tilt (transform) still composes on top. The scroll-timeline rise
   from styles.css is switched off for them; it would fight over translate. */

.eq-shuffle .cap,
.eq-shuffle .skill {
  animation: none;
  will-change: translate, rotate, scale, opacity;
}

/* Settled cards sit above the ones still travelling (motion.js gives those
   z-index 1–2), so an arriving card slides in under, never across. No
   clipping on the sections: motion.js keeps the pile inside the width
   instead (no sideways throw on one column), since a clip there could
   shave the turned cards. */
.eq-shuffle .cap,
.eq-shuffle .skill {
  position: relative;
  z-index: 3;
}

/* --- Progress rule: in the palette of the section being read --------------
   motion.js copies the section's --q-* onto the bar as --pq-*; registered
   here as colours so the change fades. */

@property --pq-1 { syntax: '<color>'; inherits: false; initial-value: #00d4ff; }
@property --pq-2 { syntax: '<color>'; inherits: false; initial-value: #8a6bff; }
@property --pq-3 { syntax: '<color>'; inherits: false; initial-value: #ff4fd8; }

.eq-progress {
  height: 2px;
  bottom: -1px;
  background: linear-gradient(90deg, var(--pq-1), var(--pq-2) 55%, var(--pq-3));
  transition: --pq-1 0.7s var(--ease), --pq-2 0.7s var(--ease), --pq-3 0.7s var(--ease);
}

/* --- Team: spread out, and something to touch --------------------------------
   .team-top is twelve columns. Wide: the claim (row 1) and the timeline
   (row 2) on the left, the portrait card on the right four, sticky across
   both rows and bounded by .team-top; the six specialities underneath it,
   three across. Medium: the same, the
   specialities two across. Phone: one column, the card as a row (portrait
   beside the name) so nothing sits centred. */

.section-team {
  padding-block: var(--section-pad);
}

.team-layout {
  display: flex;
  flex-direction: column;
  gap: 88px;
}

.team-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 72px;
  align-items: start;
}

.team-intro {
  grid-column: 1 / span 7;
  grid-row: 1;
}

.team-path {
  grid-column: 1 / span 6;
  grid-row: 2;
}

.team-card {
  grid-column: 9 / span 4;
  grid-row: 1 / span 2;
  position: sticky;
  top: 112px;
}


.team-block > .field-label {
  margin-bottom: 26px;
}

/* The card: glass, the portrait in a turning ring, name, role, two tags. */
.team-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px 28px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--glass);
}

@media (pointer: fine) {
  .team-card,
  .skill {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

.team-card .team-portrait {
  position: relative;
  width: min(100%, 260px);
  margin: 6px auto 4px 6px;
}

.team-card .team-portrait img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  /* a little depth: the photo drifts against the pointer inside the card */
  translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -14px);
  transition: translate 0.6s var(--ease);
}

/* The ring: a conic sweep of the section's three stops, masked to a 2px
   band just outside the circle, turning slowly. */
.team-card .team-portrait::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--q-1), var(--q-2), var(--q-3), transparent 72%, var(--q-1));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: eq-orbit 9s linear infinite;
  pointer-events: none;
}

@keyframes eq-orbit {
  to { rotate: 360deg; }
}

.team-card .team-id {
  align-items: flex-start;
  text-align: left;
  gap: 8px;
}

.team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-tags li {
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--t-1);
}

/* The timeline. */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0;
  padding: 0 0 0 34px;
  list-style: none;
}

.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line-2);
}

.timeline::after {
  width: 2px;
  left: 4.5px;
  background: linear-gradient(180deg, var(--q-1), var(--q-2) 55%, var(--q-3));
  transform: scaleY(var(--fill, 1));
  transform-origin: top;
}

.timeline li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--q-2);
  border: 1px solid var(--q-2);
  box-shadow: 0 0 0 5px var(--q-glow);
  transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s;
}

.eq-timeline .timeline li:not(.is-lit)::before {
  background: var(--bg);
  border-color: var(--line-2);
  box-shadow: none;
}

.tl-mark {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--q-2);
  transition: color 0.4s;
}

.eq-timeline .timeline li:not(.is-lit) .tl-mark {
  color: var(--t-4);
}

.tl-text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--t-1);
  text-wrap: pretty;
}

/* The specialities: six glass cards, dealt in, tilting under the pointer. */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.skill {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass);
  transition: border-color 0.4s, transform 0.6s var(--ease);
}

.skill-num {
  margin-bottom: 10px;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
}

.skill.eq-tilt:hover .skill-num {
  -webkit-text-stroke-color: transparent;
  background: var(--quartzo);
  -webkit-background-clip: text;
  background-clip: text;
}

.skill-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.skill-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--t-1);
  text-wrap: pretty;
}

@media (max-width: 1100px) {
  .team-intro { grid-column: 1 / span 7; }
  .team-path { grid-column: 1 / span 7; }
  .team-card { grid-column: 8 / span 5; }
  .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .team-layout {
    gap: 56px;
  }

  .team-top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  .team-intro,
  .team-path,
  .team-card {
    grid-column: 1;
    grid-row: auto;
  }

  .team-card {
    position: relative;   /* not sticky on a phone; relative keeps the hover light anchored */
    top: auto;            /* the sticky offset would shift a relative box down */
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    column-gap: 22px;
    row-gap: 18px;
    padding: 24px 22px;
  }

  .team-card .team-portrait {
    width: 104px;
    margin: 0;
    grid-row: 1 / span 2;
  }

  .team-card .team-portrait::before {
    inset: -6px;
  }

  .team-card .team-portrait img {
    max-width: none;
    margin: 0;
  }

  .team-card .team-tags {
    grid-column: 2;
  }

  .team-card .team-name {
    font-size: 22px;
  }

  .tl-text {
    font-size: 17px;
  }
}

@media (max-width: 560px) {
  .skill-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-card .team-portrait::before {
    animation: none;
  }

  .team-card .team-portrait img {
    transition: none;
  }
}

/* --- Footer: the legal name under the blurb, nothing below the columns ---- */

.footer-grid {
  margin-bottom: 0;
}

.footer-legal {
  margin-top: 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-4);
}

/* One column (≤820px, where styles.css stacks the footer): the legal name
   goes to the very bottom, under the last column, instead of under the
   blurb. Positioned rather than duplicated, so it stays one line of markup;
   the grid keeps room for it with its own bottom padding. */
@media (max-width: 820px) {
  .site-footer .container {
    position: relative;
  }

  .footer-grid {
    padding-bottom: 52px;
  }

  .footer-legal {
    position: absolute;
    left: clamp(20px, 5vw, 48px);   /* the .container gutter */
    right: clamp(20px, 5vw, 48px);
    bottom: 0;
    margin: 0;
  }
}

/* --- Legal pages (/privacy/, /pt/privacidade/) -------------------------------
   No scene and no motion: these pages load styles.css and ds3d.css only. One
   readable column; headings in Syne, text in Inter at the body size. */

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

.legal-inner {
  max-width: 820px;
  margin-inline: auto;   /* one centred reading column on wide screens */
  padding-block: clamp(64px, 12vh, 140px) clamp(80px, 14vh, 160px);
}

.legal-inner .eyebrow {
  margin-bottom: 24px;
}

.legal-title {
  font-family: var(--display);
  font-size: clamp(30px, 6vw, 76px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-bottom: 32px;
}

.legal-lede {
  font-size: 20px;
  line-height: 1.6;
  color: var(--t-0);
  text-wrap: pretty;
}

.legal-updated {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-4);
}

.legal-block {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.legal-block h2 {
  margin-bottom: 18px;
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.legal-block p,
.legal-block li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--t-1);
  text-wrap: pretty;
}

.legal-block p + p,
.legal-block ul + p,
.legal-block p + ul {
  margin-top: 14px;
}

.legal-block ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal-block strong {
  color: var(--fg);
  font-weight: 600;
}

.legal-block a,
.form-note a {
  color: var(--fg);
  border-bottom: 1px solid var(--line-2);
}

.legal-block a:hover,
.form-note a:hover {
  border-color: var(--fg);
}

@media (max-width: 560px) {
  .legal-title { font-size: clamp(20px, 7vw, 44px); }   /* "PRIVACIDADE." at 320px */
  .legal-lede { font-size: 18px; }
  .legal-block p, .legal-block li { font-size: 16px; }
}

/* --- Header quote button: one word on phones ----------------------------------
   Both labels are in the markup (one per language file); only one is ever
   displayed, so the accessible name is always the visible word. */

.cta-short {
  display: none;
}

@media (max-width: 560px) {
  .cta-long {
    display: none;
  }

  .cta-short {
    display: inline;
  }
}

/* The narrowest phones (≤360px): brand + "Orçamento" + EN fit on one line
   once the header's gaps and paddings tighten a little (PT at 320px ran
   17px over). */
@media (max-width: 360px) {
  .header-inner { gap: 8px; }
  .nav { gap: 6px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 13px; }
  .nav-cta { padding: 0 10px; font-size: 13px; }
  .lang-switch { padding: 0 10px; }
}