/* Flores & Souza Advocacia: a mesa do escritório, vista de cima (LEITURA.md, item 6). SV N3, sem efeito nenhum.
   Tampo azul-marinho da marca, papelão pardo no tan da marca, papel branco e cinza-claro de mesa de escritório.
   Sorts Mill Goudy (oldstyle próxima da Berkeley Oldstyle do site atual) + Nunito (do site atual). */
:root {
  --fundo: #eceef2;
  --tinta: #111826;
  --suave: #4a5263;
  --marca: #011342;
  --marca-2: #d9c3a9;
  --mesa: #111826;
  --mesa-2: #18223a;
  --papel: #ffffff;
  --linha: #d5d9e0;
  --kraft: #cdae87;
  --kraft-2: #b8976d;
  --pasta-azul: #1d2c4c;
  --postit: #f2e49c;
  --cartao: #ffffff;
  --raio: 4px;
  --fonte-titulo: "Sorts Mill Goudy", "Goudy Old Style", Georgia, serif;
  --fonte-texto: "Nunito", system-ui, sans-serif;
  --wa-cor: var(--marca);
}
h1, h2, h3 { font-weight: 400; letter-spacing: -0.01em; }
.link-seta { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Cabeçalho */
.topo { position: sticky; top: 0; z-index: 50; background: var(--mesa); color: #fff; border-bottom: 1px solid rgb(255 255 255 / .08); }
.topo__linha { width: min(1280px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; display: flex; align-items: center; gap: 24px; min-height: 72px; }
.topo__logo img { width: 170px; height: auto; }
.topo__nav { display: flex; gap: 26px; margin-left: auto; font-size: .95rem; }
.topo__nav a { opacity: .86; padding-block: 10px; }
.topo__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.topo__cta { --b-fundo: var(--marca-2); --b-tinta: var(--mesa); padding: .8em 1.2em; }

/* ===== Motivo 1: a mesa vista de cima ===== */
.mesa { position: relative; overflow: hidden; background: var(--mesa); color: #fff; }
.mesa::before { /* veio fino do tampo laminado, estático */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .018) 0 2px, transparent 2px 9px), radial-gradient(120% 90% at 30% 20%, rgb(255 255 255 / .05), transparent 60%);
}
.mesa__in { position: relative; width: min(1280px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); min-height: 640px; padding-block: 64px 72px; }
.matabarrao { position: relative; z-index: 2; padding: clamp(28px, 4vw, 52px) clamp(30px, 4.4vw, 60px); background: var(--marca-2); color: var(--mesa); border-radius: 6px; box-shadow: 0 2px 0 rgb(0 0 0 / .25), 0 26px 40px -24px rgb(0 0 0 / .7); }
.matabarrao::before, .matabarrao::after { /* as duas réguas de couro mais escuro nas pontas do mata-borrão */
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(12px, 1.4vw, 18px); background: linear-gradient(90deg, #b39878, #c4a987); }
.matabarrao::before { left: 0; border-radius: 6px 0 0 6px; }
.matabarrao::after { right: 0; border-radius: 0 6px 6px 0; transform: scaleX(-1); }
.matabarrao h1 { font-size: clamp(2.5rem, 4.6vw, 4.3rem); line-height: 1; color: var(--mesa); }
.matabarrao__sub { margin-top: 1.1em; font-size: clamp(1.02rem, 1.2vw, 1.15rem); max-width: 34em; color: #2a3142; }
.matabarrao__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 1.8em; }
.matabarrao .botao { --b-fundo: var(--mesa); --b-tinta: #fff; }
.matabarrao .link-seta { color: var(--mesa); }

.cena { position: relative; z-index: 1; height: 560px; }
.obj { position: absolute; display: block; filter: drop-shadow(0 3px 2px rgb(0 0 0 / .35)) drop-shadow(0 14px 16px rgb(0 0 0 / .35)); }
a.obj { transition: filter .25s; }
a.obj:hover { filter: drop-shadow(0 3px 2px rgb(0 0 0 / .35)) drop-shadow(0 20px 22px rgb(0 0 0 / .45)); }
a.obj:focus-visible { outline: 3px solid var(--marca-2); outline-offset: 4px; }
.obj svg { width: 100%; height: auto; }
.obj--foto { left: 4%; top: 4%; width: 44%; z-index: 2; background: #fff; }
.obj--foto img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.obj--carteira { left: 56%; top: 0; width: 28%; z-index: 3; }
.obj--extrato { left: 50%; top: 38%; width: 36%; z-index: 4; }
.obj--atestado { left: 20%; top: 70%; width: 30%; z-index: 3; }
.obj--xicara { left: 88%; top: 30%; width: 26%; z-index: 5; }
.obj--caneta { left: 45.5%; top: 70%; width: 210px; rotate: 64deg; transform-origin: center; z-index: 3; pointer-events: none; }
.obj--oculos { left: 6%; bottom: -14px; width: 190px; rotate: -9deg; z-index: 1; pointer-events: none; }
.obj-tx { font-family: var(--fonte-texto); }
.obj-tx--capa { font-size: 15px; font-weight: 800; letter-spacing: .14em; fill: #e9eef8; }
.obj-tx--tit { font-size: 12px; font-weight: 800; letter-spacing: .08em; fill: #1b2540; }
.obj-tx--sub { font-size: 12px; fill: #6b7385; }

/* Cabeça de seção */
.sec-cab { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-cab h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.sec-cab p { margin-top: .8em; color: var(--suave); font-size: 1.05rem; }

/* ===== Motivo 2: duas pastas de papelão com elástico ===== */
.areas { padding-block: clamp(64px, 8vw, 110px); }
.pastas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); align-items: start; }
.pasta { position: relative; overflow: hidden; padding: 96px clamp(16px, 2vw, 26px) clamp(20px, 2.4vw, 30px); border-radius: 5px 14px 14px 5px; background: var(--pasta-cor); box-shadow: inset 6px 0 0 rgb(0 0 0 / .12), 0 2px 0 rgb(0 0 0 / .06), 0 24px 34px -24px rgb(17 24 38 / .55); }
.pasta--inss { --pasta-cor: var(--pasta-azul); }
.pasta--trab { --pasta-cor: var(--kraft); }
.pasta::before, .pasta::after { /* os dois elásticos cruzando os cantos */
  content: ""; position: absolute; z-index: 3; width: 190px; height: 10px; border-radius: 5px;
  background: linear-gradient(180deg, #2a2a2e 0 40%, #0d0d10 60%); box-shadow: 0 3px 4px rgb(0 0 0 / .35); }
.pasta::before { top: 30px; right: -52px; rotate: 45deg; }
.pasta::after { bottom: 30px; left: -52px; rotate: 45deg; }
.pasta__etiqueta { position: absolute; top: 24px; left: clamp(16px, 2vw, 26px); z-index: 2; display: flex; align-items: baseline; gap: 12px; max-width: calc(100% - 110px); padding: 10px 16px 9px; background: #fff; border: 1px solid rgb(0 0 0 / .1); border-radius: 3px; box-shadow: 0 2px 3px rgb(0 0 0 / .15); }
.pasta__titulo { font-size: clamp(1.35rem, 2vw, 1.75rem); color: var(--tinta); }
.pasta__etiqueta span { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.pasta__folha { position: relative; z-index: 1; background: var(--papel); padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.6vw, 36px); border-radius: 2px; box-shadow: 0 1px 2px rgb(0 0 0 / .14), 0 10px 18px -14px rgb(0 0 0 / .4); }
.situacoes { list-style: none; margin: 0; padding: 0; }
.situacoes li { padding-block: 20px; border-top: 1px solid var(--linha); }
.situacoes li:first-child { border-top: 0; padding-top: 4px; }
.situacoes h3 { font-size: clamp(1.32rem, 1.7vw, 1.55rem); line-height: 1.15; padding-right: 30px; }
.situacoes p { margin-top: .5em; color: var(--suave); }
.perguntar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: .4em; font-weight: 700; font-size: .95rem; color: var(--marca); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.perguntar svg { width: 18px; height: 18px; flex: none; }
.pasta__cta { margin-top: 18px; }
.fala-ig { margin: 0; }
.fala-ig blockquote { margin: 0; }
.fala-ig blockquote p { font-family: var(--fonte-titulo); font-style: italic; }
.fala-ig figcaption { margin-top: .6em; font-size: .88rem; color: var(--suave); }
.fala-ig figcaption a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; color: var(--marca); }
.fala-ig--folha { margin-top: 10px; padding: 18px 0 4px; border-top: 2px solid var(--tinta); }
.fala-ig--folha blockquote p { font-size: 1.3rem; line-height: 1.25; }

/* ===== Motivo 3: anel de café na folha da fala ===== */
.atencao { padding-block: 0 clamp(64px, 8vw, 110px); }
.folha-solta { position: relative; max-width: 860px; margin-inline: auto; padding: clamp(34px, 5vw, 64px) clamp(26px, 5vw, 72px); background: var(--papel); border-radius: 2px; box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 26px 40px -30px rgb(17 24 38 / .55); }
.folha-solta .fala-ig { max-width: calc(100% - 90px); }
.anel { position: absolute; width: clamp(120px, 13vw, 170px); top: -58px; right: -58px; pointer-events: none; }
.fala-ig--grande blockquote p { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15; color: var(--tinta); font-style: normal; }
.fala-ig--grande figcaption { margin-top: 1.2em; font-size: .95rem; }

/* ===== O escritório, com o Motivo 4: bloquinho adesivo da nota do Google ===== */
.escritorio { padding-block: clamp(56px, 7vw, 100px) clamp(64px, 8vw, 110px); }
.escritorio__grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.escritorio__lado { display: grid; gap: clamp(28px, 3vw, 40px); padding-top: 8px; }
.folha-esc { position: relative; padding: clamp(34px, 4.4vw, 58px) clamp(26px, 4vw, 54px); background: var(--papel); border-radius: 2px; box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 26px 40px -30px rgb(17 24 38 / .55); }
.folha-esc h2 { font-size: clamp(2.1rem, 3.6vw, 3rem); max-width: 10em; padding-right: 180px; }
.folha-esc > p { margin-top: 1em; color: var(--suave); }
.postit { position: absolute; top: -22px; right: clamp(16px, 3vw, 40px); z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; width: 168px; height: 168px; padding: 34px 16px 16px; background: var(--postit); color: var(--tinta); box-shadow: 0 1px 1px rgb(0 0 0 / .08), 0 12px 14px -10px rgb(0 0 0 / .45); }
.postit::before { /* faixa de cola, um pouco mais escura no topo */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 26px; background: rgb(0 0 0 / .045); }
.postit b { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.28rem; line-height: 1.1; white-space: nowrap; }
.postit span { font-size: .95rem; }
.postit u { margin-top: 8px; font-size: .85rem; font-weight: 700; text-underline-offset: 3px; }
.ficha { margin: 1.6em 0 0; display: grid; gap: 0; border-top: 1px solid var(--linha); }
.ficha > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--linha); }
.ficha dt { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); padding-top: .2em; }
.ficha dd { margin: 0; }
.ficha a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; color: var(--marca); }
.ficha small { color: var(--suave); }
.foto-equipe { margin: 0; background: var(--mesa); box-shadow: 0 2px 2px rgb(0 0 0 / .2), 0 26px 40px -26px rgb(17 24 38 / .7); }
.foto-equipe img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Como atende */
.modo__titulo { font-size: clamp(1.8rem, 2.6vw, 2.3rem); margin-bottom: 18px; }
.fala-ig--linha { max-width: 900px; padding-left: 22px; border-left: 2px solid var(--tinta); }
.fala-ig--linha blockquote p { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.28; }
.modo__lista { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.modo__lista li { padding-top: 18px; border-top: 1px solid var(--tinta); }
.modo__lista h3 { font-size: clamp(1.25rem, 1.6vw, 1.45rem); line-height: 1.15; }
.modo__lista p { margin-top: .6em; color: var(--suave); }

/* ===== Motivo 5: prancheta do formulário ===== */
.contato { padding-block: clamp(56px, 7vw, 100px); background: #e3e6eb; }
.contato__grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.prancheta { position: relative; padding: 54px clamp(12px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px); border-radius: 16px; background: linear-gradient(160deg, #8b6b4b, #6f5338); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 26px 40px -26px rgb(17 24 38 / .7); }
.prancheta__prendedor { position: absolute; top: -12px; left: 50%; translate: -50% 0; z-index: 2; width: 150px; height: 52px; border-radius: 10px 10px 18px 18px; background: linear-gradient(180deg, #f1f2f4, #b9bdc4 55%, #9ea3ab); box-shadow: 0 4px 6px rgb(0 0 0 / .35), inset 0 1px 0 #fff; }
.prancheta__prendedor::before { content: ""; position: absolute; top: 12px; left: 50%; translate: -50% 0; width: 46px; height: 16px; border-radius: 8px; background: #6f5338; box-shadow: inset 0 2px 3px rgb(0 0 0 / .5); }
.prancheta__folha { position: relative; padding: clamp(30px, 3.4vw, 44px) clamp(20px, 3vw, 40px) clamp(24px, 3vw, 36px); background: var(--papel); border-radius: 2px; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.prancheta__folha h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.contato__intro { margin-top: .6em; color: var(--suave); }
.form { margin-top: 22px; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.campo { display: grid; gap: 6px; }
.campo--largo { grid-column: 1 / -1; }
.campo span { font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.campo i { font-style: normal; color: var(--marca); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 10px 2px; border: 0; border-bottom: 1.5px solid #9aa3b2; border-radius: 0; background: transparent; color: var(--tinta); }
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--marca); box-shadow: 0 2px 0 var(--marca); }
.form__enviar { margin-top: 22px; width: 100%; }
.form__ok .link-seta { color: var(--marca); }
.contato__dados .ficha { margin-top: 0; }
.contato__dados .ficha > div { grid-template-columns: 1fr; gap: 4px; padding-block: 16px; }

/* Rodapé */
.rodape { background: var(--mesa); color: #d9dde6; padding-block: 56px calc(40px + env(safe-area-inset-bottom)); font-size: .95rem; }
.rodape__in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.rodape__marca img { width: 190px; margin-bottom: 14px; }
.rodape .rotulo { margin-bottom: 10px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--marca-2); }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rodape ul a { display: inline-block; padding-block: 4px; }
.rodape a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape__miudo { grid-column: 1 / -1; margin-top: 12px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .1); font-size: .85rem; opacity: .7; }

/* WhatsApp: na cor da marca também no desktop (nunca o verde) */
.wa-flutuante { background: var(--marca); box-shadow: 0 14px 34px -10px rgb(1 19 66 / .6), inset 0 0 0 2px var(--marca-2); }

/* ===== Responsivo ===== */
@media (max-width: 1100px) {
  .topo__nav { gap: 18px; }
  .obj--xicara { left: 84%; }
}
@media (max-width: 900px) {
  .topo__nav { display: none; }
  .topo__cta { margin-left: auto; }
  .mesa__in { grid-template-columns: 1fr; min-height: 0; padding-block: 28px 40px; gap: 26px; }
  .cena { height: auto; aspect-ratio: 1 / 1.02; max-width: 560px; width: 100%; margin-inline: auto; }
  .obj--foto { left: 2%; top: 2%; width: 44%; }
  .obj--carteira { left: 54%; top: 0; width: 32%; }
  .obj--extrato { left: 48%; top: 38%; width: 42%; }
  .obj--atestado { left: 8%; top: 66%; width: 36%; }
  .obj--xicara { left: 82%; top: 28%; width: 28%; }
  .obj--caneta, .obj--oculos { display: none; }
  .pastas { grid-template-columns: 1fr; }
  .escritorio__grade, .contato__grade { grid-template-columns: 1fr; }
  .rodape__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .topo__linha { min-height: 62px; gap: 12px; }
  .topo__logo img { width: 138px; }
  .topo__cta { padding: .7em 1em; }
  .matabarrao { padding: 30px 26px 30px 28px; }
  .matabarrao h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .matabarrao__acoes { flex-direction: column; align-items: stretch; }
  .matabarrao__acoes .link-seta { justify-content: center; min-height: 44px; }
  .pasta { padding-top: 92px; }
  .pasta::before { width: 150px; right: -48px; top: 24px; }
  .pasta::after { width: 150px; left: -48px; bottom: 24px; }
  .pasta__etiqueta { max-width: calc(100% - 70px); flex-wrap: wrap; gap: 2px 10px; }
  .pasta__folha { padding: 22px 18px; }
  .situacoes h3 { padding-right: 0; }
  .folha-esc h2 { padding-right: 0; padding-top: 120px; }
  .postit { top: -16px; right: 16px; width: 150px; height: 150px; padding: 30px 14px 14px; }
  .postit b { font-size: 1.08rem; }
  .fala-ig figcaption a { display: inline-flex; align-items: center; min-height: 44px; }
  .anel { right: -12px; top: -28px; width: 110px; }
  .folha-solta { padding-top: 64px; }
  .folha-solta .fala-ig { max-width: none; }
  .ficha > div { grid-template-columns: 1fr; gap: 2px; }
  .campos { grid-template-columns: 1fr; }
  .prancheta__prendedor { width: 120px; height: 46px; }
  .rodape__in { grid-template-columns: 1fr; }
}