/* ==========================================================================
   Sidnei Cordeiro Advocacia — página de cada área (/areas/<slug>/)
   --------------------------------------------------------------------------
   Aprovada pelo titular em 14/09/2026 (maquete K). A foto da área ocupa a
   cena inteira, como no hero; título e tópicos na coluna esquerda,
   detalhamento à direita, direto sobre a foto (sem caixa). Carregado só nas
   páginas de área (head(extra_css=...)); abas em assets/area.js.

   Ajuste de 14/09/2026 (pedido do titular): véu mais claro e uniforme, sem a
   película da caixa. Contraste calculado no pior caso (foto branca sob véu
   de .68, fundo com luminância .115): texto principal 5,7:1 · parágrafos,
   menu 4,9:1 · rótulo, voltar e OAB da marca 4,7:1 · título h1 em ouro
   3,8:1 (texto grande) · marcador ouro 3,1:1. Ressalva e rodapé saíram da
   página (titular, 14/09/2026).
   Clarear o véu abaixo de .68 exige remedir.
   ========================================================================== */

/* Transição entre páginas: o fundo (.cena__foto) recebe, no HTML, o mesmo
   view-transition-name do cartão da área no carrossel de /areas/. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Cena: foto no fundo inteiro; véu uniforme (o texto ocupa as duas metades) */
body.tela-area{margin:0;background:#1F252C;color:#F7F2EC;height:100vh;height:100dvh;overflow:hidden}
/* alinhada à esquerda: os objetos das fotos das áreas ficam no terço esquerdo */
.cena__foto{position:fixed;inset:0;background:#1F252C left center/cover no-repeat}
.cena__veu{position:fixed;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 20%),
    rgba(20,24,30,.68)}

.area{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;box-sizing:border-box;
  max-width:1180px;margin:0 auto;padding:clamp(18px,3.4vh,36px) clamp(24px,5vw,56px) clamp(14px,2.6vh,26px);
  text-shadow:0 1px 14px rgba(10,12,16,.45)}
.area .portal__top{flex:none}

/* Corpo: cabeça (voltar e título) centralizada por cima das duas colunas;
   abaixo, menu à esquerda e detalhamento à direita, começando na mesma altura */
.area__corpo{flex:1;min-height:0;display:grid;grid-template-columns:minmax(260px,34%) 1fr;
  grid-template-rows:auto minmax(0,1fr);column-gap:clamp(24px,4vw,64px);margin-top:clamp(16px,4vh,48px)}

/* Titular, 14/09/2026: respiro maior entre título e corpo */
.area__cabeca{grid-column:1/-1;text-align:center;margin-bottom:clamp(32px,8vh,96px)}
.voltar{display:inline-flex;align-items:center;gap:8px;font:600 .7rem/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;
  color:#E3DCD0;text-decoration:none;padding:6px 0}
.voltar:hover{color:#FFFFFF}
/* Título em ouro claro (titular: destacar do texto branco da página);
   texto grande, 3,6:1 no pior caso (mínimo AA para texto grande: 3:1) */
.area__cabeca h1{font-family:var(--font-display);font-weight:600;color:#E2C58A;text-wrap:balance;
  font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.08;letter-spacing:-.01em;margin:8px 0 0}

.menu{list-style:none;margin:0;padding:0;align-self:start;display:grid;gap:2px;border-left:1px solid rgba(247,242,236,.24)}
.menu button{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;
  padding:clamp(7px,1.3vh,11px) 0 clamp(7px,1.3vh,11px) 18px;margin-left:-1px;border-left:2px solid transparent;
  color:#DCE2E8;font:500 clamp(.88rem,1.05vw,1rem)/1.35 var(--font-ui);transition:color .2s,border-color .2s}
.menu button:hover{color:#FFFFFF}
.menu button[aria-selected="true"]{color:#FFFFFF;font-weight:600;border-left-color:#D4B26C}
.menu button:focus-visible{outline:2px solid #D4B26C;outline-offset:3px}

/* Detalhamento sem caixa: o véu da cena já garante o contraste */
.detalhe{min-height:0;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;
  padding:clamp(3px,.7vh,6px) 0 0}
.painel{display:flex;flex-direction:column;min-height:0;animation:surge .35s ease both}
.painel[hidden]{display:none!important}
@keyframes surge{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.painel h2{font-family:var(--font-display);font-weight:600;color:#F7F2EC;font-size:clamp(1.45rem,2.3vw,2.05rem);line-height:1.15;margin:0 0 14px}
.painel p{color:#DCE2E8;font-size:clamp(.92rem,1.08vw,1.04rem);line-height:1.62;margin:0 0 18px;max-width:62ch}
.painel .rotulo{font:600 .66rem/1 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:#E3DCD0;margin:4px 0 12px}
.painel ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.painel li{position:relative;padding-left:18px;color:#DCE2E8;font-size:clamp(.88rem,1vw,.98rem);line-height:1.45}
.painel li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:#D4B26C}

.area .brand-oab{color:#E3DCD0}

/* Celular e janelas estreitas: tudo em uma coluna, menu vira fileira de
   botões; a página pode rolar */
@media (max-width:860px){
  body.tela-area{height:auto;min-height:100dvh;overflow:auto}
  .area{height:auto;min-height:100dvh}
  /* minmax(0,…) e min-width:0: sem isso a fileira de botões alarga a coluna
     além da tela e corta o texto à direita */
  /* align-content:start: sem isso a altura mínima da tela se reparte entre
     as linhas e abre vãos entre título, botões e texto */
  .area__corpo{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:16px;align-content:start}
  .area__cabeca{text-align:left;margin-bottom:0}
  .menu,.detalhe{min-width:0}
  .menu{display:flex;gap:8px;overflow-x:auto;border-left:0;padding-bottom:6px;scrollbar-width:none;
    margin:18px calc(-1 * clamp(24px,5vw,56px)) 0;padding-left:clamp(24px,5vw,56px);padding-right:clamp(24px,5vw,56px)}
  .menu::-webkit-scrollbar{display:none}
  .menu li{flex:none}
  .menu button{width:auto;white-space:nowrap;margin:0;padding:10px 14px;border:1px solid rgba(247,242,236,.34);border-radius:20px;font-size:.86rem}
  .menu button[aria-selected="true"]{border-color:#D4B26C;background:rgba(176,141,74,.3)}
  .detalhe{overflow:visible;padding-top:4px}
}
@media (prefers-reduced-motion:reduce){.painel{animation:none}.menu button{transition:none}}