/*--------------------------------------------------------------
- Extension Hair - página institucional (privacidade-e-termos.php)
  Usa a base de css/topo-rodape.css e .eyebrow de css/extension-hair.css
--------------------------------------------------------------*/

.eh-inst a { transition:color .18s, border-color .18s }

/* Abertura */
.eh-inst .inst-hero { background:var(--cream); border-bottom:1px solid var(--line); padding:110px 6vw 64px }
.eh-inst .inst-hero h1 { max-width:900px; margin:0; font-family:Georgia,Times New Roman,serif; font-size:clamp(46px,5.4vw,78px); font-weight:400; line-height:1.02; letter-spacing:-.045em }
.eh-inst .inst-hero h1 em { color:var(--gold); font-weight:400 }
.eh-inst .inst-lead { max-width:560px; margin:28px 0 0; color:#0d0b0a94; font-size:14px; line-height:1.75 }
.eh-inst .inst-atalhos { display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:38px }
.eh-inst .inst-atalhos a { padding-bottom:5px; border-bottom:1px solid var(--gold); letter-spacing:.11em; text-transform:uppercase; font-size:11px }
.eh-inst .inst-atalhos a span { margin-left:6px; color:var(--gold) }
.eh-inst .inst-atalhos a:hover { color:var(--brown) }
.eh-inst .inst-hero small { display:block; margin-top:34px; color:#0d0b0a73; letter-spacing:.08em; text-transform:uppercase; font-size:9px }

/* Conteúdo */
.eh-inst .inst-conteudo { display:grid; grid-template-columns:240px minmax(0,760px); gap:7vw; padding:90px 6vw 120px; background:var(--paper) }
.eh-inst .inst-sumario { position:sticky; top:112px; align-self:start; display:flex; flex-direction:column; gap:14px; padding-top:6px; border-top:1px solid var(--ink) }
.eh-inst .inst-sumario p { margin:16px 0 4px; color:var(--gold); letter-spacing:.16em; text-transform:uppercase; font-size:9px }
.eh-inst .inst-sumario a { color:#0d0b0a99; font-size:12px }
.eh-inst .inst-sumario a:hover { color:var(--ink) }

.eh-inst .inst-documento { padding-bottom:70px; margin-bottom:70px; border-bottom:1px solid var(--line) }
.eh-inst .inst-documento:last-child { margin-bottom:0; padding-bottom:0; border-bottom:0 }
.eh-inst .inst-documento h2 { margin:0 0 26px; font-family:Georgia,Times New Roman,serif; font-size:clamp(36px,3.6vw,52px); font-weight:400; line-height:1.06; letter-spacing:-.04em }
.eh-inst .inst-documento h3 { display:flex; align-items:baseline; gap:14px; margin:42px 0 14px; font-family:Georgia,serif; font-size:21px; font-weight:400; line-height:1.3 }
.eh-inst .inst-documento h3 span { color:var(--gold); font-family:var(--font-geist-sans),sans-serif; letter-spacing:.12em; font-size:9px }
.eh-inst .inst-documento p:not(.eyebrow),
.eh-inst .inst-documento li { color:#0d0b0aa6; font-size:14px; line-height:1.8 }
.eh-inst .inst-documento p:not(.eyebrow) { margin:0 0 16px }
.eh-inst .inst-documento ul { margin:0 0 18px; border-top:1px solid var(--line) }
.eh-inst .inst-documento li { position:relative; padding:12px 0 12px 24px; border-bottom:1px solid var(--line) }
.eh-inst .inst-documento li:before { content:"✦"; position:absolute; left:2px; top:14px; color:var(--gold); font-size:9px }
.eh-inst .inst-documento strong { color:var(--ink); font-weight:600 }
.eh-inst .inst-documento a { color:var(--ink); border-bottom:1px solid var(--gold) }
.eh-inst .inst-documento a:hover { color:var(--brown) }

@media (width<=1100px) {
  .eh-inst .inst-conteudo { grid-template-columns:200px minmax(0,1fr); gap:5vw }
}
@media (width<=760px) {
  .eh-inst .inst-hero { padding:80px 20px 50px }
  .eh-inst .inst-hero h1 { font-size:44px }
  .eh-inst .inst-atalhos { flex-direction:column; align-items:flex-start }
  .eh-inst .inst-conteudo { grid-template-columns:1fr; gap:0; padding:60px 20px 85px }
  .eh-inst .inst-sumario { display:none }
  .eh-inst .inst-documento { padding-bottom:55px; margin-bottom:55px }
  .eh-inst .inst-documento h3 { font-size:19px }
  .eh-inst .inst-documento p:not(.eyebrow), .eh-inst .inst-documento li { font-size:13px }
}