/* Camada de refinamento: layout editorial, acessibilidade e responsividade */
:root{--content-max:1180px;--reading-max:72ch;--focus-ring:3px solid currentColor;--ease:cubic-bezier(.2,.8,.2,1)}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.skip-link{position:fixed;z-index:9999;top:.75rem;left:.75rem;transform:translateY(-180%);padding:.75rem 1rem;border-radius:.5rem;background:var(--color-primary,#1f4f46);color:#fff;font-weight:700;transition:transform .18s var(--ease)}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:var(--focus-ring);outline-offset:3px}
a,button{touch-action:manipulation}
img{max-width:100%;height:auto;background:color-mix(in srgb,currentColor 5%,transparent)}
.page-main,.page-content{width:min(100% - 2rem,var(--content-max));margin-inline:auto;padding-block:clamp(2rem,5vw,5rem)}
.layout-with-sidebar .page-main{margin-left:auto;margin-right:auto}
.section{padding-block:clamp(2.5rem,6vw,6rem)}
.section+.section{border-top:1px solid color-mix(in srgb,currentColor 13%,transparent)}
.section-heading{max-width:var(--reading-max);margin-bottom:2rem}
.section-heading h2,.hero h1{letter-spacing:-.035em;line-height:1.02}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:calc(var(--type-scale-base) * .78);font-weight:800;opacity:.68;margin-bottom:.75rem}
.measure,.prose{max-width:var(--reading-max)}
.prose p{font-size:clamp(calc(var(--type-scale-base) * 1.05),calc(1.3vw * var(--type-root)),calc(var(--type-scale-base) * 1.2));line-height:1.75}
.hero{min-height:min(680px,72vh);display:grid;align-items:center;border:0!important}
.hero__content{max-width:820px}
.hero h1{font-size:clamp(calc(var(--type-scale-base) * 3.25),calc(10vw * var(--type-root)),calc(var(--type-scale-base) * 7.5));margin:.15em 0}
.hero__lede{font-size:clamp(calc(var(--type-scale-base) * 1.25),calc(2.4vw * var(--type-root)),calc(var(--type-scale-base) * 2));line-height:1.35;max-width:34ch;opacity:.82}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.portfolio-card{display:flex;flex-direction:column;min-height:260px;padding:1.5rem;border:1px solid color-mix(in srgb,currentColor 16%,transparent);border-radius:1rem;color:inherit;text-decoration:none;background:color-mix(in srgb,var(--surface,#fff) 94%,transparent);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.portfolio-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(0,0,0,.1);border-color:color-mix(in srgb,currentColor 34%,transparent)}
.portfolio-card>.material-symbols-outlined{font-size:calc(var(--type-scale-base) * 2);margin-bottom:auto}
.portfolio-card h3{font-size:calc(var(--type-scale-base) * 1.35);margin:2rem 0 .5rem}
.portfolio-card p{opacity:.72;line-height:1.55}
.card-link{font-weight:750;margin-top:1rem}
.text-link{font-weight:750;text-underline-offset:.2em}
.grid,.card-grid{gap:clamp(1rem,2vw,1.75rem)}
.card,.card-outlined,figure{overflow:hidden;border-radius:.9rem}
.card-media img,.grid figure img{aspect-ratio:16/10;object-fit:cover;transition:transform .28s var(--ease)}
a:hover .card-media img,a:hover figure img{transform:scale(1.025)}
.card-supporting-text,figcaption{line-height:1.55}
.site-header{backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px)}
.site-sidebar{contain:layout paint}
.footer-inner{width:min(100% - 2rem,var(--content-max));margin:auto;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:2rem 0}
.footer-inner nav{display:flex;flex-wrap:wrap;gap:1rem}.footer-inner a{color:inherit;text-underline-offset:.2em}
.lightbox{role:dialog}.lightbox button{min-width:44px;min-height:44px}
@media(max-width:900px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-main,.page-content{width:min(100% - 1.25rem,var(--content-max))}.footer-inner{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.portfolio-grid{grid-template-columns:1fr}.portfolio-card{min-height:220px}.hero{min-height:62vh}.hero__actions>.btn{width:100%;justify-content:center}.footer-inner nav{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(prefers-contrast:more){.portfolio-card,.card,.card-outlined{border-width:2px}.eyebrow{opacity:1}}


/* Correção estrutural do layout lateral */
.site-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:260px;
  max-width:calc(100vw - 3rem);
  padding:var(--header-height,64px) 1.5rem 1.75rem;
  overflow-y:auto;
  background:var(--surface-container-high);
  box-shadow:4px 0 18px rgba(0,0,0,.22);
  transform:translateX(-100%);
  transition:transform .3s var(--ease);
  z-index:40;
}
.site-sidebar[data-open="true"],.site-sidebar.active{transform:translateX(0)}
@media(min-width:900px){
  .site-sidebar{transform:translateX(0);max-width:none}
  .layout-with-sidebar>main.page-content{
    width:calc(100% - 260px);
    max-width:none;
    margin-left:260px;
    margin-right:0;
    padding-inline:clamp(1.5rem,3vw,3.5rem);
  }
}
@media(max-width:899px){
  .site-sidebar.active{transform:translateX(-100%)}
  .site-sidebar[data-open="true"]{transform:translateX(0)}
  .layout-with-sidebar>main.page-content{width:min(100% - 1.25rem,var(--content-max));margin-inline:auto}
}

/* ==========================================================
   SISTEMA EDITORIAL DE TÍTULOS E RÓTULOS
   Substitui as antigas barras verticais por faixas cromáticas
   integradas à tipografia e componentes contextuais.
   ========================================================== */

:root{
  --title-band-primary: color-mix(in srgb, var(--primary) 68%, transparent);
  --title-band-secondary: color-mix(in srgb, var(--secondary) 62%, transparent);
  --title-band-tertiary: color-mix(in srgb, var(--tertiary) 62%, transparent);
  --title-soft-primary: color-mix(in srgb, var(--primary-container) 74%, var(--surface) 26%);
  --title-soft-secondary: color-mix(in srgb, var(--secondary-container) 72%, var(--surface) 28%);
  --title-soft-tertiary: color-mix(in srgb, var(--tertiary-container) 70%, var(--surface) 30%);
}

/* Neutraliza integralmente o marcador vertical legado. */
:where(h1,h2,h3,h4){
  padding-left:0;
}
:where(h1,h2,h3,h4)::before,
:where(h1)::after{
  content:none;
  display:none;
}

/* 1. Títulos principais das páginas: linha editorial discreta. */
main .container > h1,
main > section > h1,
.page-title{
  display:block;
  width:fit-content;
  max-width:min(100%,22ch);
  margin-top:0;
  margin-bottom:clamp(2rem,4vw,3.5rem);
  padding:0;
  color:var(--on-surface);
  background:none;
}

main .container > h1::after,
main > section > h1::after,
.page-title::after{
  content:"";
  display:block;
  width:min(15rem,62%);
  min-width:7rem;
  height:1px;
  margin-top:clamp(.55rem,1.1vw,.85rem);
  border-left:clamp(2.75rem,7vw,3.75rem) solid var(--primary);
  background:color-mix(in srgb,var(--outline-variant) 72%,transparent);
  box-sizing:border-box;
}

/* 2. Título hero: mesma assinatura editorial, em escala maior. */
.hero h1{
  display:block;
  width:fit-content;
  max-width:100%;
  padding:0;
  color:var(--on-surface);
  background:none;
}

.hero h1::after{
  content:"";
  display:block;
  width:min(22rem,48%);
  min-width:9rem;
  height:1px;
  margin-top:clamp(.65rem,1.3vw,1rem);
  border-left:clamp(3.5rem,9vw,5rem) solid var(--primary);
  background:color-mix(in srgb,var(--outline-variant) 72%,transparent);
  box-sizing:border-box;
}

/* 3. Chamadas de seção: filete curto, sem efeito de marca-texto. */
.section-heading h2,
.section-header .section-title{
  display:block;
  width:fit-content;
  max-width:min(100%,22ch);
  margin-top:0;
  padding:0;
  background:none;
}

.section-heading h2::after,
.section-header .section-title::after{
  content:"";
  display:block;
  width:min(11rem,58%);
  min-width:5.5rem;
  height:1px;
  margin-top:clamp(.45rem,.9vw,.7rem);
  border-left:clamp(2.25rem,6vw,3rem) solid var(--primary);
  background:color-mix(in srgb,var(--outline-variant) 70%,transparent);
  box-sizing:border-box;
}

/* 4. Divisões cronológicas/categorias de coleção: título + trilho colorido. */
section[data-title] > h2,
.container > section > h2.title-medium{
  display:flex;
  align-items:center;
  width:100%;
  max-width:none;
  gap:clamp(.75rem,2vw,1.4rem);
  margin:clamp(3rem,6vw,5.5rem) 0 clamp(1.25rem,3vw,2rem);
  padding:0;
  color:var(--on-surface);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
section[data-title] > h2::after,
.container > section > h2.title-medium::after{
  content:"";
  display:block;
  flex:1 1 auto;
  min-width:3rem;
  height:clamp(.35rem,.7vw,.58rem);
  border-radius:999px;
  background:linear-gradient(90deg,
    var(--primary) 0 48%,
    var(--secondary) 48% 78%,
    var(--tertiary) 78% 100%);
  opacity:.78;
}

/* Evita margem excessiva no primeiro agrupamento logo após o h1. */
.container > h1 + section[data-title] > h2,
.container > h1 + section > h2.title-medium{
  margin-top:0;
}

/* 5. Eyebrows/kickers: etiqueta editorial, não um título em miniatura. */
.eyebrow,
.section-eyebrow,
.heading-kicker,
.text-category{
  display:table;
  width:fit-content;
  margin-bottom:.85rem;
  padding:.38rem .72rem .34rem;
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--outline-variant));
  border-radius:.35rem 1rem 1rem .35rem;
  color:var(--on-primary-container);
  background:linear-gradient(105deg,
    var(--title-soft-primary) 0 68%,
    var(--title-soft-secondary) 68% 88%,
    var(--title-soft-tertiary) 88% 100%);
  opacity:1;
  box-shadow:0 1px 0 color-mix(in srgb,var(--on-surface) 8%,transparent);
}

/* 6. Títulos de cards: detalhe horizontal integrado e ativado por interação. */
.portfolio-card h3,
.card-title{
  position:relative;
  display:table;
  width:auto;
  max-width:100%;
  padding:0 0 .24em;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--primary) 55%,transparent),
    color-mix(in srgb,var(--secondary) 52%,transparent))
    left bottom / 42% .14em no-repeat;
  transition:background-size .22s var(--ease);
}
.portfolio-card:hover h3,
.portfolio-card:focus-visible h3,
a:hover .card-title,
a:focus-visible .card-title{
  background-size:100% .14em;
}

/* 7. Utilitários para novas categorias textuais. */
.text-highlight{
  padding:.02em .12em .08em;
  background:linear-gradient(transparent 56%,var(--title-band-secondary) 56% 92%,transparent 92%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.text-note{
  padding:.8rem 1rem;
  border-inline-start:.42rem solid var(--tertiary);
  border-radius:0 .65rem .65rem 0;
  background:var(--title-soft-tertiary);
}
.text-kicker{
  font-size:calc(var(--type-scale-base) * .78);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--primary);
}

/* O menu lateral mantém linguagem própria e nunca herda adornos de headings. */
.site-sidebar :where(h1,h2,h3,h4),
.sidebar-nav :where(h1,h2,h3,h4){
  display:block;
  max-width:none;
  padding:0;
  background:none;
}
.site-sidebar :where(h1,h2,h3,h4)::before,
.site-sidebar :where(h1,h2,h3,h4)::after,
.sidebar-nav :where(h1,h2,h3,h4)::before,
.sidebar-nav :where(h1,h2,h3,h4)::after{
  content:none;
  display:none;
}

@media(max-width:600px){
  section[data-title] > h2,
  .container > section > h2.title-medium{
    gap:.7rem;
  }
  section[data-title] > h2::after,
  .container > section > h2.title-medium::after{
    height:.34rem;
  }
}

@media(prefers-contrast:more){
  main .container > h1::after,
  main > section > h1::after,
  .page-title::after,
  .hero h1::after,
  .section-heading h2::after,
  .section-header .section-title::after{
    height:2px;
    background:var(--outline);
  }
  .eyebrow,
  .section-eyebrow,
  .heading-kicker,
  .text-category{
    border-width:2px;
  }
}