/* ==========================================================================
   QRA · Sobre — page styles
   Ported from the "Sobre QRA" Claude Design canvas into a standalone page.
   Layer order: design-system components -> canvas page styles (below).
   ========================================================================== */

/* Button + image placeholders now live in qra-components.css (were duplicated here). */

/* ---- Language dropdown active state ---- */
.qra-lang-opt:hover{ background:var(--primary-50); }

@media (prefers-reduced-motion: reduce){
  .qra-tl-slide, #qra-tl-bar{ transition:none !important; }
}

/* ==========================================================================
   Below: verbatim page styles from the Sobre canvas
   ========================================================================== */
*{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--surface-0);}
  body{font-family:var(--font-body);color:var(--text-body);-webkit-font-smoothing:antialiased;}
  a{color:var(--text-link);text-decoration:none;}
  a:hover{color:var(--text-link-hover);}
  .qra-team-scroll{scrollbar-width:none;-ms-overflow-style:none;}
  .qra-team-scroll::-webkit-scrollbar{display:none;}
  /* .qra-eyebrow / .qra-wrap now live in qra-components.css */
  @keyframes qraWallUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
  @keyframes qraWallDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
  @keyframes qraFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  @keyframes qraMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes qraScrollDot{0%{opacity:0;transform:translateY(-5px)}25%{opacity:1}55%{opacity:1;transform:translateY(9px)}100%{opacity:0;transform:translateY(9px)}}
  @keyframes qraScrollBounce{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(4px);opacity:1}}
  /* Nav / mega-menu / .qra-roll / ghost-button now live in qra-components.css (shared). */

/* ==========================================================================
   Sobre — content classes extracted from repeated inline styles.
   ========================================================================== */
.sobre-h2{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--display-lg);line-height:1.12;letter-spacing:-.025em;color:var(--text-strong);margin:0;text-wrap:balance;}
.sobre-p{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-muted);margin:0;}

/* Principles */
.sobre-princcard{background:var(--surface-0);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:30px 28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;}
.sobre-princico{display:inline-flex;width:44px;height:44px;flex-shrink:0;border-radius:var(--radius-md);background:var(--primary-50);color:var(--primary-500);align-items:center;justify-content:center;margin-bottom:var(--space-5);}
.sobre-princh3{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-xl);letter-spacing:-.01em;color:var(--text-strong);margin:0 0 var(--space-2);}
.sobre-princp{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-muted);margin:0;}

/* Country pills */
.sobre-pill{display:inline-flex;align-items:center;gap:var(--space-2);padding:9px 16px;border-radius:var(--radius-full);background:var(--surface-0);border:1px solid var(--border-default);font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-strong);box-shadow:var(--shadow-xs);}
.sobre-dot{width:7px;height:7px;border-radius:var(--radius-full);background:var(--primary-500);}

/* Timeline */
.sobre-tlnum{position:absolute;top:-12px;right:0;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--display-numeral);line-height:.8;letter-spacing:-.05em;color:rgba(107,63,255,.07);user-select:none;}
.sobre-tlbody{position:absolute;left:0;right:0;bottom:58px;max-width:760px;}
.sobre-tlh3{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--display-xl);line-height:1.05;letter-spacing:-.03em;color:var(--text-strong);margin:0 0 var(--space-4);max-width:20ch;text-wrap:balance;}
.sobre-tlp{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-muted);margin:0;max-width:60ch;}

/* Team */
.sobre-teamcard{position:relative;flex:0 0 auto;width:clamp(258px,23vw,296px);aspect-ratio:3/4;border-radius:var(--radius-xl);overflow:hidden;background:var(--ink-900);box-shadow:var(--shadow-lift);}
.sobre-teamphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;}
.sobre-teamscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,9,24,.14) 0%,rgba(12,9,24,0) 32%,rgba(12,9,24,.62) 72%,rgba(12,9,24,.9) 100%);pointer-events:none;}
.sobre-teamcap{position:absolute;left:22px;right:22px;bottom:22px;pointer-events:none;}
.sobre-teamname{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xl);letter-spacing:-.015em;color:#fff;line-height:1.08;}
.sobre-teamrole{font-size:var(--text-base);color:rgba(255,255,255,.74);margin-top:5px;line-height:1.35;}

/* CTA buttons (final CTA) — now .qra-btn[data-variant="inverse"|"ghost-inverse"] */

/* ==========================================================================
   Layout containers — extracted from inline style="" so media queries reach
   them. The page is three editorial splits + one card grid; the splits differ
   only in ratio, so they share one class with modifiers.
   ========================================================================== */
.sobre-split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-8);align-items:center;}
.sobre-split--even{grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:end;}
.sobre-split--wide{grid-template-columns:.92fr 1.08fr;}
.sobre-princ-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);}
.sobre-teamhead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-6);}
.sobre-teamrow{display:flex;gap:var(--space-5);overflow-x:auto;padding:4px var(--gutter) 8px;-webkit-overflow-scrolling:touch;}
.sobre-tl{position:relative;min-height:clamp(380px,48vh,480px);}
.sobre-map{position:relative;aspect-ratio:16/11;border-radius:var(--radius-xl);overflow:hidden;background:radial-gradient(120% 130% at 50% -10%,var(--ink-800),var(--ink-900) 68%);box-shadow:var(--shadow-mega);border:1px solid rgba(139,107,255,.14);}

/* "The roots" stage — same treatment as the styleguide's sg-scene-stage
   (lavender surface, rounded), sized by the inner .qis-mount--lg. */
.sobre-illo{position:relative;border-radius:var(--radius-2xl);background:var(--primary-50);border:1px solid var(--primary-100);}

/* ==========================================================================
   Responsive — --bp-lg 1024 / --bp-md 768 / --bp-sm 640 (see docs/adr/0001)
   ========================================================================== */
@media(max-width:1023px){
  .sobre-split,.sobre-split--even,.sobre-split--wide{grid-template-columns:1fr;gap:var(--space-6);align-items:start;}
  /* stacked, the picture reads better after the copy that sets it up */
  .sobre-split > .qra-imgslot,.sobre-split > .sobre-map,.sobre-split > .sobre-illo{order:2;}
  .sobre-princ-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:767px){
  /* the numeral is absolutely positioned; at --display-numeral it swallowed the h3 */
  .sobre-tlnum{font-size:clamp(84px,26vw,150px);color:rgba(107,63,255,.05);top:-4px;}
  .sobre-tlbody{bottom:64px;}
  .sobre-tl{min-height:clamp(420px,62vh,520px);}
}
@media(max-width:639px){
  .sobre-princ-grid{grid-template-columns:1fr;}
  .sobre-princcard{padding:var(--space-5);}
}