/* JurisClinic — Brand Tokens & Shared Styles */
:root {
  --jc-navy:        #29405c;
  --jc-navy-light:  #384e68;
  --jc-navy-dark:   #1e3148;
  --jc-accent:      #0f766e;
  --jc-accent-dark: #0d5e57;
  --jc-green:       #0f766e;
  --jc-cyan:        #0f766e;
  --jc-mint:        #0f766e;
  --jc-teal:        #0f766e;
  --jc-gradient:    #0f766e;
  --jc-gradient-h:  #0f766e;
  --jc-gradient-subtle: rgba(15,118,110,0.06);
  --jc-body:        #5a6b7d;
  --jc-muted:       #8494a5;
  --jc-border:      rgba(41,64,92,0.1);
  --jc-surface:     #f4f7fa;
}
/* Color utilities */
.bg-jc-navy { background-color: var(--jc-navy); }
.bg-jc-navy-dark { background-color: var(--jc-navy-dark); }
.bg-jc-green { background-color: var(--jc-green); }
.bg-jc-surface { background-color: var(--jc-surface); }
.bg-jc-gradient { background: var(--jc-gradient); }
.bg-jc-gradient-h { background: var(--jc-gradient-h); }
.bg-jc-gradient-subtle { background: var(--jc-gradient-subtle); }
.text-jc-navy { color: var(--jc-navy); }
.text-jc-body { color: var(--jc-body); }
.text-jc-muted { color: var(--jc-muted); }
.text-jc-green { color: var(--jc-accent); }
.text-jc-teal { color: var(--jc-accent); }
.text-jc-gradient {
  color: var(--jc-accent);
}
.hover\:bg-jc-navy-dark:hover { background-color: var(--jc-navy-dark); }
.hover\:bg-jc-surface:hover { background-color: var(--jc-surface); }
.shadow-jc { box-shadow: 0 2.8px 2.2px rgba(41,64,92,0.034),0 6.7px 5.3px rgba(41,64,92,0.048),0 12.5px 10px rgba(41,64,92,0.06),0 22.3px 17.9px rgba(41,64,92,0.072),0 41.8px 33.4px rgba(41,64,92,0.086),0 100px 80px rgba(41,64,92,0.12); }
.shadow-jc-glow { box-shadow: 0 0 40px rgba(15,118,110,0.12),0 0 80px rgba(15,118,110,0.08); }
.shadow-jc-highlight { box-shadow: rgba(255,255,255,0.1) 0px 1px 1px 0px inset,rgba(41,64,92,0.25) 0px 50px 100px -20px,rgba(41,64,92,0.3) 0px 30px 60px -30px; }
.jc-bar { height: 3px; background: var(--jc-accent); border-radius: 2px; }

/* Base */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji; }
.font-geist { font-family: 'Geist', sans-serif !important; }
.font-playfair { font-family: 'Playfair Display', serif !important; }

/* Nav */
#main-nav { position:sticky; top:0; z-index:100; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); background:rgba(255,255,255,0.92); border-bottom:1px solid var(--jc-border); }

/* Mobile menu */
#mobile-backdrop { position:fixed;inset:0;z-index:200;background:rgba(15,25,40,0.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity 0.3s ease; }
#mobile-backdrop.open { opacity:1;pointer-events:auto; }
#mobile-menu { position:fixed;top:0;left:0;right:0;z-index:210;background:white;border-bottom:1px solid var(--jc-border);transform:translateY(-100%);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);border-radius:0 0 24px 24px;box-shadow:0 20px 60px rgba(41,64,92,0.18); }
#mobile-menu.open { transform:translateY(0); }

/* Animations */
@keyframes marquee-vertical { from{transform:translateY(0)} to{transform:translateY(-50%)} }
.animate-marquee-vertical { animation: marquee-vertical 40s linear infinite; }
[data-animate] { opacity:0; transform:translateY(28px); filter:blur(6px); transition:opacity 0.7s ease-out,transform 0.7s ease-out,filter 0.7s ease-out; }
[data-animate].visible { opacity:1; transform:translateY(0); filter:blur(0); }
[data-animate].delay-1 { transition-delay:0.1s; }
[data-animate].delay-2 { transition-delay:0.2s; }
[data-animate].delay-3 { transition-delay:0.3s; }
[data-animate].delay-4 { transition-delay:0.4s; }

/* Page hero gradient bar */
.page-hero { position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--jc-gradient-h); }

/* Login card */
.login-card { max-width:420px; margin:0 auto; }

/* Dashboard sidebar */
.dash-sidebar { min-height:calc(100vh - 64px); }

/* Accordion */
.accordion-content { height:0; overflow:hidden; transition:height 0.35s cubic-bezier(0.4,0,0.2,1); }
.accordion-icon { transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.accordion-item.open .accordion-icon { transform:rotate(45deg); }

/* Mobile hero */
@media (max-width:639px) {
  .hero-scroll-set { position:static!important;height:auto!important;display:flex!important;flex-direction:column!important;gap:10px!important;padding:16px 16px 24px!important; }
  .hero-scroll-set > div { position:static!important;transform:none!important;max-width:74%!important; }
  .hero-scroll-set > div:nth-child(odd) { align-self:flex-start; }
  .hero-scroll-set > div:nth-child(even) { align-self:flex-end; }
  .hero-nav-pills { transform:scale(0.8);transform-origin:top right; }
}

/* Tab navigation */
.tab-btn { transition:all 0.2s; }
.tab-btn.active { background:var(--jc-navy); color:white; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ============================
   RESPONSIVE GLOBAL
   ============================ */

/* Impede scroll horizontal em todo o site */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }

/* Imagens sempre responsivas */
img { max-width: 100%; height: auto; }

/* Headings das page-heroes em telas muito pequenas */
@media (max-width: 479px) {
  .page-hero h1 { font-size: 1.75rem !important; line-height: 1.1 !important; }
  .page-hero p { font-size: 1rem !important; }
}

/* Seções com padding generoso — reduzir em mobile */
@media (max-width: 639px) {
  /* Page heroes: reduz espaçamento vertical */
  .page-hero { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

  /* Grids que ficam em coluna — reduz gap vertical */
  .gap-14 { gap: 2rem !important; }
  .gap-12 { gap: 1.75rem !important; }

  /* Cards com padding grande */
  .rounded-\[32px\] { border-radius: 1.25rem !important; }

  /* Botão CTA nos heroes — largura total no mobile */
  .page-hero a.group, .page-hero a[href] { max-width: 100%; }

  /* Imagem de histórico no quem-somos */
  .history-img { height: 14rem !important; }

  /* Accordion mais compacto */
  .accordion-btn { padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }
  .accordion-content > div { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* Tablets — ajustes de gap e padding */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-card-left, .hero-card-right { max-width: 220px !important; width: 220px !important; }
}

/* Featured blog post — padding responsivo */
.featured-post-content { padding: 1.5rem; }
@media (min-width: 640px)  { .featured-post-content { padding: 2.5rem; } }
@media (min-width: 1024px) { .featured-post-content { padding: 3.5rem; } }

/* CTA section card — padding responsivo */
.cta-card-inner { padding: 1.5rem; }
@media (min-width: 640px)  { .cta-card-inner { padding: 2.5rem; } }
@media (min-width: 1024px) { .cta-card-inner { padding: 4rem; } }

/* Animation delay utilities */
.delay-150 { animation-delay: 0.15s; }
.delay-300 { animation-delay: 0.30s; }
.delay-450 { animation-delay: 0.45s; }
.delay-600 { animation-delay: 0.60s; }
@keyframes fadeUp { from{opacity:0;transform:translateY(32px);filter:blur(8px)} to{opacity:1;transform:translateY(0);filter:blur(0)} }
.animate-fade-up { animation: fadeUp 0.7s ease-out forwards; }

/* Modal animations */
@keyframes modalBackdropIn  { from{opacity:0} to{opacity:1} }
@keyframes modalBackdropOut { from{opacity:1} to{opacity:0} }
@keyframes modalCardIn  { from{opacity:0;transform:scale(0.94) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes modalCardOut { from{opacity:1;transform:scale(1) translateY(0)} to{opacity:0;transform:scale(0.94) translateY(20px)} }
.modal-enter { animation: modalBackdropIn 0.22s ease forwards; }
.modal-enter .modal-card { animation: modalCardIn 0.28s ease-in-out forwards; }
.modal-exit  { animation: modalBackdropOut 0.2s ease forwards; }
.modal-exit .modal-card  { animation: modalCardOut 0.2s ease forwards; }

/* Article body styles */
.article-body h2 { font-size:1.25rem;font-weight:600;color:var(--jc-navy);margin-top:2.5rem;margin-bottom:0.75rem;font-family:'Geist',sans-serif;letter-spacing:-0.02em; }
.article-body h3 { font-size:1rem;font-weight:600;color:var(--jc-navy);margin-top:1.75rem;margin-bottom:0.5rem;font-family:'Geist',sans-serif; }
.article-body p { font-size:0.9375rem;color:var(--jc-body);line-height:1.8;margin-bottom:1.25rem;font-family:'Geist',sans-serif; }
.article-body ul, .article-body ol { padding-left:1.5rem;margin-bottom:1.25rem; }
.article-body li { font-size:0.9375rem;color:var(--jc-body);line-height:1.75;margin-bottom:0.4rem;font-family:'Geist',sans-serif; }
.article-body strong { color:var(--jc-navy);font-weight:600; }
.callout { border-left:3px solid var(--jc-accent);background:var(--jc-gradient-subtle);border-radius:0 12px 12px 0;padding:1rem 1.25rem;margin:1.5rem 0; }
.callout p { margin-bottom:0; }
.article-body blockquote { border-left:3px solid var(--jc-border);padding:0.75rem 1.25rem;margin:1.5rem 0;background:var(--jc-surface);border-radius:0 8px 8px 0; }
.article-body blockquote p { color:var(--jc-muted);font-style:italic;margin-bottom:0; }
.tag-badge { display:inline-flex;align-items:center;padding:0.2rem 0.75rem;border-radius:99px;font-size:0.75rem;font-family:'Geist',sans-serif;font-weight:500; }
@keyframes spin { to { transform: rotate(360deg); } }
#article-loading { display:flex;align-items:center;justify-content:center;min-height:60vh; }
#article-content { display:none; }
#article-notfound { display:none;text-align:center;padding:6rem 1rem; }

/* ── Legal pages ──────────────────────────────────────────── */
.legal-section {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--jc-border);
}
.legal-section:first-child { padding-top: 0; }
.legal-section:last-child { border-bottom: none; padding-bottom: 0; }
.legal-section-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.legal-section-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--jc-gradient-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: 'Geist', sans-serif;
  color: var(--jc-accent);
  margin-top: 2px;
}
.legal-prose h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--jc-navy);
  font-family: 'Geist', sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0;
}
.legal-prose p {
  font-size: 0.9375rem;
  color: var(--jc-body);
  line-height: 1.8;
  margin-bottom: 0.875rem;
  font-family: 'Geist', sans-serif;
}
.legal-prose p:last-child { margin-bottom: 0; }
.legal-prose ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.875rem;
}
.legal-prose li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  color: var(--jc-body);
  line-height: 1.75;
  margin-bottom: 0.25rem;
  font-family: 'Geist', sans-serif;
}
.legal-prose li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--jc-accent);
}
.legal-prose strong { color: var(--jc-navy); font-weight: 600; }
.legal-toc-link {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-family: 'Geist', sans-serif;
  color: var(--jc-body);
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
  text-decoration: none;
}
.legal-toc-link:hover { background: var(--jc-surface); color: var(--jc-navy); }
.legal-toc-link.active { background: var(--jc-gradient-subtle); color: var(--jc-accent); font-weight: 500; }

/* Avatar initials fallback */
.jc-avatar-initial {
  width: 100%;
  height: 100%;
  display: grid !important;
  place-items: center !important;
  background: var(--jc-navy) !important;
  color: #ffffff !important;
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: inherit;
}