/* ==========================================================================
   PereraBatista Advocacia — folha de estilo estática
   Tradução 1:1 do CSS gerado pelo build Next.js/Tailwind (out/index.html).
   Nenhum valor visual foi alterado; apenas nomeado em custom properties.
   ========================================================================== */

/* -- Fontes (self-hosted, latin subset) --------------------------------- */
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -- Tokens --------------------------------------------------------------
   Valores idênticos aos computados no build original.
   --maxw e --radius foram ajustados para o valor REAL em uso (1160px / 2px)
   em vez dos sugeridos no briefing (1180px / 4px) — ver nota de fidelidade.
   -------------------------------------------------------------------- */
:root {
  --c-brand:        #032E51; /* header, rodapé, trust-strip, about/faq bg */
  --c-ink:          #0D1E3B; /* texto principal do corpo */
  --c-hero-shape:   #203565; /* forma do hero, fundo da seção de contato */
  --c-sand:         #E5CCB3; /* eyebrow, hover de área, botão sand */
  --c-brass:        #C5A28C; /* filetes, numeração, ênfase itálica */
  --c-cream:        #F4F0E8; /* texto sobre fundo azul, brand-mark */
  --c-bg:           #FFFFFF;
  --c-muted:        #5B6470; /* texto secundário sobre fundo claro */
  --c-muted-dark:   #B4C0CC; /* texto secundário sobre fundo escuro */
  --c-footer-muted: #8EA0B0; /* linha inferior do rodapé */
  --c-line:         #E3E1DC; /* bordas sobre fundo claro */
  --c-wa:           #25D366;

  --font-title: 'Lora', Georgia, serif;
  --font-text:  'Inter', Arial, sans-serif;

  --radius: 2px;
  --maxw: 1160px;
}

/* -- Reset (equivalente ao preflight do Tailwind, sem o resto do framework) */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--c-line); }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
img, svg, video { display: block; vertical-align: middle; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; background-color: transparent; }
button { border-radius: 0; }
summary { cursor: pointer; }

/* -- Base ------------------------------------------------------------- */
:root { color-scheme: light; }
html { scroll-behavior: smooth; background: var(--c-bg); }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--font-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }

.section-shell { width: min(var(--maxw), calc(100% - 64px)); margin: 0 auto; }

/* -- Header ------------------------------------------------------------- */
.site-header { height: 84px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; background: var(--c-brand); color: var(--c-cream); position: relative; z-index: 5; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; height: 40px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 28px; font-size: 13px; letter-spacing: .04em; }
.main-nav a:not(.nav-cta) { position: relative; opacity: .76; padding-bottom: 4px; transition: opacity .2s, color .2s; }
.main-nav a:not(.nav-cta):after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.main-nav a:not(.nav-cta):hover { opacity: 1; color: #fff; }
.main-nav a:not(.nav-cta):hover:after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 8px; background: var(--c-wa); color: #fff; border: none; padding: 12px 16px; transition: transform .2s ease, filter .2s ease; }
.nav-cta:hover { transform: scale(1.05); filter: brightness(.94); }
.menu-button { display: none; background: none; color: inherit; border: 0; }

/* -- Hero ----------------------------------------------------------------- */
.hero { min-height: 680px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; padding-top: 60px; padding-bottom: 80px; }
.hero-copy { padding-left: 6%; }
.eyebrow { display: flex; align-items: center; gap: 11px; color: var(--c-sand); text-transform: uppercase; font-size: 10px; letter-spacing: .18em; font-weight: 600; }
.eyebrow span { display: inline-block; width: 34px; height: 1px; background: var(--c-brass); }
.eyebrow.dark { color: var(--c-brass); }
h1, h2 { margin: 22px 0; font: 400 clamp(48px, 7vw, 84px)/.98 var(--font-title); letter-spacing: -.05em; }
h1 em, h2 em { color: var(--c-brass); font-style: italic; }
.hero-lede { font: 600 17px/1.5 var(--font-title); max-width: 430px; }
.hero-text { color: var(--c-muted); line-height: 1.7; font-size: 14px; max-width: 470px; margin: 22px 0 30px; }
.button { display: inline-flex; align-items: center; gap: 14px; padding: 16px 20px; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 700; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-light { background: var(--c-brand); color: var(--c-cream); }
.button-sand { background: var(--c-sand); color: var(--c-ink); }
.hero-visual-wrap { width: min(100%, 410px); justify-self: center; }
.hero-visual { position: relative; aspect-ratio: 4 / 5; }
.hero-shape { position: absolute; width: 82%; height: 86%; right: -8%; top: 9%; background: var(--c-hero-shape); }
.media-placeholder { background: linear-gradient(135deg, var(--c-line) 0%, var(--c-cream) 100%); color: var(--c-muted); position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--c-line); }
.media-placeholder:before { content: ''; position: absolute; width: 1px; height: 110%; background: var(--c-brass); transform: rotate(27deg); opacity: .4; }
.media-placeholder span { z-index: 1; padding: 8px 11px; border: 1px solid var(--c-brass); background: rgba(244,240,232,.75); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.hero-visual .media-placeholder { z-index: 1; width: 87%; }
.hero-name { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; text-align: right; color: #fff; font: 16px/1.3 var(--font-title); }
.hero-oab { margin-top: 14px; text-align: right; color: var(--c-ink); font: 10px var(--font-text); letter-spacing: .12em; text-transform: uppercase; }

/* -- Faixa de credibilidade ------------------------------------------------ */
.trust-strip { background: var(--c-brand); color: var(--c-cream); padding: 28px 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 25px; }
.trust-grid div { border-left: 1px solid var(--c-brass); padding-left: 16px; }
.trust-grid strong, .trust-grid span { display: block; }
.trust-grid strong { font: 14px var(--font-title); margin-bottom: 6px; }
.trust-grid span { color: var(--c-muted-dark); font-size: 11px; }

/* -- Seções genéricas ------------------------------------------------------ */
.section { padding: 120px 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 60px; margin-bottom: 60px; }
.section-heading h2, .about-copy h2, .faq-section h2, .contact-section h2, .video-copy h2 { font-size: clamp(42px, 5.5vw, 68px); }
.section-heading > p { max-width: 330px; color: var(--c-muted); line-height: 1.7; font-size: 14px; margin-bottom: 18px; }

/* -- Áreas de atuação -------------------------------------------------- */
.areas-grid { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 1fr; border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.area-card { min-height: 235px; padding: 25px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); position: relative; transition: background .2s; }
.area-card:hover, .area-card.featured { background: var(--c-sand); }
.area-number { color: var(--c-brass); font-size: 11px; letter-spacing: .1em; }
.area-card h3 { font: 400 21px/1.1 var(--font-title); margin: 46px 0 12px; max-width: 160px; }
.area-card p { font-size: 12px; color: var(--c-muted); line-height: 1.55; max-width: 210px; }
.area-card a { position: absolute; right: 22px; bottom: 22px; }

/* -- O advogado ---------------------------------------------------------- */
.about-section, .faq-section { background: var(--c-brand); color: var(--c-cream); }
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 110px; align-items: center; }
.about-visual { width: min(100%, 360px); }
.about-visual .media-placeholder { background: var(--c-hero-shape); border-color: rgba(244,240,232,.2); color: var(--c-cream); }
.about-copy > p:not(.eyebrow) { color: var(--c-muted-dark); font-size: 14px; line-height: 1.8; max-width: 510px; }
.signature { border-top: 1px solid rgba(229,204,179,.35); margin-top: 36px; padding-top: 18px; font: 18px var(--font-title); }
.signature-name { display: inline-flex; align-items: center; gap: 14px; }
.signature-social { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 9px 14px; border-radius: var(--radius); color: #fff; background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; transition: transform .2s ease, filter .2s ease; }
.signature-social:hover { transform: scale(1.05); filter: brightness(1.06); }
.signature small { display: block; color: var(--c-brass); font: 10px var(--font-text); margin-top: 5px; letter-spacing: .1em; }

/* -- Como funciona ------------------------------------------------------ */
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--c-line); }
.process-item { padding: 25px 24px 10px 24px; border-right: 1px solid var(--c-line); transition: background .2s; }
.process-item:first-child { padding-left: 0; }
.process-item:last-child { border: 0; }
.process-item:hover { background: var(--c-sand); }
.process-item span { color: var(--c-brass); font-size: 12px; }
.process-item h3 { font: 400 22px var(--font-title); margin: 38px 0 13px; }
.process-item p { color: var(--c-muted); font-size: 13px; line-height: 1.65; }

/* -- Dúvidas frequentes --------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; align-items: center; }
.faq-image { width: min(100%, 330px); }
.faq-image .media-placeholder { background: var(--c-hero-shape); border-color: rgba(244,240,232,.2); color: var(--c-cream); }
.faq-list { margin-top: 38px; border-top: 1px solid rgba(244,240,232,.25); }
details { border-bottom: 1px solid rgba(244,240,232,.25); padding: 20px 0; }
summary { display: flex; align-items: center; justify-content: space-between; list-style: none; font: 17px var(--font-title); }
summary::-webkit-details-marker { display: none; }
summary svg { transition: transform .2s; }
details[open] summary svg { transform: rotate(180deg); }
details p { color: var(--c-muted-dark); font-size: 13px; line-height: 1.7; max-width: 550px; margin: 16px 0 0; }

/* -- O escritório (vídeo) --------------------------------------------------- */
.video-section { position: relative; background: var(--c-bg); overflow: hidden; }
.video-backdrop { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: var(--c-cream); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
.video-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: center; }
.video-copy > p:not(.eyebrow) { color: var(--c-muted); font-size: 14px; line-height: 1.8; max-width: 480px; margin-bottom: 16px; }

.video-frame { position: relative; justify-self: end; width: min(100%, 440px); aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(3,46,81,.18); }
.video-frame .media-placeholder { border-radius: 14px; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-play { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: var(--c-brand); }
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play-icon { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.94); transition: transform .2s ease; }
.video-play-icon:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-42%,-50%); width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--c-brand); }
.video-play:hover .video-play-icon { transform: scale(1.08); }
.video-tag { position: absolute; left: 16px; bottom: 16px; padding: 8px 12px; background: rgba(13,30,59,.75); color: #fff; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.4); }

.video-features { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--c-line); }
.video-features > div { display: flex; align-items: flex-start; gap: 12px; padding-left: 20px; border-left: 1px solid var(--c-line); }
.video-features > div:first-child { padding-left: 0; border-left: 0; }
.video-features svg { color: var(--c-brass); flex: 0 0 auto; margin-top: 2px; }
.video-features strong { display: block; font: 600 14px var(--font-text); color: var(--c-ink); margin-bottom: 4px; }
.video-features span { display: block; font-size: 12px; color: var(--c-muted); line-height: 1.5; }

/* -- Contato -------------------------------------------------------------- */
.contact-section { background: var(--c-hero-shape); color: var(--c-cream); padding: 110px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: center; }
.contact-lede { color: var(--c-muted-dark); line-height: 1.7; max-width: 390px; margin-bottom: 30px; }
.contact-details { display: flex; flex-direction: column; gap: 22px; font-size: 14px; }
.contact-details a, .contact-details > div { display: flex; align-items: flex-start; gap: 15px; }
.contact-details svg { color: var(--c-sand); flex: 0 0 auto; }
.contact-details a:hover { color: var(--c-sand); }
.contact-row { justify-content: flex-start; align-items: center; gap: 48px; flex-wrap: wrap; }
.contact-address { display: flex; align-items: flex-start; gap: 15px; }
.button-whatsapp { background: var(--c-wa); color: #fff; font-size: 12px; }
.button-whatsapp:hover { transform: scale(1.05); }
.hours { border-top: 1px solid rgba(244,240,232,.25); padding-top: 20px; display: block; }
.hours strong, .hours span { display: block; }
.hours strong { font: 17px var(--font-title); margin-bottom: 8px; }
.hours span { color: var(--c-muted-dark); line-height: 1.6; }

/* -- Rodapé --------------------------------------------------------------- */
.site-footer { background: var(--c-brand); color: var(--c-cream); padding: 46px 0 22px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-bottom: 50px; border-bottom: 1px solid rgba(244,240,232,.2); }
.footer-top p { color: var(--c-muted-dark); max-width: 260px; font-size: 12px; line-height: 1.6; }
.footer-link { display: flex; gap: 8px; align-items: center; color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; color: var(--c-footer-muted); font-size: 10px; }

/* -- Botão flutuante do WhatsApp ------------------------------------------- */
.whatsapp-float { position: fixed; z-index: 10; right: 24px; bottom: 24px; display: flex; gap: 8px; align-items: center; background: var(--c-wa); color: #fff; padding: 13px 16px; border-radius: var(--radius); font-size: 11px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: transform .2s ease; }
.whatsapp-float:hover { transform: scale(1.05); }

/* -- Responsivo ------------------------------------------------------------ */
@media (max-width: 800px) {
  .section-shell { width: min(100% - 36px, 600px); }
  .site-header { height: 72px; padding: 0 18px; }
  .brand-logo { height: 30px; }
  .menu-button { display: block; }
  .main-nav { display: none; position: absolute; top: 72px; left: 0; right: 0; padding: 22px 18px 28px; background: var(--c-brand); flex-direction: column; align-items: stretch; gap: 20px; }
  .main-nav.open { display: flex; }
  .nav-cta { justify-content: center; }
  .hero { display: flex; flex-direction: column; padding: 60px 0 70px; gap: 45px; align-items: stretch; }
  .hero-copy { padding-left: 0; }
  h1 { font-size: clamp(52px, 15vw, 76px); }
  .hero-visual-wrap { align-self: center; width: min(100%, 360px); }
  .trust-grid { grid-template-columns: repeat(2,1fr); gap: 24px 15px; }
  .section { padding: 80px 0; }
  .section-heading { display: block; margin-bottom: 38px; }
  .section-heading > p { margin-top: 25px; }
  .areas-grid { grid-template-columns: repeat(2,1fr); }
  .area-card { min-height: 260px; padding: 17px; }
  .area-card h3 { margin-top: 40px; font-size: 18px; }
  .about-grid, .faq-grid, .contact-grid, .video-grid { grid-template-columns: 1fr; gap: 46px; }
  .about-visual, .faq-image { width: min(75%, 300px); }
  .video-backdrop { width: 100%; clip-path: none; }
  .video-frame { justify-self: center; width: min(80%, 320px); }
  .video-features { grid-template-columns: 1fr; gap: 18px; }
  .video-features > div { padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid var(--c-line); }
  .video-features > div:first-child { padding-top: 0; border-top: 0; }
  .about-copy h2, .faq-section h2, .contact-section h2, .video-copy h2 { font-size: 49px; }
  .process-grid { grid-template-columns: repeat(2,1fr); gap: 0; }
  .process-item { margin: 0; padding: 20px 18px 25px 0; border-bottom: 1px solid var(--c-line); }
  .process-item:nth-child(2n) { padding-left: 18px; border-right: 0; }
  .contact-grid { gap: 55px; }
  .footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; }
  .whatsapp-float { right: 16px; bottom: 16px; width: 50px; height: 50px; justify-content: center; padding: 0; border-radius: 50%; }
  .whatsapp-float span { display: none; }
}

@media (max-width: 430px) {
  .areas-grid { grid-template-columns: 1fr; }
  .area-card { min-height: 205px; }
  .area-card h3 { margin-top: 32px; }
}

/* ==========================================================================
   Páginas de área (/areas/{slug}) — layout novo, sem equivalente no build
   original. Reaproveita tokens, tipografia e o CSS de details/summary já
   definido acima para o FAQ.
   ========================================================================== */

.breadcrumb { font-size: 11px; color: var(--c-muted); letter-spacing: .02em; margin-bottom: 26px; }
.breadcrumb a { opacity: .8; transition: opacity .2s; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }

.area-hero { padding: 90px 0 70px; }
.area-lede { font: 600 20px/1.5 var(--font-title); max-width: 620px; margin: 4px 0 18px; }

.area-block--cream { background: var(--c-cream); }

.area-situations { list-style: none; display: grid; grid-template-columns: repeat(2,1fr); gap: 0 40px; border-top: 1px solid var(--c-line); }
.area-situations li { position: relative; padding: 18px 0 18px 26px; font-size: 14px; color: var(--c-ink); line-height: 1.6; border-bottom: 1px solid var(--c-line); }
.area-situations li:before { content: ''; position: absolute; left: 0; top: 27px; width: 14px; height: 1px; background: var(--c-brass); }

.area-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 40px; border-top: 1px solid var(--c-line); padding-top: 40px; }
.area-step span { color: var(--c-brass); font-size: 12px; letter-spacing: .1em; }
.area-step h3 { font: 400 20px var(--font-title); margin: 30px 0 10px; }
.area-step p { color: var(--c-muted); font-size: 13px; line-height: 1.6; }

.area-documents { list-style: none; columns: 2; column-gap: 50px; }
.area-documents li { font-size: 14px; color: var(--c-ink); line-height: 1.7; padding: 10px 0 10px 22px; position: relative; break-inside: avoid; border-bottom: 1px solid var(--c-line); }
.area-documents li:before { content: '—'; position: absolute; left: 0; color: var(--c-brass); }

.area-faq { background: var(--c-brand); color: var(--c-cream); padding: 100px 0; }
.area-faq h2 { font-size: clamp(38px, 5vw, 58px); }
.area-faq .faq-list { max-width: 720px; margin-top: 34px; }

.area-cta { background: var(--c-hero-shape); color: var(--c-cream); padding: 90px 0; }
.area-cta h2 { font-size: clamp(38px, 5vw, 58px); }
.area-cta .contact-lede { margin-top: 14px; }

.related-areas { padding: 100px 0; }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); margin-top: 40px; }
.related-grid a { background: var(--c-bg); padding: 30px; display: block; transition: background .2s; }
.related-grid a:hover { background: var(--c-sand); }
.related-grid a strong { display: block; font: 400 19px/1.25 var(--font-title); color: var(--c-ink); margin-bottom: 10px; }
.related-grid a p { font-size: 12px; color: var(--c-muted); line-height: 1.55; }

@media (max-width: 800px) {
  .area-hero { padding: 60px 0 50px; }
  .area-situations { grid-template-columns: 1fr; }
  .area-documents { columns: 1; }
  .related-grid { grid-template-columns: 1fr; }
}