/* Header e Hero: composição Editorial Blue. O restante do site usa style.css. */
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/instrument-serif-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/instrument-serif-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

.site-header .container,
.hero .container {
  width: min(1500px, calc(100% - clamp(40px, 10.2vw, 170px)));
}
.site-header {
  --header-background: #fbfaf7;
  border-bottom: 0;
  background: var(--header-background);
  backdrop-filter: none;
  box-shadow: none;
}
.site-header[data-tone="base"] { --header-background: #0d1218; }
.site-header[data-tone="soft"] { --header-background: #111a23; }
.site-header[data-scrolled="true"] { box-shadow: none; }
.header-inner { gap: clamp(16px, 3vw, 54px); }
.header-inner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--header-line);
  opacity: .9;
  pointer-events: none;
}
.site-header::after {
  bottom: 0;
  left: max(20px, 5.1vw);
  width: min(1500px, calc(100% - clamp(40px, 10.2vw, 170px)));
  background: var(--header-accent);
  opacity: .72;
}
.brand-logo { width: clamp(272px, 22vw, 355px); }
.brand-copy { display: none; }
.header-section { text-transform: uppercase; letter-spacing: .15em; }
.main-navigation { align-items: center; }
.header-links { display: contents; }
.header-links a { font-size: .78rem; font-weight: 550; letter-spacing: .025em; }
@media (min-width: 1100px) {
  .main-navigation .header-links a[aria-current] { background: none; }
  .main-navigation .header-links a[aria-current]::after { content: none; }
}
.header-link-indicator { display: none; }
.navigation-more { position: relative; color: var(--header-muted); }
.navigation-more summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 550;
  letter-spacing: .025em;
  transition: color .25s ease;
}
.navigation-more summary::-webkit-details-marker { display: none; }
.navigation-more summary:hover,
.navigation-more summary:focus-visible,
.navigation-more:has([aria-current]) summary { color: var(--header-fg); }
.navigation-more summary span { display: inline-block; transition: transform .25s ease; }
.navigation-more[open] summary span { transform: rotate(180deg); }
.navigation-more-list {
  position: absolute;
  top: calc(100% - 5px);
  right: -18px;
  z-index: 4;
  min-width: 176px;
  padding: 9px 17px;
  border: 1px solid var(--header-line);
  border-radius: 3px;
  background: var(--header-menu);
  box-shadow: 0 20px 40px #07182c24;
}
.navigation-more-list a { min-height: 39px; font-size: .76rem; }
.header-availability { border: 1px solid var(--header-line); border-radius: 100px; padding: 7px 14px; font-size: .61rem; }
.header-availability > span { box-shadow: 0 0 0 4px color-mix(in srgb, var(--header-accent) 13%, transparent); }
.header-social { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.header-social a { display: grid; place-items: center; width: 38px; height: 38px; color: var(--header-muted); border: 1px solid transparent; border-radius: 50%; transition: color .22s ease, background-color .22s ease, border-color .22s ease, transform .22s ease; }
.header-social a:hover { color: var(--header-accent); background: var(--header-active); border-color: var(--header-line); transform: translateY(-2px); }
.header-social a:focus-visible { color: var(--header-accent); outline-color: var(--header-accent); }
.header-social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1099px) {
  .header-social { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--header-line); }
  .header-social a { width: 38px; height: 38px; }
}
@media (max-width: 599px) { .header-social { gap: 8px; } .header-social svg { width: 16px; height: 16px; } }
@media (min-width: 1100px) {
  .navigation-more { display: contents; }
  .navigation-more > summary { display: none; }
  .navigation-more-list { display: contents; }
  .navigation-more-list a { min-height: var(--header-height); font-size: .78rem; font-weight: 550; letter-spacing: .025em; }
  .site-header .header-inner .main-navigation { position: absolute; inset: 0; transform: none; width: 100%; justify-content: center; }
  .header-links { position: relative; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); transform: translateX(28px); }
  .header-link-indicator { display: block; position: absolute; left: 0; bottom: 16px; width: var(--indicator-width, 0px); height: 1px; background: var(--header-accent); opacity: 0; transform: translateX(var(--indicator-x, 0px)); pointer-events: none; transition: transform .45s cubic-bezier(.2,.75,.2,1), width .45s cubic-bezier(.2,.75,.2,1), opacity .2s ease; }
  .header-links.has-active-link .header-link-indicator { opacity: 1; }
  .header-social { position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .header-link-indicator { transition: none; } }

.hero {
  background: radial-gradient(ellipse 50% 68% at 75% 49%, #eaf1f5 0%, transparent 76%), #fbfaf7;
}
.hero-orbit-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; view-transition-name: hero-orbit-layer; }
.hero-orbit {
  content: "";
  position: absolute;
  width: min(780px, 55vw);
  aspect-ratio: 1;
  top: -145px;
  right: -150px;
  border: 1px solid #b7ccdc6b;
  border-radius: 50%;
  pointer-events: none;
}
.hero-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 27px;
  padding-block: 58px 30px;
}
.hero-topline { gap: 21px; color: #66809a; font-size: .67rem; font-weight: 500; letter-spacing: .14em; }
.hero-topline-rule { width: 58px; background: #aebfd0; }
.hero-topline::after { display: none; }
.hero-content { max-width: none; position: relative; z-index: 2; }
.hero h1 {
  font-family: "Instrument Serif", "Bodoni MT", Georgia, serif;
  font-size: clamp(5rem, 8.65vw, 9.15rem);
  line-height: .64;
  letter-spacing: -.045em;
  font-weight: 400;
  white-space: nowrap;
}
.title-mask { padding-block: .13em; margin-block: -.13em; }
.title-line { scale: 1.25 1; transform-origin: left center; }
.title-line-italic { color: #41688c; letter-spacing: -.065em; }
.hero-position { margin-top: 17px; color: #193b64; font-size: clamp(1.12rem, 1.48vw, 1.48rem); letter-spacing: -.028em; }
.hero-description { margin-top: 21px; max-width: 560px; color: #627d98; font-size: clamp(.95rem, 1.06vw, 1.05rem); line-height: 1.72; }
.hero-actions { margin-top: 30px; gap: 19px; }
.hero-actions .button { min-height: 52px; border-radius: 2px; padding-inline: 22px; font-weight: 550; }
.hero-actions .button-outline { min-height: 49px; padding-inline: 2px; margin-left: 4px; }
.hero-actions .button-outline::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #193b64; transform: scaleX(0); transform-origin: right; transition: transform .35s ease; }
.hero-actions .button-outline:hover::before, .hero-actions .button-outline:focus-visible::before { transform: scaleX(1); transform-origin: left; }

.project-showcase { min-width: 0; position: relative; z-index: 1; }
.project-showcase.is-switching .showcase-card { transition: none; will-change: transform, opacity; }
.project-stack { height: clamp(320px, min(35vw, 52svh), 472px); perspective: 1100px; }
.showcase-card {
  top: 11%;
  left: 0;
  width: 85%;
  border-color: #aac0d1;
  border-radius: 7px;
  background: #f6f7f7;
  box-shadow: 0 28px 56px #193b6427, 0 4px 10px #193b6414;
  transform-origin: 50% 55%;
  transition: transform 1.15s cubic-bezier(.2,.78,.18,1), opacity 1.15s ease, box-shadow 1.15s ease, filter 1.15s ease;
}
.showcase-card[data-position="0"] { transform: translate(-1%, 1%) rotateY(-14deg) skewY(-8deg) scale(1); opacity: 1; filter: saturate(1); box-shadow: 12px 28px 48px #193b643d, 1px 1px 0 #ffffffb3 inset; }
.showcase-card[data-position="1"] { transform: translate(38%, 4%) rotateY(-14deg) skewY(-8deg) scale(.88); opacity: 1; filter: saturate(.75); }
.showcase-card[data-position="2"] { transform: translate(69%, 9%) rotateY(-14deg) skewY(-8deg) scale(.76); opacity: 1; filter: saturate(.65); }
.showcase-card-top { height: 27px; gap: 12px; padding-inline: 11px; background: #f7f9fa; color: #405e78; border-color: #d5e0e8; font-size: .55rem; font-weight: 500; }
.window-dots { gap: 4px; }
.window-dots i { width: 5px; height: 5px; background: #9ab0c3; }
.window-action { margin-left: auto; font-size: .8rem; }
.showcase-media { height: auto; aspect-ratio: 1.4; position: relative; }
.project-stack::before { content: ""; position: absolute; left: 0; right: -6%; bottom: 2%; height: 14%; background: #193b643d; border-radius: 50%; filter: blur(30px); transform: rotate(-8deg); pointer-events: none; }
.showcase-card { width: 68%; top: 9%; left: -5%; border-radius: 19px; border-color: #8ba2b7; }
.showcase-card::after { content: ""; position: absolute; inset: 78% 0 0; background: linear-gradient(transparent, #fbfaf7db); pointer-events: none; }
.showcase-card-top { border-radius: 18px 18px 0 0; }
.showcase-media > .showcase-site-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.showcase-card[data-project="atlas"] .showcase-site-image { object-fit: contain; object-position: center; background: #eaf1f5; }
.showcase-card[data-project="atlas"] .showcase-site-image,
.showcase-card[data-project="contratos"] .showcase-site-image { object-position: center center; }
.showcase-media:has(> .showcase-site-image) { padding: 0; }
.showcase-media:has(> .showcase-site-image) > :not(.showcase-site-image),
.showcase-media:has(> .showcase-site-image)::before { display: none; }
.hero::after { content: ""; position: absolute; z-index: -1; width: 75%; height: 260px; right: -10%; bottom: -170px; background: linear-gradient(180deg, #617b9324, #ffffff80 12%, transparent 85%); box-shadow: 0 -12px 25px #193b6409; transform: rotate(-21deg); pointer-events: none; }
.showcase-media-atlas img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.showcase-media-pending,
.showcase-media-concept {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  padding: 24px 29px 21px;
  color: #eaf1f7;
  text-align: left;
  background: linear-gradient(124deg, #102b48 0%, #1b466c 53%, #2b5a7f 100%);
}
.showcase-media-concept { background: linear-gradient(128deg, #182f49 0%, #2a4d6b 54%, #3a6384 100%); }
.showcase-media-pending::before,
.showcase-media-concept::before {
  content: "";
  position: absolute;
  width: 52%;
  aspect-ratio: 1;
  right: 9%;
  top: 13%;
  border: 1px solid #c8dce633;
  transform: rotate(20deg);
  pointer-events: none;
}
.preview-index,
.preview-disclaimer { position: relative; z-index: 1; font: 500 .56rem/1.4 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: #bdd1e0; }
.preview-art { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-top: auto; padding-bottom: 21px; border-bottom: 1px solid #ffffff44; }
.preview-art strong { color: #f1f6fa; font: 400 clamp(2rem, 3.1vw, 3.6rem)/.87 "Instrument Serif", Georgia, serif; letter-spacing: -.035em; }
.preview-art em { color: #adcfe7; font-weight: 400; }
.preview-art > span { min-width: 115px; color: #bed0df; font: 500 .58rem/1.5 var(--font-mono); text-align: right; }
.preview-disclaimer { font-size: .49rem; letter-spacing: .07em; color: #c5d8e5; }
.showcase-controls { position: relative; z-index: 4; border: 0; padding: 0 0 0 10px; margin-top: 22px; }
.project-stack { position: relative; top: -18px; }
.hero-orbit { z-index: 0; opacity: 0; rotate: -90deg; transform-origin: center; animation: orbit-enter .65s ease-out .15s both, hero-orbit-travel 20s linear .8s infinite; }
.hero-orbit-dot { position: absolute; left: -4.5px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #9bd8ff; box-shadow: 0 0 7px 3px #3ba4ff, 0 0 20px 7px #238cffaa; opacity: 0; animation: orb-appear .5s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes orbit-enter { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes orb-appear { from { opacity: 0; transform: scale(.15); filter: blur(3px); } 70% { opacity: 1; transform: scale(1.35); filter: blur(0); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes hero-orbit-travel { 0% { rotate: -90deg; } 31.7% { rotate: 0deg; } 63.3% { rotate: 90deg; } 63.5% { rotate: 180deg; } 100% { rotate: 270deg; } }
.hero.motion-paused .hero-orbit { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero-orbit, .hero-orbit-dot { animation: none; opacity: 1; } }
.showcase-current { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; color: #193b64; font: 500 .7rem/1.25 var(--font-mono); }
.showcase-current > span { grid-row: 1 / 3; align-self: start; padding-top: 2px; color: #7892a9; letter-spacing: .1em; }
.showcase-current strong { color: #193b64; font: 600 .85rem/1.3 var(--font-sans); }
.showcase-current small { color: #627d98; font: 400 .67rem/1.5 var(--font-sans); }
.showcase-buttons { gap: 7px; }
.showcase-button { width: 37px; height: 37px; font-size: .9rem; background: transparent; border-color: #c2d2df; }
.hero-bottom { position: relative; z-index: 2; color: #41688c; font-size: .61rem; font-weight: 500; letter-spacing: .075em; padding-top: 17px; }
.hero-bottom > span { display: inline-flex; align-items: center; gap: 11px; }
.hero-bottom svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-bottom > span + span { border-color: #c8d7e3; }

@media (min-width: 900px) {
  .hero-layout { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); grid-template-rows: auto minmax(0, 1fr) auto; height: calc(100svh - var(--header-height)); min-height: 0; gap: clamp(18px, 3.4vh, 32px) 20px; padding-block: clamp(40px, 6.5vh, 68px) 22px; }
  .hero-topline, .hero-bottom { grid-column: 1 / -1; }
  .project-showcase { align-self: center; margin-top: 4px; }
}
@media (max-width: 1099px) {
  .navigation-more-list { display: contents; }
  .navigation-more-list a { min-height: 44px; padding: 8px 0; }
}
@media (max-width: 899px) {
  .hero-layout { gap: 30px; padding-block: 42px 26px; }
  .hero h1 { font-size: clamp(5rem, 12vw, 8.8rem); }
  .project-showcase { width: min(100%, 670px); }
  .project-stack { height: clamp(400px, 67vw, 490px); }
  .showcase-card { width: 68%; }
  .preview-art strong { font-size: clamp(2.2rem, 6vw, 3.5rem); }
}
@media (max-width: 599px) {
  .site-header::after { left: 20px; width: calc(100% - 40px); }
  .site-header .container, .hero .container { width: calc(100% - 40px); }
  .brand-logo { width: min(63vw, 245px); }
  .header-section { font-size: .49rem; }
  .hero-orbit { width: 85vw; top: 38%; right: -38%; }
  .hero-layout { gap: 21px; padding-block: 35px 22px; }
  .hero-topline { font-size: .57rem; gap: 14px; }
  .hero-topline-rule { width: 32px; }
  .hero h1 { font-size: clamp(3.95rem, 17vw, 6.5rem); line-height: .75; white-space: nowrap; }
  .hero-position { margin-top: 28px; font-size: 1rem; line-height: 1.45; }
  .hero-description { margin-top: 14px; font-size: .88rem; line-height: 1.62; }
  .hero-actions { display: flex; gap: 10px 19px; margin-top: 23px; }
  .hero-actions .button { min-height: 44px; padding-inline: 15px; font-size: .78rem; }
  .hero-actions .button-primary { min-width: 0; }
  .hero-actions .button-outline { min-width: 0; }
  .project-showcase { width: 100%; }
  .project-stack { top: 0; height: calc(47vw + 34px); }
  .showcase-card { top: calc(clamp(250px, 77vw, 340px) * .06 + 1.32px); left: 1%; width: 66%; border-radius: 10px; }
  .showcase-card[data-position="0"] { transform: translate(0, -2%) rotateY(-14deg) skewY(-8deg) scale(1); }
  .showcase-card[data-position="1"] { transform: translate(38%, 1%) rotateY(-14deg) skewY(-8deg) scale(.88); }
  .showcase-card[data-position="2"] { transform: translate(69%, 6%) rotateY(-14deg) skewY(-8deg) scale(.76); }
  .showcase-card-top { height: 20px; font-size: .42rem; padding-inline: 8px; }
  .window-dots i { width: 4px; height: 4px; }
  .showcase-media-pending, .showcase-media-concept { padding: 11px 13px; }
  .preview-index { font-size: .38rem; }
  .preview-art { padding-bottom: 7px; }
  .preview-art strong { font-size: clamp(1.36rem, 5.2vw, 2rem); }
  .preview-art > span { min-width: 75px; font-size: .36rem; }
  .preview-disclaimer { font-size: .32rem; }
  .showcase-controls { margin-top: 10px; padding-left: 0; }
  .showcase-current strong { font-size: .73rem; }
  .showcase-current small { font-size: .6rem; }
  .hero-bottom { gap: 8px 12px; margin-top: 0; padding-top: 14px; font-size: .49rem; }
  .hero-bottom > span { transform: translateY(8px); }
  .hero-bottom > span + span { border: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-card { transition: none; }
}