/* v1.0.36 — explicit pointer/keyboard focus treatment for FAQ buttons. */

.studio-energy-base { filter:none; }
.studio-brand-seal { backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(11,23,48,.94); }
.studio-energy-runner--gate { --energy-delay:.35s; }
.studio-energy-runner--detail { --energy-delay:.7s; }
.studio-landmark.electric-active .studio-energy-runner { animation-duration:5s,5s; }
.studio-landmark.electric-active .studio-energy-nodes circle,
.studio-landmark.electric-active .studio-energy-aura { animation-duration:5s; }
.studio-landmark.electric-paused .studio-energy-runner,
.studio-landmark.electric-paused .studio-energy-nodes circle,
.studio-landmark.electric-paused .studio-energy-aura { animation-play-state:paused; }

.faq.faq-motion { box-sizing:border-box;overflow-anchor:none; }
.faq-trigger {
 display:flex;justify-content:space-between;align-items:center;gap:20px;
 width:100%;min-height:66px;margin:0;padding:12px 0;border:0;border-radius:0;
 background:transparent;color:var(--ink);font:700 1rem/1.5 'Manrope',sans-serif;
 -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
 text-align:left;cursor:pointer;transition:color 180ms ease;
}
.faq-trigger[aria-expanded="true"] { color:var(--violet); }
#preguntas .faq-trigger:focus:not(:focus-visible) { outline:none;box-shadow:none; }
#preguntas .faq-trigger:focus-visible { outline:2px solid #7040ce;outline-offset:3px;border-radius:4px;box-shadow:none; }
.faq-indicator {
 position:relative;flex:0 0 28px;width:28px;height:28px;box-sizing:border-box;
 border:1px solid var(--line);border-radius:50%;color:var(--violet);
 transition:background-color 180ms ease,border-color 180ms ease;
}
.faq-indicator::before,.faq-indicator::after {
 content:'';position:absolute;top:50%;left:50%;width:10px;height:1.5px;
 background:currentColor;transform:translate(-50%,-50%);
}
.faq-indicator::after { transform:translate(-50%,-50%) rotate(90deg);transition:transform 220ms ease; }
.faq-trigger[aria-expanded="true"] .faq-indicator { background:var(--stone-light);border-color:var(--stone); }
.faq-trigger[aria-expanded="true"] .faq-indicator::after { transform:translate(-50%,-50%) rotate(90deg) scaleX(0); }
.faq-answer { display:grid;grid-template-rows:0fr;transition:grid-template-rows 280ms cubic-bezier(.2,.7,.2,1); }
.faq-answer-inner { min-height:0;overflow:hidden;opacity:0;transition:opacity 180ms ease; }
.faq.is-expanded .faq-answer { grid-template-rows:1fr; }
.faq.is-expanded .faq-answer-inner { opacity:1; }
@media(max-width:650px) {
 .faq-trigger { min-height:64px;gap:14px; }
}
@media(prefers-reduced-motion:reduce) {
 .faq-trigger,.faq-indicator,.faq-indicator::after,.faq-answer,.faq-answer-inner { transition:none; }
}

/* Keep the illustration and its original looping SVG in the same coordinate space. */
.studio-landmark-picture img,
.studio-landmark:hover .studio-landmark-picture img {
 animation:none;transform:none;transition:none;
}
.studio-heading .eyebrow { color:#c3a4ff;font-size:14px; }
.studio-place-label { font-size:14px;letter-spacing:.02em;gap:10px;line-height:1.4; }
.studio-brand-seal { bottom:68px;max-width:calc(100% - 56px); }
.studio-brand-seal small { font-size:14px;letter-spacing:.02em;line-height:1.35;white-space:normal; }
.studio-location span { font-size:14px;letter-spacing:.04em; }
@media(max-width:767px) {
 .studio-brand-seal { max-width:calc(100% - 36px); }
}

/* Readable throughout arrival. Translate keeps hover and reveal independent. */
.agency-motion .agency-reveal {
 opacity:.88;
 transform:none;
 translate:0 7px;
 transition:opacity 420ms ease,translate 420ms cubic-bezier(.2,.7,.2,1),
  transform 240ms ease,box-shadow 240ms ease,border-color 240ms ease,background-color 240ms ease;
 transition-delay:0s;
}
.agency-motion .agency-reveal.is-visible { opacity:1; translate:0 0; }
.btn { transition:background-color 220ms ease,box-shadow 220ms ease,transform 220ms ease; }
.service-link,.studio-link { transition:color 220ms ease,border-color 220ms ease; }
.studio-link span { transition:transform 220ms cubic-bezier(.2,.7,.2,1); }
.form-fields input,.form-fields textarea { transition:border-color 180ms ease,box-shadow 180ms ease; }
.form-fields input:focus,.form-fields textarea:focus { box-shadow:0 0 0 5px rgba(185,162,255,.1); }

:root {
 --motion-fast:180ms;
 --motion-base:420ms;
 --motion-slow:1100ms;
 --motion-ease:cubic-bezier(.2,.7,.2,1);
}
/* Clip the horizontal canvas without creating an extra body scroll container. */
html,body { overflow-x:clip;overflow-y:visible; }
.hero-motion .editorial-arrival.is-arriving {
 animation:sysags-editorial-arrive var(--motion-slow) var(--motion-ease) var(--arrival-delay,0ms) both;
}
.hero-motion .hero-copy>.editorial-arrival.is-arriving {
 animation-name:sysags-copy-arrive;animation-duration:600ms;
}
@keyframes sysags-copy-arrive {
 from { opacity:.65;translate:0 22px; }
 to { opacity:1;translate:0 0; }
}
@keyframes sysags-editorial-arrive {
 from { opacity:0;translate:0 38px; }
 to { opacity:1;translate:0 0; }
}
.hero-motion .concept-art.is-arriving .concept-tags>span {
 animation:sysags-tag-arrive 850ms var(--motion-ease) var(--tag-delay,450ms) both;
}
@keyframes sysags-tag-arrive {
 from { opacity:0;translate:0 22px;scale:.88; }
 to { opacity:1;translate:0 0;scale:1; }
}
.hero-motion .concept-art.is-arriving {
 animation:sysags-mockup-arrive 1250ms var(--motion-ease) both;
}
@keyframes sysags-mockup-arrive {
 from { opacity:0;translate:0 48px;scale:.92; }
 to { opacity:1;translate:0 0;scale:1; }
}
.hero-motion .concept-art.is-arriving .concept-bar {
 animation:sysags-editorial-arrive 800ms var(--motion-ease) 180ms both;
}
.hero-motion .concept-art.is-arriving .concept-project>.concept-label {
 animation:sysags-editorial-arrive 900ms var(--motion-ease) 300ms both;
}
.hero-motion .concept-art.is-arriving .concept-project>strong {
 animation:sysags-editorial-arrive 1000ms var(--motion-ease) 430ms both;
}
.hero-motion .concept-art.is-arriving .concept-primary::after {
 content:'';position:absolute;left:18px;right:18px;bottom:0;height:1px;
 pointer-events:none;background:linear-gradient(90deg,transparent,#d8b7ac,#b9a2ff,transparent);
 height:2px;box-shadow:0 -2px 12px #b9a2ff55;
 transform-origin:left;animation:sysags-trace 2400ms var(--motion-ease) 650ms both;
}
@keyframes sysags-trace {
 0% { transform:scaleX(0);opacity:0; }
 35% { opacity:.65; }
 75% { transform:scaleX(1);opacity:.65; }
 100% { transform:scaleX(1);opacity:0; }
}
.agency-motion .agency-reveal {
 opacity:.22;translate:0 36px;
 transition-duration:900ms,900ms,240ms,240ms,240ms,240ms;
 transition-timing-function:ease,var(--motion-ease),ease,ease,ease,ease;
}
.agency-motion .services .card:nth-child(2),
.agency-motion .growth-grid .growth-card:nth-child(2) { --reveal-delay:140ms; }
.agency-motion .services .card:nth-child(3),
.agency-motion .growth-grid .growth-card:nth-child(3) { --reveal-delay:280ms; }
.agency-motion .services .card.is-visible,
.agency-motion .growth-grid .growth-card.is-visible {
 transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0s,0s,0s,0s;
}

.site-header {
 transition:box-shadow 300ms ease,border-color 300ms ease;
}
.site-header.is-scrolled {
 box-shadow:0 8px 24px rgba(16,27,50,.065);border-bottom-color:#d6ccd1;
}
.nav-links>a:not(.btn) { position:relative; }
.nav-links>a:not(.btn)::after {
 content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;
 background:var(--violet);transform:scaleX(0);transform-origin:left;
 transition:transform 240ms var(--motion-ease);
}
.nav-links>a[aria-current="location"]:not(.btn) { color:var(--violet); }
.nav-links>a[aria-current="location"]:not(.btn)::after { transform:scaleX(1); }
.mobile-menu nav>a[aria-current="location"] { color:var(--violet);font-weight:800; }
.nav-links>.btn[aria-current="location"] { box-shadow:0 0 0 3px rgba(112,64,206,.14); }

.process-motion .step::after {
 content:'';position:absolute;left:44px;right:0;top:21px;height:1px;
 background:linear-gradient(90deg,#7040ce,#d8b7ac);transform:scaleX(0);
 transform-origin:left;transition:transform 600ms var(--motion-ease);
}
.process-motion .step:last-child::after { display:none; }
.process-motion .step-reached::after { transform:scaleX(1); }
.process-motion .number {
 transition:background-color 350ms ease,color 350ms ease,border-color 350ms ease,box-shadow 350ms ease;
}
.process-motion .step-reached .number { background:#7040ce;color:#fff;border-color:#7040ce; }
.process-motion .step-current .number { box-shadow:0 0 0 5px rgba(112,64,206,.09); }
.process-motion .step-current h3 { color:#7040ce; }

.form-fields label { transition:color var(--motion-fast) ease; }
.form-fields label:focus-within { color:#7040ce; }
.form-status.has-message {
 padding:14px 16px;border-left:2px solid #9674cc;border-radius:0 10px 10px 0;
 background:rgba(112,64,206,.045);
 animation:sysags-message-arrive 300ms var(--motion-ease) both;
}
.contact .form-status.has-message { color:#f6f3ee!important;background:rgba(185,162,255,.08); }
@keyframes sysags-message-arrive {
 from { opacity:.6;translate:0 4px; }
 to { opacity:1;translate:0 0; }
}
.sysags-contact-form[aria-busy="true"] button[type="submit"]::after {
 content:'';width:14px;height:14px;border:2px solid #ffffff55;border-top-color:#fff;
 border-radius:50%;margin-left:10px;animation:sysags-sending 850ms linear infinite;
}
@keyframes sysags-sending { to { rotate:1turn; } }
.contact-complete .form-status { border-left-color:#b9a2ff;background:rgba(112,64,206,.07); }

@media(hover:hover) and (pointer:fine) {
 .services .card:hover { transform:translateY(-3px);border-color:#bda8ce;box-shadow:0 13px 28px rgba(58,37,79,.085); }
 .services .card:focus-within { border-color:#bda8ce;box-shadow:0 13px 28px rgba(58,37,79,.085); }
 .btn:hover { transform:translateY(-2px); }
 .studio-link:hover span { transform:translate(3px,-3px); }
 .growth-card:not(.agency-reveal) { transition:transform 240ms var(--motion-ease),border-color 240ms ease,box-shadow 240ms ease; }
 .growth-card:hover { transform:translateY(-3px);border-color:#bda8ce;box-shadow:0 13px 28px rgba(58,37,79,.06); }
 .services .card:hover .service-symbol { background:#ebe4f3;color:#7040ce; }
 .concept-primary { transition:translate 600ms var(--motion-ease); }
 .concept-art:hover .concept-primary { translate:0 -3px; }
 .service-detail-link { text-underline-offset:5px; }
 .service-detail-link:hover { text-decoration:underline; }
}
@media(max-width:920px) {
 .process-motion .step::after {
  left:21px;right:auto;top:44px;bottom:0;width:1px;height:auto;
  background:linear-gradient(180deg,#7040ce,#d8b7ac);transform:scaleY(0);transform-origin:top;
 }
 .process-motion .step-reached::after { transform:scaleY(1); }
}
@media(hover:none) {
 .services .card:hover,.btn:hover { transform:none; }
 .btn:active { transform:scale(.99); }
 .agency-motion .agency-reveal { translate:0 32px; }
 .agency-motion .agency-reveal.is-visible { translate:0 0; }
 .agency-motion .services .card:nth-child(n),.agency-motion .growth-grid .growth-card:nth-child(n) { transition-delay:0s; }
 .hero-motion .editorial-arrival { animation-duration:1100ms; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .studio-landmark.reflection-played .studio-energy-runner { animation:none;opacity:0; }
 .agency-motion .agency-reveal,.agency-motion .agency-reveal.is-visible { opacity:1;translate:none;transform:none;transition:none; }
 .btn,.service-link,.studio-link,.studio-link span,.form-fields input,.form-fields textarea { transition:none; }
 .services .card:hover,.btn:hover,.btn:active,.studio-link:hover span { transform:none; }
 .hero-motion .editorial-arrival.is-arriving,.hero-motion .concept-art.is-arriving .concept-tags>span,.hero-motion .concept-art.is-arriving .concept-primary::after,
 .form-status.has-message,.sysags-contact-form[aria-busy="true"] button[type="submit"]::after { animation:none;translate:none; }
 .hero-motion .concept-art.is-arriving .concept-primary::after { display:none; }
 .hero-motion .concept-art.is-arriving,.hero-motion .concept-art.is-arriving .concept-bar,
 .hero-motion .concept-art.is-arriving .concept-project>.concept-label,
 .hero-motion .concept-art.is-arriving .concept-project>strong { animation:none;opacity:1;translate:none;scale:1; }
 .process-motion .step::after,.process-motion .number,.site-header,.nav-links>a::after,
 .growth-card,.form-fields label,.concept-primary { transition:none; }
 .growth-card:hover { transform:none; }
 .concept-art:hover .concept-primary { translate:none; }
}
