/* Regras do cabeçalho e acabamento das fotografias. */
.site-header { transition: transform .35s var(--ease), width .45s var(--ease), top .45s var(--ease), height .45s var(--ease), border-radius .45s var(--ease), box-shadow .35s; }
.site-header.is-hidden { transform: translate(-50%, calc(-100% - 24px)); pointer-events: none; }
.site-header::after { padding: 1.5px; }
.site-header.is-floating::after { opacity: .95; }
.hero-visual::after { content: ''; position: absolute; z-index: 3; pointer-events: none; inset: 62% 0 0; background: linear-gradient(180deg, #0c294600, #0c29464a 45%, #0c2946c9); mask-image: radial-gradient(ellipse at 50% 10%, #000 40%, transparent 73%); }
.hero-portrait { mask-image: linear-gradient(180deg, #000 68%, #000c 82%, transparent); }
.intro-split { min-height: 460px; grid-template-columns: 54% 46%; }
.intro-content { padding-top: 49px; padding-bottom: 49px; padding-right: 34px; }
.intro-content h2 { max-width: 610px; font-size: clamp(2.6rem, 3.15vw, 3.35rem); }
.intro-content > p:last-child { max-width: 590px; font-size: .93rem; line-height: 1.9; }
.intro-photo::before { background: linear-gradient(90deg, var(--paper), #fcfbf7e8 13%, #fcfbf700 60%); }
.method-visual img { object-position: center 27%; }

/* Faixas de atuação no celular e cards próprios no tablet. */
.areas-section { padding: 0; overflow: visible; }
.areas-frame { position: relative; isolation: isolate; overflow: hidden; }
.areas-layout { position: relative; z-index: 2; padding-block: 60px; }
.area-backgrounds { display: none; }
.area-experience { display: none; }
.mobile-area-photo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .12; }
.area-card { background: #0d2a47ed; }
.area-card.scroll-active::before { transform: translateX(0); }
.area-card.scroll-active, .area-card.scroll-active .card-top, .area-card.scroll-active p { color: var(--navy); }
.area-grid { margin-top: 32px; }
.area-topics { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
.area-topics li { position: relative; padding-left: 17px; color: #e2e8eb; font-size: .79rem; line-height: 1.65; }
.area-topics li::before { content: ''; position: absolute; left: 0; top: .63em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* Desktop: a rolagem percorre cinco assuntos dentro da mesma tela.
   O sticky usa o documento normal e libera a página ao fim da quinta área. */
@media (min-width: 1100px) and (min-height: 650px) {
  html { scroll-padding-top: 0; }
  .areas-section.is-scroll-story { height: 460svh; }
  .areas-frame { min-height: 650px; }
  .is-scroll-story .areas-frame { position: sticky; top: 0; height: 100svh; }
  .areas-layout { display: grid; grid-template-columns: 66% 34%; grid-template-rows: auto 1fr; min-height: 100svh; padding-top: clamp(32px, 5vh, 58px); padding-bottom: 40px; }
  .areas-section .section-heading { grid-column: 1; grid-row: 1; margin: 0; text-align: left; }
  .areas-section .section-heading h2 { font-size: clamp(2.7rem, 3.4vw, 3.4rem); line-height: 1; }
  .areas-section .section-subtitle { margin-top: 5px; font-size: 1.12rem; line-height: 1.3; }
  .area-experience { display: contents; }
  .area-detail { grid-column: 1; grid-row: 2; align-self: center; max-width: 740px; padding: 27px 66px 22px 0; }
  .area-detail h3 { max-width: 650px; margin-bottom: 23px; font-size: clamp(3rem, 4.4vw, 4.2rem); line-height: 1.04; text-wrap: balance; }
  .area-lead { max-width: 620px; color: #f0f0e9; font-size: 1.02rem; line-height: 1.85; margin-bottom: 17px; }
  .area-description { max-width: 650px; color: #c4cfd6; font-size: .85rem; line-height: 1.9; }
  .area-detail .area-note { max-width: 620px; padding-top: 18px; border-top: 1px solid #dec89930; color: #b2c0ca; font-size: .71rem; line-height: 1.85; }
  .area-grid { display: none; }
  .area-backgrounds { display: block; position: absolute; z-index: -1; inset: 0; background: var(--navy); }
  .area-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% center; opacity: 0; transition: opacity .7s ease; }
  .area-background.is-active { opacity: 1; }
  .area-backgrounds::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #071d35fa 0%, #071d35eb 35%, #071d35c7 66%, #071d35b8), linear-gradient(0deg, #071d35a6, #071d3500 30%, #071d3559); }
  .area-orbit-stage { grid-column: 2; grid-row: 1 / 3; position: relative; min-width: 0; height: calc(100svh - 80px); align-self: center; margin-right: calc(-1 * max(var(--gutter), calc((100vw - var(--wrap)) / 2))); --orbit-radius: min(33vh, 320px); --node-size: clamp(96px, 8vw, 122px); }
  .area-orbit-circle { position: absolute; left: calc(100% - var(--node-size) / 2 - 22px); top: 50%; width: calc(var(--orbit-radius) * 2); height: calc(var(--orbit-radius) * 2); transform: translate(-50%, -50%); border: 1px solid #dec89980; border-radius: 50%; clip-path: inset(0 50% 0 0); }
  .area-orbit-circle::before { content: ''; position: absolute; inset: 30px; border: 1px solid #ffffff13; border-radius: 50%; }
  .area-orbit-node { position: absolute; z-index: 2; left: 100%; top: 50%; display: grid; place-items: center; width: var(--node-size); height: var(--node-size); padding: 12px; border: 1px solid #dec89999; border-radius: 50%; background: #0d2a47ed; color: var(--ivory); text-align: center; font-size: .72rem; font-weight: 500; line-height: 1.5; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: background .3s, color .3s, border-color .3s, box-shadow .3s; }
  .area-orbit-node.is-on-arc { opacity: 1; pointer-events: auto; }
  .area-orbit-node:hover, .area-orbit-node:focus-visible, .area-orbit-node.is-active { border-color: var(--gold-light); background: var(--gold); color: var(--navy); box-shadow: 0 10px 32px #0003; }
  .area-detail.is-changing { animation: area-content-in .4s var(--ease); }
}
@media (min-width: 1100px) and (min-height: 650px) and (max-height: 780px) {
  .areas-layout { padding-top: 29px; padding-bottom: 20px; }
  .area-detail { padding-top: 20px; padding-bottom: 8px; }
  .area-detail h3 { font-size: 3.15rem; margin-bottom: 16px; }
  .area-lead { font-size: .92rem; line-height: 1.7; margin-bottom: 12px; }
  .area-description { font-size: .78rem; line-height: 1.8; }
  .area-topics { margin-block: 18px; gap: 8px 20px; }
  .area-topics li { font-size: .73rem; }
  .area-detail .area-note { padding-top: 13px; font-size: .66rem; }
}
@media (min-width: 1100px) and (max-height: 649px) {
  .areas-layout { padding-block: 48px; }
  .area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@keyframes area-content-in { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* A capa e o texto formam um único link. */
.article-track { align-items: stretch; }
.article-card { border: 1px solid #d8d4ca; border-radius: 24px; background: var(--paper); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.article-card-link { display: flex; flex-direction: column; height: 100%; }
.article-card > .article-card-link { font-size: inherit; font-weight: inherit; }
.article-cover { overflow: hidden; aspect-ratio: 16 / 9; }
.article-cover img { width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; transition: transform .6s var(--ease); }
.article-card-body { padding: 23px 25px 27px; }
.article-card .article-meta { align-items: start; color: #806c47; font-size: .56rem; letter-spacing: .025em; }
.article-meta span:last-child { flex-shrink: 0; }
.article-card h3 { margin: 0 0 15px; font-size: 1.85rem; line-height: 1.13; }
.article-card-body > p { color: var(--muted); font-size: .74rem; line-height: 1.85; }
.article-card:hover, .article-card:focus-within { border-color: var(--gold); box-shadow: 0 10px 25px #071d3510; }
.article-card:hover .article-cover img { transform: scale(1.04); }
.article-card-link:focus-visible { outline-offset: -5px; border-radius: 23px; }

@media (min-width: 768px) and (max-width: 1099px) {
  .intro-split { min-height: 449px; }
  .intro-content { padding: 44px 28px 44px var(--gutter); }
  .intro-content h2 { font-size: 2.75rem; }
  .intro-content > p:last-child { font-size: .85rem; }
}
@media (max-width: 767px) {
  .hero { background: radial-gradient(ellipse at 65% 80%, #315a7b70, transparent 48%), linear-gradient(140deg, #041629, #0b2946); }
  .hero::after { content: ''; position: absolute; z-index: 4; pointer-events: none; left: 0; right: 0; bottom: 0; height: 155px; background: linear-gradient(180deg, #0b294600, #0b2946b3 56%, #0b2946); }
  .hero-visual { width: min(450px, calc(100vw + 10px)); max-width: none; height: auto; aspect-ratio: 1.1; margin-top: 12px; }
  .hero-visual::after { display: none; }
  .hero-portrait { clip-path: none; mask-image: none; }
  .hero-portrait-disc { width: 112%; bottom: -40%; background: none; }
  .hero-arch { width: 125%; bottom: -46%; }
  .hero-lines { width: 99%; bottom: -33%; }
  .intro-split { min-height: 0; }
  .intro-content { padding: 51px var(--gutter) 5px; }
  .intro-content h2 { font-size: clamp(2.15rem, 8.5vw, 2.7rem); }
  .intro-content > p:last-child { font-size: .86rem; }
  .intro-photo { height: clamp(280px, 78vw, 375px); }
  .intro-photo::before { background: linear-gradient(180deg, var(--paper), #fcfbf7e3 13%, #fcfbf700 52%); }
  .areas-layout { width: 100%; padding-block: 40px 0; }
  .areas-section .section-heading { padding-inline: var(--gutter); margin-bottom: 32px; }
  .areas-section .section-heading h2 { font-size: 2.45rem; }
  .areas-section .section-subtitle { font-size: 1.07rem; max-width: 320px; margin-top: 8px; }
  .area-grid { width: 100%; margin-top: 0; gap: 0; }
  .area-card { width: 100%; min-height: 270px; padding: 35px var(--gutter) 37px; border: 0; border-top: 1px solid #dec89930; border-radius: 0; background: #0d2a47e6; }
  .area-card h3 { max-width: 335px; margin: 19px 0 14px; font-size: 2.15rem; }
  .area-card p { max-width: 380px; font-size: .81rem; }
  .card-top svg { width: 28px; height: 28px; }
  .article-card { border-radius: 20px; }
  .article-card-body { padding: 20px 21px 24px; }
  .article-card h3 { font-size: 1.65rem; }
  .article-card .article-meta { font-size: .5rem; }
  .method-visual img { height: 345px; object-position: center 24%; }
}
@media (prefers-reduced-motion: reduce) {
  .areas-section.is-scroll-story { height: auto; }
  .is-scroll-story .areas-frame { position: relative; height: auto; }
}