/* ══════════════════════════════════════════
   CHARLITON MÜLLER — celular (até 820px)
   Aparência de app: cabeçalho e barra de abas flutuantes em vidro (liquid glass),
   tela cheia com áreas seguras do iPhone, seções que deslizam para o lado.
   Carregado só em telas pequenas (media no <link>); o desktop fica intacto.
════════════════════════════════════════════ */

:root {
  --gutter: 1.15rem;
  --raio: 22px;
  --raio-p: 14px;
  --topo-seguro: env(safe-area-inset-top, 0px);
  --base-segura: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 66px;
  /* espaço livre no pé da tela: no navegador só a área segura; instalado como app, a barra de abas */
  --espaco-tabbar: calc(var(--base-segura) + 18px);
  /* vidro */
  --vidro-escuro: rgba(0, 24, 50, .52);
  --vidro-claro: rgba(255, 255, 255, .62);
  --vidro-borda: rgba(255, 255, 255, .22);
  --vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .06);
  --vidro-sombra: 0 12px 36px rgba(0, 10, 25, .28);
  --vidro-filtro: blur(22px) saturate(185%);
}

html { scroll-padding-top: calc(var(--topo-seguro) + 84px); -webkit-text-size-adjust: 100%; }
body { padding-bottom: 0; -webkit-tap-highlight-color: transparent; overscroll-behavior-x: none; }
section { padding: 4.2rem var(--gutter); }

/* ── vidro: base comum ── */
.vidro, nav#navbar, .tabbar, .hero-area, .mobile-menu, .area-modal-content, .about-badge, .contact-form {
  -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro);
}

/* ══════ CABEÇALHO flutuante ══════ */
.topbar { display: none; }
#header { top: calc(var(--topo-seguro) + 10px); left: 10px; right: 10px; transition: transform .35s var(--ease); }
#header.scrolled { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
nav#navbar, #header.scrolled nav#navbar {
  height: 58px; padding: 0 6px 0 14px; gap: .6rem; border-radius: 20px;
  background: var(--vidro-escuro); border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-brilho), var(--vidro-sombra);
}
#header:not(.scrolled) nav#navbar { background: rgba(0, 24, 50, .28); box-shadow: var(--vidro-brilho); }
.logo-mark { width: 30px; height: 38px; }
.nav-logo { gap: .7rem; }
.logo-name { font-size: 1.12rem; }
.logo-sub { font-size: .52rem; letter-spacing: .3em; }
.nav-cta { display: none; }
.hamburger {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 46px; height: 46px; padding: 0; border-radius: 15px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14);
}
.hamburger span { width: 18px; }

/* menu cheio, em vidro */
.mobile-menu {
  background: rgba(0, 20, 42, .7);
  padding: calc(var(--topo-seguro) + 5rem) 1.5rem calc(var(--base-segura) + 2rem);
}
.mobile-menu ul { gap: .4rem; width: 100%; max-width: 360px; }
.mobile-menu a {
  display: block; padding: .9rem 1rem; border-radius: var(--raio-p);
  font-size: 1.9rem; transition: background .25s, color .25s;
}
.mobile-menu a:active { background: rgba(255, 255, 255, .08); }
.mobile-close {
  top: calc(var(--topo-seguro) + 18px); right: 18px; width: 46px; height: 46px; border-radius: 15px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: 1.1rem;
}

/* ══════ BARRA DE ABAS (só quando instalado na tela inicial) ══════ */
.modo-app { --espaco-tabbar: calc(var(--tabbar-h) + var(--base-segura) + 22px); }
.tabbar { display: none !important; }
.modo-app .tabbar { display: grid !important; }
.modo-app .hamburger { display: none; }
.tabbar {
  position: fixed; z-index: 150; left: 10px; right: 10px; bottom: calc(var(--base-segura) + 10px);
  height: var(--tabbar-h); padding: 6px; border-radius: 24px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  background: var(--vidro-escuro); border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-brilho), var(--vidro-sombra);
  transition: transform .35s var(--ease), opacity .35s;
}
.tabbar a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 18px; color: rgba(255, 255, 255, .62); text-decoration: none;
  font-size: .64rem; font-weight: 500; letter-spacing: .02em; transition: color .3s, background .3s;
}
.tabbar svg { width: 22px; height: 22px; transition: transform .3s var(--ease); }
.tabbar a.ativo { color: #fff; background: linear-gradient(180deg, rgba(212, 185, 122, .34), rgba(184, 154, 90, .16)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.tabbar a.ativo svg { color: var(--gold2); transform: translateY(-1px); }
.tabbar a:active svg { transform: scale(.9); }
body.menu-aberto .tabbar, body.modal-aberto .tabbar { transform: translateY(140%); opacity: 0; }

/* no celular o WhatsApp flutuante sai; no navegador entra o "Fale com um advogado" depois da abertura */
.whatsapp-float { display: none; }
.cta-fixo {
  display: inline-flex; align-items: center; gap: .6rem; position: fixed; z-index: 140;
  left: 50%; bottom: calc(var(--base-segura) + 14px); transform: translate(-50%, 160%); opacity: 0;
  padding: .85rem 1.3rem; border-radius: 999px; white-space: nowrap; text-decoration: none;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: rgba(0, 30, 62, .62); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro);
  box-shadow: var(--vidro-brilho), var(--vidro-sombra);
  transition: transform .45s var(--ease), opacity .35s;
}
.cta-fixo svg { color: var(--gold2); }
.cta-fixo.visivel { transform: translate(-50%, 0); opacity: 1; }
.modo-app .cta-fixo, body.menu-aberto .cta-fixo, body.modal-aberto .cta-fixo { display: none; }

/* ══════ HERO em tela cheia ══════ */
#hero { min-height: 100svh; min-height: 100dvh; }
.hero-media img { object-position: 42% 40%; }
.hero-overlay {
  background:
    linear-gradient(180deg, rgba(0, 20, 42, .55) 0%, rgba(0, 20, 42, .35) 30%, rgba(0, 13, 26, .9) 72%, rgba(0, 13, 26, .97) 100%);
}
.hero-content { padding: calc(var(--topo-seguro) + 110px) var(--gutter) 1.4rem; }
.hero-tag { font-size: .66rem; letter-spacing: .16em; gap: .7rem; margin-bottom: 1.2rem; }
.hero-tag::before { width: 22px; }
.hero-h1 { font-size: clamp(2.5rem, 11vw, 3.4rem); line-height: 1.04; margin-bottom: 1.1rem; }
.hero-desc { font-size: .95rem; line-height: 1.7; color: rgba(255, 255, 255, .8); margin-bottom: 1.6rem; }
.hero-actions { flex-direction: column; align-items: stretch; gap: .7rem; }
.btn-primary { justify-content: center; padding: 1.1rem 1.4rem; border-radius: 16px; font-size: .74rem; box-shadow: 0 10px 26px rgba(184, 154, 90, .3); }
.btn-ghost {
  text-align: center; padding: 1rem; border-radius: 16px; font-size: .72rem;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro);
}
/* áreas da abertura: fileira de pílulas de vidro que desliza */
.hero-areas {
  display: flex; gap: .55rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: .4rem var(--gutter) var(--espaco-tabbar); scroll-padding: 0 var(--gutter);
  background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hero-areas::-webkit-scrollbar { display: none; }
.hero-area, .hero-area:first-child, .hero-area:nth-child(even) {
  flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; align-items: center;
  padding: .75rem 1.1rem; border-radius: 999px; font-size: 1.02rem;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.hero-area::before { display: none; }
.hero-area span { font-size: .62rem; }

/* ══════ TIPOGRAFIA ══════ */
.section-tag { font-size: .66rem; letter-spacing: .2em; margin-bottom: 1rem; }
.section-tag::before { width: 22px; }
.section-h2 { font-size: clamp(2rem, 8.6vw, 2.6rem); margin-bottom: 1.1rem; }
.section-lead { font-size: .94rem; line-height: 1.75; }

/* ══════ SOBRE ══════ */
#sobre { gap: 2.6rem; }
.about-visual { padding: 0 .8rem .8rem 0; max-width: none; }
.about-visual::before { border-radius: calc(var(--raio) + 4px); }
.about-photo-wrap { aspect-ratio: 4 / 3.6; border-radius: var(--raio); }
.about-badge {
  left: .8rem; bottom: 1.6rem; width: auto; padding: .9rem 1.1rem; border-radius: 16px; border-left: 0;
  background: rgba(0, 30, 62, .62); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-brilho), var(--vidro-sombra);
}
.about-badge span:last-child { font-size: .6rem; }
.about-facts { grid-template-columns: 1fr 1fr; gap: .6rem; border: 0; margin-top: 2rem; }
.about-facts li {
  flex-direction: column; gap: .6rem; padding: 1rem; border: 0; border-radius: 18px;
  background: var(--cream); border: 1px solid rgba(184, 154, 90, .18);
}
.about-facts strong { font-size: .66rem; letter-spacing: .08em; }
.about-facts span { font-size: .8rem; line-height: 1.45; }

/* ══════ ÁREAS: carrossel por toque ══════ */
#areas { padding-right: 0; padding-left: 0; }
.areas-header { padding: 0 var(--gutter); margin-bottom: 1.8rem; }
.carousel-nav { display: none; }
.areas-track {
  grid-auto-columns: 80%; gap: .8rem; padding: 0 var(--gutter) .4rem; scroll-padding: 0 var(--gutter);
  scroll-behavior: auto; overscroll-behavior-x: contain;
}
.area-card { border-radius: var(--raio); aspect-ratio: 4 / 5; scroll-snap-align: start; isolation: isolate; }
.area-body { padding: 1.4rem 1.3rem; }
.area-title { font-size: 1.6rem; }
.area-short { max-height: 6rem; opacity: 1; margin-top: .8rem; font-size: .82rem; }
.area-link { font-size: .66rem; }

/* folha que sobe de baixo (modal) */
.area-modal { padding: 0; align-items: flex-end; }
.area-modal-content {
  max-width: none; max-height: 88svh; border-top: 0; border-radius: 28px 28px 0 0;
  padding: 2.6rem 1.4rem calc(var(--base-segura) + 1.6rem);
  background: rgba(255, 255, 255, .93); transform: translateY(100%);
  overscroll-behavior: contain;
}
.area-modal-content::before { content: ''; position: absolute; top: 10px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: rgba(0, 30, 62, .2); }
.area-modal-close { top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 12px; }
.area-modal-title { font-size: 1.9rem; padding-right: 2.6rem; }
.area-modal-desc, .area-modal-list li { font-size: .92rem; }
.area-modal-cta { display: flex; justify-content: center; border-radius: 16px; padding: 1.1rem; }

/* ══════ SETOR PÚBLICO ══════ */
#setor-publico { padding-top: 4.6rem; padding-bottom: 4.6rem; }
.sp-inner { gap: 2.2rem; }
.sp-list { border: 0; display: grid; gap: .55rem; }
.sp-list li {
  grid-template-columns: 1fr; gap: .25rem; padding: 1rem 1.1rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px;
  background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .86rem;
}

/* ══════ EQUIPE: cartões que deslizam ══════ */
#equipe { padding-left: 0; padding-right: 0; }
.team-header { flex-direction: column; align-items: flex-start; gap: .4rem; margin-bottom: 1.8rem; padding: 0 var(--gutter); }
.team-grid {
  display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--gutter) .6rem; scroll-padding: 0 var(--gutter); overscroll-behavior-x: contain; align-items: flex-start;
}
.team-grid::-webkit-scrollbar { display: none; }
.team-grid > .member-card, .team-grid > .member-card:last-child:nth-child(odd) {
  flex: 0 0 86%; width: auto; grid-column: auto; justify-self: auto; scroll-snap-align: start;
  grid-template-columns: 1fr; border-radius: var(--raio); overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 30, 62, .08);
}
.member-photo { aspect-ratio: 4 / 4.4; min-height: 0; }
.member-img { object-position: center 18%; }
.member-info { padding: 1.4rem 1.3rem 1.5rem; }
.member-role { font-size: .64rem; }
.member-name { font-size: 1.7rem; }
.member-oab { font-size: .76rem; }
.member-spec { font-size: .86rem; margin-top: .9rem; }
.member-tags li { font-size: .62rem; border-radius: 999px; padding: .4rem .75rem; }
.member-toggle { width: 100%; padding: 1rem 0; font-size: .68rem; }
.member-historico li { font-size: .84rem; }
.member-contact { gap: .3rem 1.2rem; }
.member-contact a { font-size: .8rem; padding: .5rem 0; word-break: break-all; }
/* pontos que mostram que dá para deslizar */
.deslize-pontos { display: flex; justify-content: center; gap: 6px; margin-top: 1rem; }
.deslize-pontos i { width: 6px; height: 6px; border-radius: 3px; background: rgba(0, 30, 62, .2); transition: width .3s var(--ease), background .3s; }
.deslize-pontos i.ativo { width: 20px; background: var(--gold); }
#areas .deslize-pontos i { background: rgba(255, 255, 255, .25); }
#areas .deslize-pontos i.ativo { background: var(--gold); }

/* ══════ COMO ATUAMOS ══════ */
.diff-header { margin-bottom: 1.8rem; }
.diff-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
.diff-item { padding: 1.1rem 1rem 1.2rem; border: 1px solid rgba(0, 30, 62, .08); border-radius: 18px; background: #fff; overflow: hidden; }
.diff-item::before { top: 0; left: 1rem; width: 28px; }
.diff-num { font-size: 2rem; margin-bottom: .6rem; }
.diff-item h3 { font-size: .68rem; letter-spacing: .08em; }
.diff-item p { font-size: .8rem; line-height: 1.6; }

/* ══════ PUBLICAÇÕES: cartões que deslizam ══════ */
#artigos { padding-left: 0; padding-right: 0; }
.artigos-header { flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 1.8rem; padding: 0 var(--gutter); }
.link-all { font-size: .7rem; padding: .5rem 0; }
.artigos-grid {
  display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--gutter) .6rem; scroll-padding: 0 var(--gutter); overscroll-behavior-x: contain; align-items: stretch;
}
.artigos-grid::-webkit-scrollbar { display: none; }
.artigo-card, .artigo-card.destaque {
  flex: 0 0 82%; grid-template-columns: 1fr; grid-row: auto; align-items: start; gap: 0;
  scroll-snap-align: start; background: var(--offwhite); border-radius: var(--raio); overflow: hidden;
  border: 1px solid rgba(0, 30, 62, .07);
}
.artigo-card + .artigo-card, .artigo-card.destaque + .artigo-card { padding-top: 0; border-top: 1px solid rgba(0, 30, 62, .07); }
.artigo-thumb, .artigo-card.destaque .artigo-thumb { aspect-ratio: 16 / 10; }
.artigo-body, .artigo-card.destaque .artigo-body { padding: 1.1rem 1.1rem 1.3rem; }
.artigo-titulo, .artigo-card.destaque .artigo-titulo { font-size: 1.35rem; }
.artigo-categoria { font-size: .6rem; border-radius: 999px; padding: .35rem .75rem; }
.artigo-data { font-size: .72rem; }
.artigo-resumo { font-size: .84rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.artigo-autor { font-size: .74rem; }

/* ══════ UNIDADES ══════ */
.unidades-grid { gap: .9rem; margin-top: 1.6rem; }
.unidade-card { border-radius: var(--raio); }
.unidade-photo { aspect-ratio: 16 / 9; }
.unidade-body { padding: 1.3rem 1.2rem 1.4rem; border-top-width: 2px; }
.unidade-body h3 { font-size: 1.6rem; }
.unidade-body p { font-size: .88rem; }
.unidade-body a { display: inline-block; padding: .4rem 0; font-size: .86rem; }

/* ══════ CONTATO ══════ */
#contato::before { display: none; }
.contact-grid { gap: 2.4rem; }
.contact-info { margin-top: 1.8rem; gap: .6rem; }
.contact-info li {
  align-items: center; padding: .8rem; border-radius: 16px; font-size: .92rem;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
}
.contact-info svg { width: 40px; height: 40px; border-radius: 12px; }
.contact-label { font-size: .62rem; }
.contact-form {
  padding: 1.3rem; border-radius: var(--raio); gap: 1rem;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--vidro-brilho);
}
.form-row { grid-template-columns: 1fr; gap: 1rem; }
.form-group label { font-size: .64rem; }
/* 16px evita o zoom automático do iPhone ao tocar no campo */
.form-group input, .form-group select, .form-group textarea { font-size: 16px; padding: .95rem 1rem; border-radius: var(--raio-p); }
.form-consent { font-size: .8rem; }
.form-consent input { width: 20px; height: 20px; }
.form-submit { align-self: stretch; justify-content: center; border-radius: 16px; padding: 1.15rem; font-size: .74rem; }

/* ══════ RODAPÉ ══════ */
footer { padding: 3.4rem var(--gutter) var(--espaco-tabbar); }
.footer-top { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; padding-bottom: 2rem; }
.footer-top > div:first-child { grid-column: 1 / -1; }
.footer-col:last-child { grid-column: 1 / -1; }
.footer-col h2 { font-size: .64rem; margin-bottom: .8rem; }
.footer-col ul { gap: 0; }
.footer-col a { display: block; padding: .45rem 0; font-size: .86rem; }
.footer-bottom { flex-direction: column; font-size: .72rem; line-height: 1.6; }

/* sem suporte a vidro: fundos sólidos */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  nav#navbar, #header.scrolled nav#navbar, #header:not(.scrolled) nav#navbar, .tabbar { background: rgba(0, 30, 62, .96); }
  .mobile-menu { background: var(--navy); }
  .area-modal-content { background: #fff; }
}

/* telas bem estreitas (iPhone SE / mini) */
@media (max-width: 360px) {
  .tabbar a span { font-size: .58rem; }
  .about-facts { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
}

/* cabeçalho escondido ao descer a página */
#header.oculto { transform: translateY(calc(-100% - var(--topo-seguro) - 20px)); }