/* Frediani Advocacia — site institucional.
   Tokens e classes de componente vêm do FredianIA Design System
   (tokens.css + fredianai.css). Aqui só o layout das páginas. */

html { scroll-behavior: smooth; }
body { background: var(--surface-card); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--sp-4); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--surface-card); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; z-index: 10; }

/* ---- Grade ---- */
.wrap { max-width: 1312px; margin: 0 auto; padding-inline: var(--grid-margin-desktop); }
@media (max-width: 720px) { .wrap { padding-inline: var(--grid-margin-mobile); } }

/* ---- Navegação ---- */
.nav { background: var(--surface-inverse); color: var(--text-inverse); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); padding-block: var(--sp-16); }
.brand { display: flex; flex-direction: column; gap: 2px; color: var(--text-inverse); }
.brand:hover { color: var(--text-inverse); text-decoration: none; }
.brand__name { font-size: 20px; line-height: 24px; font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.brand__oab { color: var(--fia-logo-tagline-negative); }
.nav__links { display: flex; align-items: center; gap: var(--sp-32); }
.nav__links a { color: var(--text-on-navy-muted); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-semibold); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text-inverse); text-decoration: none; }
.nav__links a[aria-current="page"] { border-bottom: 2px solid var(--fia-electric-blue); padding-bottom: 2px; }
.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--border-on-navy); border-radius: var(--radius-control); background: var(--fia-on-navy-alpha-08); color: var(--text-inverse); cursor: pointer; }
@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface-inverse); padding: var(--sp-8) var(--sp-16) var(--sp-16); border-top: 1px solid var(--border-on-navy); }
  .nav__links a { padding: var(--sp-12) 0; }
  .nav__links .fia-btn { margin-top: var(--sp-8); }
  .nav[data-open="true"] .nav__links { display: flex; }
  .nav { position: relative; }
}

/* ---- Hero ---- */
.hero { background: var(--surface-inverse); color: var(--text-inverse); }
.hero__in { padding-block: var(--sp-96) 80px; display: flex; flex-direction: column; gap: var(--sp-24); }
.hero h1 { color: var(--text-inverse); max-width: 22ch; }
.hero p { max-width: 60ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-top: var(--sp-24); }
.grad { height: 8px; background: var(--fia-gradient); }
@media (max-width: 720px) {
  .hero__in { padding-block: var(--sp-48) var(--sp-32); }
  .hero h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .hero p { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
  .hero__actions .fia-btn { width: 100%; }
}

/* ---- Seções ---- */
.section { padding-block: var(--sp-96); display: flex; flex-direction: column; gap: var(--sp-48); }
.section--ice { background: var(--surface-page); }
.section__head { display: flex; flex-direction: column; gap: var(--sp-16); }
.section__head h2 { max-width: 26ch; }
.section__head p { max-width: 64ch; }
.section__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-24); flex-wrap: wrap; }
@media (max-width: 720px) {
  .section { padding-block: var(--sp-48); gap: var(--sp-24); }
  .fia-h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
}

.cards-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-24); }
.cards-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-24); }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-24); }
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); }
@media (max-width: 1100px) { .cards-4, .cards-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cards-4, .cards-areas, .cards-3, .cards-2 { grid-template-columns: 1fr; gap: var(--sp-16); } }

a.card-link { display: flex; flex-direction: column; gap: var(--sp-12); color: var(--text-primary); }
a.card-link:hover { text-decoration: none; border-color: var(--action-primary); color: var(--text-primary); }
a.card-link .card-link__more { color: var(--text-link); font-weight: var(--fw-semibold); margin-top: auto; }
.card-link__icon { color: var(--text-link); display: block; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-24); }
.step { display: flex; flex-direction: column; gap: var(--sp-12); }
.step__n { color: var(--text-link); }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }

.two { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-64); align-items: center; }
.two--form { grid-template-columns: 1fr 1.2fr; align-items: start; }
@media (max-width: 900px) { .two, .two--form { grid-template-columns: 1fr; gap: var(--sp-32); } }
.photo { background: var(--surface-inverse); min-height: 480px; display: flex; align-items: flex-end; padding: var(--sp-24); color: var(--text-on-navy-muted); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) { .photo { min-height: 280px; } }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.fact { display: flex; gap: var(--sp-12); align-items: flex-start; }
.fact .fia-icon { color: var(--text-link); flex: none; }
.fact b { display: block; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-semibold); }
@media (max-width: 720px) { .facts { grid-template-columns: 1fr; } }

.map { background: var(--surface-muted); min-height: 240px; display: flex; align-items: flex-end; padding: var(--sp-16); }
.map iframe { width: 100%; height: 280px; border: 0; display: block; }

/* ---- Formulário ---- */
.form { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-32); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
@media (max-width: 720px) { .form { padding: var(--sp-24); } .form__row { grid-template-columns: 1fr; } }
.consent { display: flex; gap: var(--sp-12); align-items: flex-start; font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--text-secondary); }
.consent input { margin-top: 2px; width: 16px; height: 16px; flex: none; }
.form__status { display: none; }
.form__status[data-show="true"] { display: block; }
.hp { position: absolute; left: -9999px; }

/* ---- Páginas internas ---- */
.page-head { background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.page-head__in { padding-block: var(--sp-64) var(--sp-48); display: flex; flex-direction: column; gap: var(--sp-16); }
.page-head p { max-width: 70ch; }
.crumb { font-size: var(--fs-label); font-weight: var(--fw-semibold); }
.content { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-64); align-items: start; padding-block: var(--sp-64); }
.content__main { display: flex; flex-direction: column; gap: var(--sp-48); }
.content__side { display: flex; flex-direction: column; gap: var(--sp-24); }
@media (max-width: 900px) { .content { grid-template-columns: 1fr; gap: var(--sp-32); } }
.block { display: flex; flex-direction: column; gap: var(--sp-16); }
.block p { max-width: 70ch; }
.checks li { display: flex; gap: var(--sp-12); align-items: flex-start; padding: var(--sp-8) 0; }
.checks .fia-icon { flex: none; color: var(--text-link); }
.checks--muted .fia-icon { color: var(--text-secondary); }
.faq details { border-top: 1px solid var(--border-subtle); padding: var(--sp-16) 0; }
.faq summary { cursor: pointer; font-size: 18px; line-height: 26px; font-weight: var(--fw-semibold); list-style: none; display: flex; justify-content: space-between; gap: var(--sp-16); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-link); font-weight: var(--fw-bold); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: var(--sp-8); }
.side-links a { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) 0; border-top: 1px solid var(--border-subtle); color: var(--text-primary); font-size: var(--fs-label); font-weight: var(--fw-semibold); }
.side-links a .fia-icon { color: var(--text-link); }

.article { max-width: 720px; margin: 0 auto; padding-block: var(--sp-64); display: flex; flex-direction: column; gap: var(--sp-32); }
.article__head { display: flex; flex-direction: column; gap: var(--sp-16); }
.article__body { display: flex; flex-direction: column; gap: var(--sp-20, 20px); }
.article__body h2 { margin-top: var(--sp-12); }
.author { display: flex; gap: var(--sp-12); align-items: center; }
.author__avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-status); background: var(--surface-inverse); color: var(--text-inverse); font-size: var(--fs-label); font-weight: var(--fw-bold); }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); background: var(--surface-page); flex-wrap: wrap; }

.articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-24); }
@media (max-width: 900px) { .articles { grid-template-columns: 1fr; } }
.article-card__meta { display: flex; justify-content: space-between; gap: var(--sp-12); }

/* ---- Rodapé ---- */
.foot { background: var(--surface-inverse); color: var(--text-inverse); }
.foot__in { padding-block: var(--sp-64) var(--sp-32); display: flex; flex-direction: column; gap: var(--sp-48); }
.foot__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-48); }
.foot__col { display: flex; flex-direction: column; gap: var(--sp-12); }
.foot__col a { color: var(--text-on-navy-muted); font-size: var(--fs-label); line-height: var(--lh-label); }
.foot__col a:hover { color: var(--text-inverse); }
.foot__legal { display: flex; flex-direction: column; gap: var(--sp-8); }
.foot__legal p { max-width: 110ch; }
@media (max-width: 900px) { .foot__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-32); } }
@media (max-width: 720px) { .foot__cols { grid-template-columns: 1fr; } }

/* Ícones inline seguem a spec do sistema: 24 grid, traço 2 px, terminais quadrados. */
.fia-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }