/* ── Reset ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html{overflow-x:hidden}
body{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:16px;color:#111827;
  background:#ffffff;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;max-width:100vw;
}
code,pre,.mono{font-family:'JetBrains Mono','Fira Code','Courier New',monospace}
.ti{vertical-align:-2px;line-height:1}
.metro2-row:hover{background:#1e293b}

summary::-webkit-details-marker{display:none}
summary::marker{content:''}
details[open] summary .ti-chevron-down{transform:rotate(180deg);display:inline-block}

/* ── Variables — Federal Premium ────────────────────── */
/* The site is dark-only by design (navy "theme gradient" as the canvas
   everywhere) — these used to be the light-mode values, with a
   prefers-color-scheme:dark media query overriding them. Now they ARE
   the dark values directly, so every visitor sees the same theme
   regardless of their OS/browser color-scheme setting. */
:root{
  color-scheme: dark;
  /* ── Fondos */
  --bg:        #0f172a;
  --bg1:       #2a4d7a;
  --bg2:       #2a4d7a;
  --bg3:       #2a4d7a;
  --border:    #7d93b3;
  --border2:   #8ca3c2;
  /* ── Azules premium */
  --navy:      #0c2340;   /* hero / footer profundo */
  --blue:      #1a3a6b;   /* navy principal */
  --blue-mid:  #1a56db;   /* cobalt brillante */
  --blue-dim:  #3b82f6;   /* azul medio */
  --blue-pale: #eff6ff;   /* azul pálido */
  --accent:    #1a56db;   /* cobalt como acento */
  /* Same navy/blue palette as before, layered as soft radial "mesh" blobs
     over the original 3-stop linear gradient — adds depth/texture without
     introducing any new hue (no green, no accent colors mixed in, per
     earlier feedback against a busier palette). */
  --theme-gradient:
    radial-gradient(at 15% 10%, rgba(59,130,246,.14) 0, transparent 45%),
    radial-gradient(at 85% 15%, rgba(26,58,107,.5) 0, transparent 50%),
    radial-gradient(at 80% 85%, rgba(17,45,90,.45) 0, transparent 55%),
    radial-gradient(at 10% 90%, rgba(12,35,64,.55) 0, transparent 50%),
    linear-gradient(135deg, var(--navy) 0%, #112d5a 60%, #1a3a6b 100%);
  /* ── Emerald premium — CTA */
  --gov-green:      #059669;
  --gov-green-dark: #047857;
  --gov-green-pale: #2a4d7a;
  /* ── Colores estado */
  --gold:      #d97706;
  --gold-dim:  #f59e0b;
  --gold-pale: #fffbeb;
  --red:       #dc2626;
  --red-pale:  #fef2f2;
  --green:     #065f46;
  --green-pale:#2a4d7a;
  /* ── Texto */
  --gray:      #94a3b8;
  --gray-dim:  #94a3b8;
  --white:     #f1f5f9;
  --white-dim: #cbd5e1;
}

/* ── Utility ────────────────────────────────────────── */
.container{max-width:1120px;margin:0 auto;padding:0 28px}
.mono{font-family:'JetBrains Mono','Fira Code',monospace}
.dim{color:var(--gray)}

/* Severity badges */
.sev{display:inline-block;padding:2px 8px;border-radius:2px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.sev-critical{background:#fce8e6;color:#c0392b;border:1px solid #e8a09a}
.sev-high    {background:#fff3e0;color:#c05000;border:1px solid #f0b060}
.sev-moderate{background:var(--gold-pale);color:#905010;border:1px solid var(--gold-dim)}
.sev-info    {background:var(--blue-pale);color:var(--accent);border:1px solid var(--blue-dim)}

/* ── Statute Tooltip ────────────────────────────────── */
.statute-ref{
  position:relative;display:inline-flex;align-items:center;gap:4px;
  cursor:help;
}
.statute-badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;border-radius:2px;
  background:var(--blue);color:#ffffff;
  font-size:10px;font-family:monospace;font-weight:700;
  border:1px solid var(--blue-mid);
  letter-spacing:.3px;
  transition:background .15s;
}
.statute-badge:hover{background:var(--blue-mid)}
.statute-badge .info-icon{
  width:12px;height:12px;border-radius:50%;
  background:rgba(43,143,212,.3);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:900;line-height:1;
}
.statute-tip{
  position:absolute;bottom:calc(100% + 8px);left:0;
  width:280px;
  background:#0F1929;border:1px solid var(--border2);
  border-left:3px solid var(--accent);
  border-radius:4px;padding:12px 14px;
  font-size:12px;line-height:1.6;color:#cbd5e1;
  font-family:'Inter',sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s,visibility .2s;
  z-index:200;
}
.statute-ref:hover .statute-tip{opacity:1;visibility:visible}
.statute-tip strong{color:#93c5fd;display:block;margin-bottom:4px;font-size:11px;font-weight:700}

/* ── Barra Oficial Gov ───────────────────────────────── */
.gov-notice{
  background:var(--navy);border-bottom:1px solid rgba(255,255,255,.06);
  padding:8px 0;font-size:12px;color:#fff;
}
.gov-notice .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.gov-notice-left{display:flex;align-items:center;gap:10px;min-width:0}
.gov-notice-flag{
  font-size:18px;line-height:1;flex-shrink:0;
}
.gov-notice-text{
  font-size:12px;color:rgba(255,255,255,.9);
  font-weight:500;min-width:0;word-wrap:break-word;
}
.gov-notice-text strong{color:#fff;font-weight:700}

/* ── Nav ─────────────────────────────────────────────── */
nav{
  background:#ffffff;
  border-bottom:3px solid var(--blue-mid);
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 16px rgba(12,35,64,.1);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:76px}
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-decoration:none}
.logo-img{width:220px;max-width:220px;height:auto;display:block}
.logo-img--footer{width:180px;max-width:180px}
.nav-links{display:flex;gap:2px;list-style:none}
.nav-links a{
  color:var(--gray);text-decoration:none;font-size:13px;font-weight:500;
  padding:6px 12px;border-radius:3px;transition:background .15s,color .15s;
}
.nav-links a:hover{background:var(--blue-pale);color:var(--blue)}
.btn-nav{
  background:var(--blue-mid) !important;color:#ffffff !important;
  font-weight:600 !important;padding:8px 20px !important;
  border-radius:4px;font-size:13px !important;
  transition:background .15s !important;
  box-shadow:0 2px 8px rgba(26,86,219,.3) !important;
}
.btn-nav:hover{background:#1446c0 !important}

/* ── Hero — Dark Full-Bleed Premium ─────────────────── */
.hero{
  padding:32px 0 44px;
  border-bottom:none;
  background:var(--theme-gradient);
  position:relative;overflow:hidden;
}
.hero-inner{display:grid;grid-template-columns:1fr 460px;gap:64px;align-items:center;position:relative;z-index:1}

/* ── Hero News Column — NYT Editorial Style ──────────── */
.hero-news{
  display:flex;flex-direction:column;
  border-left:1px solid rgba(255,255,255,.14);
  padding-left:40px;
  align-self:stretch;
}
.hero-news-list{display:flex;flex-direction:column;gap:0}
.hero-news-item{
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.hero-news-item:last-child{border-bottom:none;padding-bottom:0}
.hero-news-kicker{
  font-size:9.5px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  font-family:'Inter',sans-serif;
  margin-bottom:5px;
}
.hero-news-kicker span{color:rgba(255,255,255,.82)}
.hero-news-headline{
  font-family:'Playfair Display',Georgia,serif;
  font-size:15px;font-weight:700;
  color:rgba(255,255,255,.93);
  line-height:1.4;margin-bottom:6px;
}
.hero-news-item:first-child .hero-news-headline{
  font-size:17px;
}
.hero-news-summary{
  font-size:11.5px;color:rgba(255,255,255,.7);
  line-height:1.6;font-family:'Inter',sans-serif;
}
.hero-news-byline{
  margin-top:7px;
  font-size:10px;color:rgba(255,255,255,.52);
  font-family:'Inter',sans-serif;
  letter-spacing:.2px;
}
.hero-news-byline a{
  color:rgba(255,255,255,.75);
  text-decoration:none;
}
.hero-news-byline a:hover{
  color:#ffffff;
  text-decoration:underline;
}
.hero-news-footer{
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:9.5px;color:rgba(255,255,255,.5);
  font-family:'Inter',sans-serif;
  letter-spacing:.3px;
  font-style:italic;
}
/* ── News Carousel ──────────────────────────────────── */
.hero-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-bottom:22px;
}
.hero-label::before{
  content:'';display:inline-block;width:28px;height:2px;
  background:var(--gov-green);border-radius:2px;
}
.hero h1{
  /* Playfair Display — the font this headline was originally written for
     (it just never actually loaded: the page had no Google Fonts import at
     all, so it silently fell back to plain Georgia). Now loaded for real. */
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(30px,4vw,54px);font-weight:900;
  color:#ffffff;line-height:1.18;margin-bottom:22px;
  letter-spacing:-.8px;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
.hero h1 em{
  color:var(--gov-green);font-style:italic;
}
.hero-sub{
  font-size:17px;color:rgba(255,255,255,.72);max-width:500px;
  margin-bottom:34px;line-height:1.75;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{
  background:var(--gov-green);color:#ffffff;
  font-weight:700;font-size:15px;
  padding:14px 30px;border:none;border-radius:4px;
  cursor:pointer;text-decoration:none;display:inline-block;
  transition:all .2s;letter-spacing:.1px;
  box-shadow:0 4px 16px rgba(5,150,105,.45);
}
.btn-primary:hover{
  background:var(--gov-green-dark);
  box-shadow:0 6px 20px rgba(5,150,105,.5);
  transform:translateY(-1px);
}
.btn-ghost{
  background:transparent;color:rgba(255,255,255,.9);
  font-weight:600;font-size:14px;
  padding:12px 24px;border:1.5px solid rgba(255,255,255,.3);border-radius:3px;
  cursor:pointer;text-decoration:none;display:inline-block;
  transition:border-color .2s,color .2s,background .2s;
}
.btn-ghost:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);color:#fff}

/* ── Section ────────────────────────────────────────── */
.section{padding:72px 0;border-bottom:1px solid var(--border)}
.section.alt{background:var(--bg1)}
.section-label{
  font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--gov-green);
  margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.section-label::before{
  content:'';display:inline-block;width:32px;height:2px;
  background:var(--gov-green);border-radius:2px;flex-shrink:0;
}
.section-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(22px,2.6vw,36px);font-weight:700;
  color:var(--white);margin-bottom:14px;letter-spacing:-.3px;
  line-height:1.2;
}
.section-sub{
  font-size:16px;color:var(--gray);max-width:780px;line-height:1.8;
}
.section-head{margin-bottom:48px}
.section-head.center{text-align:center}
.section-head.center .section-sub{margin:0 auto;max-width:640px}
.pipeline-connector{
  display:flex;flex-direction:column;gap:0;
}
.pipeline-stage{
  display:grid;grid-template-columns:48px 1fr;gap:0;
  position:relative;
}
.pipeline-left{
  display:flex;flex-direction:column;align-items:center;
}
.pipeline-node{
  width:36px;height:36px;border-radius:50%;
  border:2px solid var(--border2);
  background:var(--bg2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--accent);
  font-family:monospace;flex-shrink:0;position:relative;z-index:2;
}
.pipeline-node.active{
  border-color:var(--accent);
  background:var(--blue-dim);
  box-shadow:0 0 16px rgba(43,143,212,.25);
}
.pipeline-line{
  width:2px;flex:1;background:var(--border);
  margin:0 auto;min-height:24px;
}
.pipeline-stage:last-child .pipeline-line{display:none}
.pipeline-content{
  padding:0 0 28px 20px;
}
.pipeline-header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:8px;margin-top:6px;
}
.pipeline-stage-name{
  font-size:13px;font-weight:700;color:var(--white);
  font-family:monospace;
}
.pipeline-stage-id{
  font-size:10px;color:var(--gray-dim);
  font-family:monospace;letter-spacing:.5px;
  padding:1px 6px;border:1px solid var(--border);
  border-radius:2px;
}
.pipeline-desc{font-size:13px;color:var(--gray);line-height:1.65;margin-bottom:8px}
.pipeline-meta{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;
}
.pipeline-tag{
  font-size:10.5px;font-family:monospace;
  padding:2px 8px;border-radius:2px;
  background:var(--bg3);border:1px solid var(--border);color:var(--gray-dim);
}
.pipeline-tag.code{color:var(--accent);border-color:var(--blue-dim)}

/* ── Rule Engine ────────────────────────────────────── */

.rule-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:4px;padding:18px 20px;
  transition:border-color .15s;
}
.rule-card:hover{border-color:var(--border2)}
.rule-card-head{
  display:flex;align-items:flex-start;gap:12px;margin-bottom:10px;
}
.rule-id{
  font-size:10px;font-family:monospace;color:var(--accent);
  background:var(--blue-pale);border:1px solid var(--blue-dim);
  padding:2px 7px;border-radius:2px;white-space:nowrap;flex-shrink:0;
  margin-top:2px;
}
.rule-title{font-size:14px;font-weight:600;color:var(--white)}

.rule-desc{font-size:12.5px;color:var(--gray);line-height:1.65}
.rule-statutes{display:flex;flex-direction:column;gap:6px;flex-shrink:0}

/* ── SHA-256 / Vault ────────────────────────────────── */

.vault-panel{
  background:var(--bg2);border:1px solid var(--border);border-radius:4px;overflow:hidden;
}
.vault-panel-head{
  background:var(--bg3);padding:12px 18px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.vault-panel-head h4{font-size:12px;font-weight:700;color:var(--white);letter-spacing:.3px;text-transform:uppercase}
.vault-panel-body{padding:20px}
.hash-display{
  background:var(--bg);border:1px solid var(--border);
  border-radius:3px;padding:12px;margin:12px 0;
  font-family:monospace;font-size:11px;color:var(--accent);
  word-break:break-all;line-height:1.8;
}
.hash-label{font-size:10px;color:var(--gray-dim);font-family:monospace;margin-bottom:4px;letter-spacing:.5px;text-transform:uppercase}
.verify-input{
  width:100%;background:var(--bg);border:1px solid var(--border2);
  border-radius:3px;padding:9px 12px;
  color:var(--accent);font-family:monospace;font-size:12px;
  outline:none;margin-bottom:8px;
}
.verify-input:focus{border-color:var(--accent)}
.verify-input::placeholder{color:var(--gray-dim)}
.verify-btn{
  background:var(--blue-dim);color:var(--accent);
  border:1px solid var(--blue-dim);border-radius:3px;
  padding:8px 16px;font-size:12px;font-weight:600;
  cursor:pointer;font-family:monospace;width:100%;
  transition:background .15s;
}
.verify-btn:hover{background:var(--blue)}
.verify-result{
  background:var(--green-pale);border:1px solid #166534;
  border-radius:3px;padding:10px 12px;
  font-size:12px;font-family:monospace;color:#4ADE80;
  margin-top:8px;display:none;
}
.chain-item{
  display:flex;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--border);
  font-size:12px;
}
.chain-item:last-child{border-bottom:none}
.chain-step{
  width:20px;height:20px;border-radius:50%;
  background:var(--blue-dim);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:900;flex-shrink:0;font-family:monospace;
}
.chain-text{color:var(--gray);line-height:1.5}
.chain-text strong{color:var(--white);display:block;font-size:11.5px;margin-bottom:1px}

/* ── NJ Liability Matrix ────────────────────────────── */
.matrix-table{
  width:100%;border-collapse:collapse;
  font-size:12.5px;margin-top:16px;
}
.matrix-table th{
  background:var(--bg3);color:var(--white-dim);
  font-size:10px;letter-spacing:.8px;text-transform:uppercase;
  font-weight:700;padding:10px 14px;
  border:1px solid var(--border);text-align:left;
  font-family:monospace;
}
.matrix-table td{
  padding:10px 14px;border:1px solid var(--border);
  color:var(--gray);vertical-align:top;
}
.matrix-table td:first-child{
  font-family:monospace;font-size:11.5px;color:var(--white-dim);
  background:var(--bg2);white-space:nowrap;
}
.matrix-table .amount{
  font-family:monospace;font-weight:700;color:var(--white);
  white-space:nowrap;
}
.matrix-table .treble{color:#D4A017;font-weight:700}
.matrix-total{
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:4px;padding:16px 20px;margin-top:16px;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;
}
.matrix-total-label{font-size:11px;color:var(--gray)}
.matrix-total-label strong{color:var(--white);display:block;font-size:13px;margin-bottom:2px}
.matrix-total-amount{
  font-size:24px;font-weight:800;color:#D4A017;
  text-align:right;
}
.matrix-cite{
  font-size:10.5px;color:var(--gray-dim);font-family:monospace;
  margin-top:2px;
}
.match{color:#22C55E;font-weight:700;font-family:monospace}
.mismatch{color:#EF4444;font-weight:700;font-family:monospace}

/* ── 1099-C Section ─────────────────────────────────── */
.conflict-diagram{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:4px;padding:24px;margin-top:16px;
}
.conflict-flow{
  display:flex;align-items:center;gap:0;margin-bottom:20px;
  overflow-x:auto;
}
.conflict-node{
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:4px;padding:12px 16px;text-align:center;
  min-width:120px;flex-shrink:0;
}
.conflict-node h5{font-size:10px;color:var(--gray-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.conflict-node p{font-size:12.5px;color:var(--white);font-weight:600}
.conflict-node.irs{border-color:var(--gold);background:var(--gold-pale)}
.conflict-node.irs p{color:#D4A017}
.conflict-node.fcra{border-color:var(--red);background:var(--red-pale)}
.conflict-node.fcra p{color:#EF4444}
.conflict-arrow{
  flex-shrink:0;padding:0 12px;
  font-size:18px;color:var(--border2);
}
.conflict-arrow.violation{color:var(--red)}
.violation-callout{
  background:var(--red-pale);border:1px solid #7F1D1D;
  border-radius:3px;padding:12px 16px;
  display:flex;align-items:flex-start;gap:12px;
}
.violation-callout-icon{
  font-size:18px;flex-shrink:0;margin-top:1px;
}
.violation-callout-text{font-size:12.5px;color:var(--gray);line-height:1.6}
.violation-callout-text strong{color:#EF4444;display:block;margin-bottom:3px}

/* ── Resources ──────────────────────────────────────── */
/* auto-fit + minmax collapses to fewer columns as the container narrows,
   with no dependency on a max-width breakpoint override — the ≤900px
   override that used to live in the TABLET media query stopped taking
   effect on mobile (root cause unconfirmed; other rules in the same
   block still apply), so this rewrite removes the dependency instead of
   chasing that. 1/-1 spans whatever the current explicit track count is
   (1 column on phones, 3 on desktop), so it self-adjusts too. */
/* grid-template-columns is set imperatively in grid.js (_syncResourcesGridColumns),
   not via @media — auto-fit/minmax left an orphaned 3rd card alone in its own
   row at widths where 2 columns fit but not 3 (e.g. ~700-900px), and an earlier
   @media(max-width:900px) override on this exact selector mysteriously stopped
   applying in production while sibling rules in the same block kept working
   (never fully root-caused). A plain resize listener sidesteps both. */
.resources-grid{display:grid;gap:20px}
.resources-grid .resource-card:nth-child(1){grid-column:1/-1}
.resource-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:4px;padding:20px;
  transition:border-color .15s;display:flex;flex-direction:column;
}
.resource-card:hover{border-color:var(--border2)}
.resource-card.primary{border-top:2px solid var(--accent)}
.resource-card.gold  {border-top:2px solid var(--gold)}
.resource-tag{
  font-size:9.5px;font-family:monospace;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;display:inline-block;margin-bottom:12px;
}
.resource-tag.law{background:var(--blue-pale);color:var(--accent);border:1px solid var(--blue-dim)}
.resource-tag.gov{background:var(--green-pale);color:#4ADE80;border:1px solid var(--green)}
.resource-tag.irs{background:var(--gold-pale);color:#D4A017;border:1px solid var(--gold-dim)}
.resource-card h3{font-size:14px;font-weight:700;color:var(--white);margin-bottom:6px}
.resource-card p{font-size:12.5px;color:var(--gray);line-height:1.65;flex:1}
.resource-link{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:14px;font-size:12px;font-family:monospace;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--blue-dim);padding-bottom:1px;
  transition:border-color .15s;
}
.resource-link:hover{border-color:var(--accent)}

/* ── Hero Trust Pills ───────────────────────────────── */
.hero-trust{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;
}
.hero-trust span{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:rgba(255,255,255,.65);
  font-family:'Inter',sans-serif;
}
.hero-trust span::before{
  content:'✓';
  color:var(--gov-green);font-weight:700;font-size:13px;
}

/* ── Hero Stats Counters ────────────────────────────── */
.hero-stats{
  display:flex;gap:32px;margin-top:28px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap;
}
.hero-stat{display:flex;flex-direction:column;min-width:80px;}
.hero-stat-num{
  font-family:'Playfair Display',Georgia,serif;
  font-size:27px;font-weight:900;color:#ffffff;line-height:1;
  letter-spacing:-.5px;
}
.hero-stat-label{
  font-size:10px;color:rgba(255,255,255,.48);
  margin-top:5px;font-family:'Inter',sans-serif;
  letter-spacing:.2px;line-height:1.4;
}

/* ── CTA ────────────────────────────────────────────── */
.cta-section{
  padding:88px 0;
  background:var(--theme-gradient);
  border-bottom:none;
}
.cta-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
}
.cta-section h2{font-family:'Playfair Display',Georgia,serif;font-size:38px;font-weight:700;color:#ffffff;margin-bottom:16px;letter-spacing:-.3px;line-height:1.2}
.cta-section>div>p,.cta-left p{font-size:15px;color:rgba(255,255,255,.72);margin-bottom:32px;line-height:1.8}
.cta-features{display:flex;flex-direction:column;gap:24px}
.cta-feature-item{
  display:flex;align-items:flex-start;gap:16px;
  padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1);
}
.cta-feature-item:last-child{border-bottom:none;padding-bottom:0}
.cta-feature-icon{
  font-size:22px;line-height:1;flex-shrink:0;
  width:44px;height:44px;border-radius:10px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
}
.cta-feature-item strong{
  display:block;font-size:14px;font-weight:700;
  color:rgba(255,255,255,.9);margin-bottom:4px;
}
.cta-feature-item p{
  font-size:12.5px;color:rgba(255,255,255,.5);
  line-height:1.6;margin:0;
}

/* ── Footer ─────────────────────────────────────────── */
footer{
  background:var(--theme-gradient);padding:56px 0 0;
  border-top:4px solid var(--gov-green);
}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;margin-bottom:36px;align-items:start}
.footer-brand p{font-size:12.5px;color:rgba(255,255,255,.65);line-height:1.75;max-width:270px;margin-top:12px}
footer h4{
  font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.75);margin-bottom:14px;
  padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1);
}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer ul li a{color:rgba(255,255,255,.75);text-decoration:none;font-size:13px;transition:color .15s}
footer ul li a:hover{color:#ffffff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:18px 0;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;font-size:11px;color:rgba(255,255,255,.65);
  margin-top:8px;
}
.footer-disclaimer{
  font-size:11.5px;color:rgba(255,255,255,.72);line-height:1.7;
  background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);
  border-left:3px solid var(--gov-green);
  border-radius:0 3px 3px 0;padding:14px 18px;margin-bottom:24px;
}

/* ══════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════ */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(4,8,20,.9);z-index:500;
  align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--bg1);border:1px solid var(--border2);
  border-radius:5px;width:100%;max-width:660px;
  margin:auto;box-shadow:0 24px 80px rgba(0,0,0,.7);
  display:flex;flex-direction:column;overflow:hidden;
}
.modal-header{
  background:var(--bg2);padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.modal-title{font-size:15px;font-weight:700;color:var(--white)}
.modal-subtitle{font-size:11.5px;color:var(--gray);margin-top:2px}
.modal-close{
  background:none;border:none;color:var(--gray);font-size:18px;
  cursor:pointer;width:32px;height:32px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.modal-close:hover{background:var(--bg3);color:var(--white)}

/* Progress */
.modal-progress{
  background:var(--bg2);padding:12px 24px;
  display:flex;gap:0;border-bottom:1px solid var(--border);
}
.prog-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.prog-step:not(:last-child)::after{
  content:'';position:absolute;left:50%;top:11px;
  width:100%;height:1px;background:var(--border);z-index:0;
}
.prog-step.done:not(:last-child)::after,
.prog-step.active:not(:last-child)::after{background:var(--accent)}
.prog-dot{
  width:22px;height:22px;border-radius:50%;
  background:var(--bg3);border:1.5px solid var(--border);
  color:var(--gray-dim);font-size:9px;font-weight:700;font-family:monospace;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;transition:all .25s;
}
.prog-step.done .prog-dot {background:var(--blue-dim);border-color:var(--accent);color:var(--accent)}
.prog-step.active .prog-dot{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.prog-label{font-size:9.5px;color:var(--gray-dim);margin-top:4px;white-space:nowrap}
.prog-step.active .prog-label{color:var(--white)}
.prog-step.done .prog-label{color:var(--gray)}

/* Modal body */
.modal-body{padding:24px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.step-panel{display:none}
.step-panel.active{display:block}
.step-h{font-size:16px;font-weight:700;color:var(--white);margin-bottom:6px}
.step-p{font-size:13px;color:var(--gray);margin-bottom:20px;line-height:1.65}

/* Form */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:11.5px;font-weight:600;color:var(--white-dim);margin-bottom:5px;letter-spacing:.2px}
.form-label span{color:#EF4444}
.form-input,.form-select,.form-textarea{
  width:100%;padding:9px 12px;
  background:var(--bg);border:1px solid var(--border2);
  border-radius:3px;font-size:13px;color:var(--white);
  transition:border-color .15s;font-family:inherit;
  min-height:40px;box-sizing:border-box;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--accent)}
.form-input[readonly]{opacity:.65;cursor:not-allowed}
.form-input[readonly]:focus{border-color:var(--border2)}
.form-select option{background:var(--bg1)}
.form-textarea{min-height:72px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.radio-group{display:flex;flex-direction:column;gap:7px}
.radio-label{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;border:1px solid var(--border);border-radius:3px;
  cursor:pointer;font-size:13px;color:var(--gray);
  transition:border-color .15s,background .15s;
}
.radio-label:hover{border-color:var(--border2);background:var(--bg2)}
.radio-label input{accent-color:var(--accent)}
.info-block{
  background:var(--gov-green-pale);border-left:3px solid var(--gov-green);
  border-radius:0 4px 4px 0;padding:12px 16px;
  margin-bottom:18px;font-size:12.5px;color:var(--gray);line-height:1.65;
}
.info-block a{color:#4ADE80;font-weight:600}
.info-block strong{color:var(--white);display:block;margin-bottom:3px}
/* Hash-verification section (#hash-verify) — restored, the HTML for it had
   been dropped in an earlier extraction pass while the JS logic
   (checkHash/runVerification in ui.js) survived untouched. */
.btn-hash-verify{
  width:100%;background:var(--blue-mid);color:#fff;font-weight:700;font-size:14px;
  padding:13px 20px;border:none;border-radius:4px;cursor:pointer;transition:background .15s;
}
.btn-hash-verify:hover{background:#1446c0}
#verifyResult{
  margin-top:14px;padding:14px 16px;border-radius:4px;border:1px solid;
  font-size:13px;line-height:1.6;
}
/* !important on background: most .warn-block instances in the migrated
   markup carry their own inline style="background:#hexcolor" (one of ~15
   distinct pastels, a leftover from the original monolith's per-topic
   color coding). Normal specificity can't override an inline style, so
   without !important these would keep rendering as light boxes with text
   colors meant for THIS dark surface — unreadable. The colored left
   border (also inline, kept as-is) still carries the per-topic accent. */
.warn-block{
  background:var(--bg3) !important;border-left:3px solid var(--gold);
  border-radius:0 3px 3px 0;padding:12px 16px;
  margin-bottom:18px;font-size:12.5px;color:var(--gray-dim);line-height:1.65;
}
.warn-block strong{color:#fbbf24;display:block;margin-bottom:3px}
.resource-link-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border:1px solid var(--border);border-radius:3px;
  background:var(--bg2);margin-bottom:10px;
}
.resource-link-row-icon{
  width:32px;height:32px;background:var(--blue-dim);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
}
.resource-link-row h4{font-size:13px;font-weight:600;color:var(--white)}
.resource-link-row a{font-size:12px;color:var(--accent);text-decoration:none;font-weight:600}
.resource-link-row a:hover{text-decoration:underline}
.bureau-input-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:6px}
.bureau-col h5{font-size:10px;color:#93c5fd;text-transform:uppercase;letter-spacing:.5px;text-align:center;margin-bottom:6px}
.review-block{background:var(--bg2);border:1px solid var(--border);border-radius:3px;padding:14px;margin-bottom:12px}
.review-block h4{font-size:10px;color:var(--gray-dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.review-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px solid var(--border)}
.review-row:last-child{border-bottom:none}
.review-row .lbl{color:var(--gray-dim)}
.review-row .val{color:var(--white);font-weight:600}

/* Modal footer */
.modal-footer{
  padding:14px 24px;border-top:1px solid var(--border);
  background:var(--bg2);display:flex;justify-content:space-between;align-items:center;
}
.btn-m-back{
  background:none;border:1px solid var(--border);color:var(--gray);
  font-size:13px;padding:8px 18px;border-radius:3px;cursor:pointer;
  transition:border-color .15s;
}
.btn-m-back:hover{border-color:var(--border2)}
.btn-m-next{
  background:var(--blue);color:#ffffff;border:none;
  font-size:13px;font-weight:600;padding:8px 20px;border-radius:3px;cursor:pointer;
  transition:background .15s;
}
.btn-m-next:hover{background:var(--accent)}
.btn-m-submit{
  background:var(--gov-green);color:#ffffff;
  border:none;
  font-size:13px;font-weight:700;padding:8px 20px;border-radius:3px;cursor:pointer;
  transition:background .15s;
}
.btn-m-submit:hover{background:var(--gov-green-dark)}
.modal-step-info{display:flex;flex-direction:column;align-items:center;gap:2px}
.modal-step-ct{font-size:11px;color:var(--gray-dim)}
.modal-autosave-note{font-size:10px;color:var(--gray-dim);display:flex;align-items:center;gap:4px}
.modal-autosave-note .ti{font-size:12px}
@media(max-width:480px){.modal-autosave-note{display:none}}

/* Responsive */
/* ── TABLET (≤900px) ─────────────────────────────────── */
@media(max-width:900px){
  .container{padding:0 18px}
  .hero-inner{grid-template-columns:1fr}.hero-news{display:none}
  
  
  .situation-grid{grid-template-columns:1fr 1fr}
  .complaint-grid{grid-template-columns:1fr 1fr}
  .cta-inner{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .bureau-input-grid{grid-template-columns:1fr}
  
  .hero-stats{gap:18px}
}

/* ── MOBILE (≤600px) ─────────────────────────────────── */
@media(max-width:600px){
  /* Base */
  html{font-size:15px}
  .container{padding:0 14px}
  .nav-links{display:none}
  .situation-grid{grid-template-columns:1fr}
  .complaint-grid{grid-template-columns:1fr}

  /* Hero */
  .hero{padding:48px 0 36px}
  .hero-sub{font-size:14px}
  .hero-stats{flex-wrap:wrap;gap:14px;justify-content:center}
  .hero-stat{min-width:calc(50% - 14px);align-items:center}
  .hero-stat-num{font-size:28px}
  .hero-stat-label{font-size:11px;text-align:center}
  .hero-actions .btn-primary,.hero-actions .btn-secondary{text-align:center;width:100%}

  /* Section headings */
  .section-head h2{font-size:22px}
  .section-head .section-sub{font-size:13px}
  .section{padding:48px 0}

  /* Modal overlay — full screen on mobile */
  .modal-overlay{
    padding:0;
    align-items:stretch;
  }
  .modal{
    border-radius:0;
    margin:0;
    width:100%;
    max-width:100%;
    height:100%;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  /* Modal header */
  .modal-header{padding:12px 16px}
  .modal-title{font-size:13px}
  .modal-subtitle{font-size:10px}

  /* Progress dots — hide labels, shrink dots */
  .modal-progress{padding:10px 12px;gap:0;overflow-x:auto}
  .prog-label{display:none}
  .prog-dot{width:18px;height:18px;font-size:8px}
  .prog-step:not(:last-child)::after{top:9px}

  /* Modal body — scrollable, takes remaining space */
  .modal-body{
    padding:16px 14px;
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Modal footer — fixed at bottom */
  .modal-footer{
    padding:12px 14px;
    flex-shrink:0;
    border-top:1px solid var(--border);
    background:var(--bg2);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }

  /* Form elements — larger touch targets */
  .form-label{font-size:12px;margin-bottom:5px}
  .form-input,.form-select,.form-textarea{
    font-size:16px; /* prevents iOS zoom on focus */
    padding:11px 12px;
    min-height:44px;
  }
  .form-group{margin-bottom:14px}
  .form-row{gap:10px}
  .step-h{font-size:14px}
  .step-p{font-size:12.5px}

  /* Buttons in footer */
  .modal-footer .btn-primary,.modal-footer .btn-secondary{
    padding:10px 16px;font-size:13px;min-height:44px;
  }

  /* Upload zone */
  .upload-zone{padding:20px 14px}
  .upload-zone-text{font-size:13px}
  .upload-zone-sub{font-size:11px}

  /* Step content */
  .step-panel{padding-bottom:8px}
  .vc-title{font-size:13px}

  /* Situation cards */
  .situation-card{padding:18px 14px}
  .sit-icon{width:44px;height:44px;margin-bottom:8px}
  .sit-icon .ti{font-size:19px}
  .situation-card h3{font-size:13px}
  .situation-card p{font-size:11.5px}

  /* Nav */
  nav .container{padding:0 14px}
  .logo-img{width:150px;max-width:150px}
  .logo-img--footer{width:150px;max-width:150px}

  /* Firm directory cards — side panel (phone + two buttons) never
     wrapped, so .dir-card-main (flex:1) got squeezed to ~50px and every
     word in the firm name wrapped onto its own line. Stack instead. */
  .dir-card{flex-direction:column;align-items:stretch;gap:12px}
  .dir-card-side{align-items:flex-start;width:100%}
  .dir-actions{flex-wrap:wrap}
}

/* SHA-256 hash display areas */

/* Pipeline stages – light by default, code tags stay accented */
.pipeline-node{background:var(--bg2);border-color:var(--border2)}
.pipeline-node.active{background:var(--blue-pale);border-color:var(--accent);box-shadow:0 0 16px rgba(0,114,206,.2)}
.pipeline-line{background:var(--border)}
.pipeline-tag{background:var(--bg3);border-color:var(--border);color:var(--gray)}
.pipeline-tag.code{color:var(--accent);border-color:var(--blue-dim);background:var(--blue-pale)}

/* Rule cards – white cards with blue accent borders */
.rule-card{background:#ffffff;border:1px solid var(--border);box-shadow:0 1px 4px rgba(32,84,147,.06)}
.rule-card:hover{border-color:var(--blue-dim);box-shadow:0 2px 12px rgba(32,84,147,.12)}
.rule-id{background:var(--blue-pale);border-color:var(--blue-dim);color:var(--accent)}

/* Statute tooltip stays dark (readability on hover) */
.statute-tip{background:#0f1929;border-color:#223352;border-left-color:var(--accent);color:#b0bccc}
.statute-tip strong{color:#93c5fd}

/* Section alternates */
.section.alt{background:var(--bg2)}

/* ══════════════════════════════════════════════════════
   CUESTIONARIO DINÁMICO INLINE
══════════════════════════════════════════════════════ */
.q-section{background:var(--bg3);padding:80px 0;border-bottom:1px solid var(--border)}
.situation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
@media(max-width:900px){.situation-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.situation-grid{grid-template-columns:1fr}}
.situation-card{
  background:#fff;border:2px solid var(--border);border-radius:10px;
  padding:28px 22px;cursor:pointer;transition:all .2s;text-align:center;
}
.situation-card:hover{border-color:var(--gov-green);box-shadow:0 6px 24px rgba(32,170,63,.12);transform:translateY(-3px)}
.situation-card.selected{border-color:var(--gov-green);background:var(--gov-green-pale);box-shadow:0 6px 24px rgba(32,170,63,.15)}
.sit-icon{
  width:52px;height:52px;border-radius:50%;
  background:var(--bg1);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
}
.sit-icon .ti{font-size:22px;color:var(--white);vertical-align:0}
.situation-card h3{font-size:14.5px;font-weight:700;color:var(--white);margin-bottom:8px;line-height:1.3}
.situation-card p{font-size:12.5px;color:var(--gray);line-height:1.6}
/* wizard */
.q-wizard{max-width:620px;margin:44px auto 0}
.q-progress-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:6px}
.q-progress-fill{height:100%;background:linear-gradient(90deg,var(--gov-green-dark),var(--gov-green));border-radius:3px;transition:width .35s ease}
.q-progress-label{font-size:11.5px;color:var(--gray-dim);text-align:right;margin-bottom:22px}
.q-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:38px 32px;box-shadow:0 6px 28px rgba(26,72,120,.09)}
.q-question{font-size:17px;color:var(--white);font-weight:600;line-height:1.55;margin-bottom:30px;text-align:center}
.q-buttons{display:flex;gap:16px;justify-content:center}
.q-btn-yes,.q-btn-no{flex:1;max-width:170px;padding:14px 18px;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;border:2px solid;transition:all .15s}
.q-btn-yes{background:#eaf7ef;border-color:#4caf7a;color:#1a6b3a}
.q-btn-yes:hover{background:#4caf7a;color:#fff;border-color:#4caf7a}
.q-btn-no{background:#fdf0f0;border-color:#e88888;color:#8b2020}
.q-btn-no:hover{background:#e88888;color:#fff;border-color:#e88888}
.q-back-btn{margin-top:14px;background:none;border:none;color:var(--gray-dim);font-size:12.5px;cursor:pointer;text-decoration:underline;display:block;text-align:center;width:100%}
/* results */
.q-results{max-width:620px;margin:44px auto 0;animation:fadeInUp .4s ease}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.q-results-header{display:flex;align-items:flex-start;gap:16px;background:var(--blue);color:#fff;padding:20px 24px;border-radius:10px 10px 0 0}
.q-results-icon{font-size:28px;flex-shrink:0}
.q-results-header h3{font-size:16px;font-weight:700;margin-bottom:4px}
.q-results-header p{font-size:12.5px;opacity:.85}
.q-violations-list{background:#fff;border:1px solid var(--border);border-top:none;padding:8px 24px}
.q-violation-item{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)}
.q-violation-item:last-child{border-bottom:none}
.q-vb{flex-shrink:0;padding:3px 8px;border-radius:3px;font-size:10px;font-weight:700;text-transform:uppercase;margin-top:3px}
.q-vb-critical{background:#fce8e6;color:#c0392b;border:1px solid #e8a09a}
.q-vb-high{background:#fff3e0;color:#c05000;border:1px solid #f0b060}
.q-vb-moderate{background:var(--gold-pale);color:#905010;border:1px solid var(--gold-dim)}
.q-violation-info h4{font-size:13.5px;font-weight:700;color:var(--white);margin-bottom:2px}
.q-violation-info p{font-size:12px;color:var(--gray);line-height:1.5}
.q-violation-statute{font-size:11px;color:var(--blue-dim);font-weight:600}
.q-no-violations{text-align:center;padding:28px;color:var(--gray)}
.q-results-cta{background:var(--bg2);border:1px solid var(--border);border-top:none;border-radius:0 0 10px 10px;padding:20px 24px;text-align:center}
.q-results-cta p{font-size:13px;color:var(--gray);margin-bottom:14px}
.q-restart-btn{margin-left:14px;background:none;border:1px solid var(--border2);color:var(--gray);padding:10px 18px;border-radius:4px;cursor:pointer;font-size:13px;transition:all .15s}
.q-restart-btn:hover{border-color:var(--blue-dim);color:var(--blue-mid)}

/* ══════════════════════════════════════════════════════
   OFICINAS DE QUEJA
══════════════════════════════════════════════════════ */
.complaint-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
@media(max-width:900px){.complaint-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.complaint-grid{grid-template-columns:1fr}}
.complaint-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:20px 22px;display:flex;flex-direction:column;transition:border-color .15s}
.complaint-card:hover{border-color:var(--blue-dim);box-shadow:0 3px 14px rgba(26,72,120,.1)}
.complaint-card.federal{border-top:3px solid var(--blue-mid)}
.complaint-card.state{border-top:3px solid #2e7d32}
.complaint-card.bureau{border-top:3px solid var(--blue-dim)}
.complaint-agency-tag{font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:2px 7px;border-radius:2px;display:inline-block;margin-bottom:10px}
.tag-federal{background:var(--blue-pale);color:var(--blue-mid);border:1px solid var(--border2)}
.tag-state{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}
.tag-bureau{background:#f3f0ff;color:#5b21b6;border:1px solid #c4b5fd}
.complaint-card h3{font-size:13.5px;font-weight:700;color:var(--white);margin-bottom:5px}
.complaint-card p{font-size:12px;color:var(--gray);line-height:1.6;flex:1;margin-bottom:10px}
.complaint-link{display:inline-flex;align-items:center;gap:5px;margin-top:auto;font-size:12.5px;color:var(--blue-dim);text-decoration:none;font-weight:600;transition:color .15s}
.complaint-link:hover{border-color:var(--blue-dim);color:var(--blue)}

/* ── Dark Mode ───────────────────────────────────── */
/* Theme = the hero section's gradient (the "illuminated" blue the user
   pointed at), applied as the page canvas everywhere — not a flat dark
   navy. Cards/boxes get one consistent lighter accent so they still pop
   against that gradient. --bg1/--bg2/--bg3 collapse to that one accent
   (previously three near-identical navy-grays doing the same job under
   different names caused confusion); section-level containers
   (.modal, nav, .q-section, .cra-section, .dir-panel) show the gradient
   directly instead of a flat color so a card inside them never ends up
   the same color as its own background. This used to be gated behind
   prefers-color-scheme:dark; the site is dark-only now, so it's always on. */
body{background:var(--theme-gradient);background-attachment:fixed;color:var(--white);}
.modal,nav,.q-section,.cra-section,.section.alt,.dir-panel{
  background:var(--theme-gradient) !important;background-attachment:fixed;
}
/* Real inline links: a cobalt blue meant for white/pale-blue backgrounds
   measures under 2:1 against both the card accent and the gradient —
   barely legible. Not touching --accent/--blue-mid/--blue-dim globally,
   since those variables are also used as BUTTON backgrounds (paired with
   white text) elsewhere; overriding them site-wide would break those
   pairs. Only the confirmed link selectors get a lighter blue here. */
.resource-link,.resource-link-row a,.hero-news-byline a,
.complaint-link,.q-restart-btn:hover{color:#93c5fd;}
.rule-card{background:var(--bg1);}
/* .resource-tag.gov's fill/text pairing was designed for a light pastel
   surface and reads as washed out against the dark card accent — same
   story for .irs, which was already a weak 2.3:1 even on its original
   light background. Giving both their own light pill + dark text,
   matching how .law already looks, restores a consistent bold badge
   design and fixes the underlying contrast. */
.resource-tag.gov{background:#ecfdf5 !important;color:#166534 !important;border-color:#166534 !important;}
.resource-tag.irs{background:#fffbeb !important;color:#92400e !important;border-color:#92400e !important;}
.pipe-dot{color:var(--white-dim);}
.situation-card,.complaint-card,
.form-input,.form-select,.form-textarea{background:var(--bg1);color:var(--white);}
.q-card,.review-block,.q-violations-list{background:var(--bg1);}
.modal-header,.modal-footer,.modal-progress{background:var(--bg1);}

/* The dark-mode fix for hardcoded light-pastel inline boxes now lives in
   grid.js's _fixLegacyInlineColors() — it has to run against the raw
   data-style string before the CSSOM normalizes it (see that file for
   why a [style*="..."] attribute selector can't do this anymore). */

/* ── Upload Zone ─────────────────────────────────── */
.upload-zone{
  border:2px dashed var(--border2);border-radius:8px;
  padding:28px 20px;text-align:center;cursor:pointer;
  background:var(--bg2);transition:all .2s;margin-top:14px;
  position:relative;
}
.upload-zone.dragover{border-color:var(--accent);background:var(--blue-pale);}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-zone-icon{font-size:32px;margin-bottom:8px;}
.upload-zone-text{font-size:14px;font-weight:600;color:var(--white);margin-bottom:4px;}
.upload-zone-sub{font-size:12px;color:var(--gray-dim);}
.upload-list{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
.upload-item{display:flex;align-items:center;gap:8px;background:var(--bg1);
  border:1px solid var(--border);border-radius:4px;padding:8px 12px;font-size:12.5px;}
.upload-item-icon{font-size:16px;}
.upload-item-name{flex:1;color:var(--white);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.upload-item-size{color:var(--gray-dim);font-size:11px;}
.upload-item-del{color:var(--red);cursor:pointer;font-size:16px;line-height:1;padding:0 4px;}

/* ── Pipeline Progress (análisis en vivo) ────────── */
.analysis-screen{padding:10px 0;}
.analysis-title{font-size:17px;font-weight:700;color:var(--white);margin-bottom:4px;}
.analysis-sub{font-size:12.5px;color:var(--gray);margin-bottom:20px;}
.pipeline-live{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.pipe-step{display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-radius:6px;border:1px solid var(--border);background:var(--bg2);transition:all .3s;}
.pipe-step.active{border-color:var(--accent);background:var(--blue-pale);}
.pipe-step.done{border-color:var(--gov-green);background:var(--gov-green-pale);}
.pipe-step.error{border-color:var(--red);background:var(--red-pale);}
.pipe-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;
  background:var(--border);color:var(--gray);}
.pipe-step.active .pipe-dot{background:var(--accent);color:#fff;animation:pulse 1.2s infinite;}
.pipe-step.done .pipe-dot{background:var(--gov-green);color:#fff;}
.pipe-step.error .pipe-dot{background:var(--red);color:#fff;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.pipe-label{font-size:13px;font-weight:600;color:var(--white);}
.pipe-msg{font-size:11.5px;color:var(--gray);margin-top:2px;}
.analysis-progress-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:20px;}
.analysis-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gov-green));
  border-radius:2px;transition:width .5s ease;width:0%;}

/* ── Results Screen ──────────────────────────────── */
.results-screen{padding:4px 0;}
.results-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;
  padding:14px 16px;background:var(--gov-green-pale);border:1px solid var(--gov-green);border-radius:6px;}
.results-header-icon{font-size:28px;}
.results-consumer{font-size:12px;color:var(--gray);margin-bottom:2px;}
.results-count{font-size:16px;font-weight:700;color:var(--gov-green);}
.violation-card{border:1px solid var(--border);border-radius:6px;padding:14px 16px;
  margin-bottom:10px;background:var(--bg1);}
.violation-card.critical{border-left:4px solid var(--red);}
.violation-card.high{border-left:4px solid #c05000;}
.violation-card.moderate{border-left:4px solid var(--gold);}
.violation-card.info{border-left:4px solid var(--accent);}
.vc-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.vc-title{font-size:13.5px;font-weight:700;color:var(--white);flex:1;}
.vc-statute{font-size:10.5px;color:var(--accent);font-family:monospace;
  background:var(--blue-pale);padding:2px 7px;border-radius:2px;border:1px solid var(--blue-dim);}
.vc-basis{font-size:12px;color:var(--gray);line-height:1.6;margin-bottom:8px;}
.vc-damages{display:flex;gap:10px;font-size:11px;}
.vc-dmg-item{background:var(--bg2);border:1px solid var(--border);border-radius:3px;
  padding:4px 10px;color:var(--gray);}
.vc-dmg-item strong{color:var(--white);}
.results-download{display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:20px;padding:16px;background:var(--navy);border-radius:8px;}
.btn-download{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;
  background:var(--gov-green);color:#fff;border-radius:4px;font-weight:700;
  font-size:14px;text-decoration:none;border:none;cursor:pointer;transition:background .2s;}
.btn-download:hover{background:var(--gov-green-dark);}
.results-no-violations{text-align:center;padding:24px;color:var(--gray);font-size:13px;}

/* ── CRA Especializada Section ─────────────────────── */
.cra-section{padding:80px 0;background:var(--bg2);}


.cra-tab:hover{border-color:var(--accent);color:var(--accent)}
.cra-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.cra-panel{display:none;}
.cra-panel.active{display:block;}


.cra-card:hover{border-color:var(--border2)}
.cra-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cra-card-name{font-size:14px;font-weight:700;color:var(--white)}
.cra-card-tag{
  font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;background:var(--blue-pale);
  color:var(--accent);border:1px solid var(--blue-dim);
}
.cra-card-body{font-size:12.5px;color:var(--gray);line-height:1.65;margin-bottom:12px;}
.cra-card-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:11px;
  border-top:1px solid var(--border);padding-top:10px;margin-top:6px;
}

.cra-meta-item strong{color:var(--white-dim);display:block;font-size:10.5px;margin-bottom:1px;}

.cra-dispute-link:hover{text-decoration:underline;}

.cra-rules-table th{
  background:var(--bg3);color:var(--white-dim);
  font-size:10px;letter-spacing:.8px;text-transform:uppercase;
  padding:8px 12px;border:1px solid var(--border);text-align:left;
  font-family:monospace;font-weight:700;
}
.cra-rules-table td{
  padding:9px 12px;border:1px solid var(--border);
  color:var(--gray);vertical-align:top;line-height:1.5;
}
.cra-rules-table td:first-child{
  font-family:monospace;font-size:11px;color:var(--accent);
  background:var(--bg2);white-space:nowrap;font-weight:700;
}
.cra-rules-table tr:hover td{background:var(--bg3);}
.cra-rules-table tr:hover td:first-child{background:var(--bg3);}


.cra-alert strong{color:#D4A017;display:block;margin-bottom:3px;}
.cra-info{
  background:var(--green-pale);border-left:3px solid var(--gov-green);
  border-radius:0 4px 4px 0;padding:12px 16px;
  font-size:12.5px;color:var(--gray);line-height:1.65;margin-bottom:20px;
}
.cra-info strong{color:var(--green);display:block;margin-bottom:3px;}

/* ── USPS Landing Section ──────────────────────────── */
.usps-section{
  padding:48px 0;
  text-align:center;
}
.usps-section a{display:inline-block;}
.usps-section img{height:90px;width:auto;display:block;}

/* ── Analysis ETA ──────────────────────────────────── */
.analysis-eta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--gray-dim);
  background:var(--bg2);border:1px solid var(--border);
  border-radius:20px;padding:4px 12px;margin-bottom:16px;
}

/* ── Results: Next Steps ───────────────────────────── */
.next-steps-wrap{
  margin-top:16px;
  border:1px solid var(--border);border-radius:8px;
  overflow:hidden;
}
.next-steps-title{
  font-size:10px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--gray-dim);
  background:var(--bg2);border-bottom:1px solid var(--border);
  padding:8px 14px;
}
.next-step-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;border-bottom:1px solid var(--border);
}
.next-step-item:last-child{border-bottom:none;}
.next-step-ico{font-size:18px;line-height:1;flex-shrink:0;margin-top:1px;}
.next-step-body strong{
  display:block;font-size:12.5px;font-weight:700;
  color:var(--white);margin-bottom:2px;
}
.next-step-body p{
  font-size:11.5px;color:var(--gray);line-height:1.5;margin:0;
}
.next-step-body a{
  font-size:11px;color:#93c5fd;text-decoration:none;font-weight:600;
}
.next-step-body a:hover{text-decoration:underline;}

/* ── Directorio de Despachos (Panel) ──────────────────────────── */
.dir-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(12,35,64,0.55);backdrop-filter:blur(2px);
  align-items:flex-start;justify-content:center;
  padding:40px 16px;overflow-y:auto;
}
.dir-overlay.open{display:flex;}
.dir-panel{
  background:var(--bg1);border-radius:10px;max-width:760px;width:100%;
  box-shadow:0 20px 60px rgba(12,35,64,0.35);overflow:hidden;
  margin-bottom:40px;
}
.dir-panel-head{
  background:var(--theme-gradient);
  padding:24px 28px;position:relative;
}
.dir-panel-head::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg, var(--gold) 0%, #f3c869 50%, var(--gold) 100%);
}
.dir-close{
  position:absolute;top:18px;right:20px;background:none;border:none;
  color:rgba(255,255,255,.6);font-size:22px;line-height:1;cursor:pointer;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:background .15s ease, color .15s ease;
}
.dir-close:hover{background:rgba(255,255,255,.1);color:#fff;}
.dir-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.dir-eyebrow::before{content:'';width:18px;height:1.5px;background:var(--gold);}
.dir-panel-head h3{
  font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:22px;
  color:#fff;margin-bottom:6px;max-width:460px;line-height:1.3;
}
.dir-panel-head p{
  font-family:'Inter',sans-serif;font-size:12.5px;color:rgba(255,255,255,.72);
  max-width:460px;line-height:1.5;
}
.dir-notice{
  margin:18px 28px 0;padding:12px 16px;border-radius:6px;
  background:rgba(217,118,6,0.07);border:1px solid rgba(217,118,6,0.25);
  display:flex;gap:10px;align-items:flex-start;
}
.dir-notice-icon{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;color:var(--gold);
  border:1.5px solid var(--gold);border-radius:50%;width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}
.dir-notice-text{font-family:'Inter',sans-serif;font-size:11.5px;line-height:1.55;color:var(--gray-dim);}
.dir-notice-text strong{color:var(--navy);font-weight:700;}
.dir-controls{
  display:flex;align-items:center;justify-content:space-between;
  margin:16px 28px 4px;padding-bottom:10px;border-bottom:1px solid var(--border);
}
.dir-count{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;color:var(--navy);}
.dir-rotate{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--gray-dim);}
.dir-rotate-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:dirPulse 2.2s ease-in-out infinite;}
@keyframes dirPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.8);}}
.dir-list{padding:6px 28px 24px;display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;}
.dir-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  transition:opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1);
}
.dir-card.shuffling{opacity:0;transform:translateY(5px);}
.dir-card-main{flex:1;min-width:0;}
.dir-card-name{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:15.5px;color:var(--white);margin-bottom:3px;}
.dir-card-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--gray-dim);margin-bottom:6px;}
.dir-card-meta b{color:#fbbf24;font-weight:700;text-transform:uppercase;font-size:9px;letter-spacing:.03em;margin-right:3px;}
.dir-tags{display:flex;gap:6px;flex-wrap:wrap;}
.dir-tag{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;color:var(--navy);
  background:rgba(12,35,64,0.06);border:1px solid rgba(12,35,64,0.14);
  padding:3px 8px;border-radius:3px;
}
.dir-card-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.dir-phone{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12.5px;color:var(--navy);}
.dir-actions{display:flex;gap:6px;position:relative;}
.dir-btn{
  font-family:'Inter',sans-serif;font-size:11px;font-weight:700;padding:7px 12px;
  border-radius:5px;cursor:pointer;white-space:nowrap;
}
.dir-btn-solid{background:var(--navy);color:#fff;border:1px solid var(--navy);}
.dir-btn-solid:hover{background:#112d5a;}
.dir-btn-line{background:#fff;color:var(--navy);border:1px solid var(--navy);}
.dir-btn-line:hover{background:var(--bg2);}
.dir-send-options{
  display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:10;
  background:#fff;border:1px solid var(--border);border-radius:6px;min-width:148px;
  box-shadow:0 8px 20px rgba(12,35,64,0.15);
}
.dir-send-options.open{display:block;}
.dir-send-opt{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:9px 12px;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;
  color:var(--navy);background:none;border:none;cursor:pointer;
}
.dir-send-opt:hover{background:var(--bg2);}
.dir-send-opt:not(:last-child){border-bottom:1px solid var(--border);}
.dir-footer-note{
  padding:14px 28px 22px;border-top:1px solid var(--border);
  font-family:'Inter',sans-serif;font-size:10.5px;color:var(--gray-dim);
  line-height:1.55;font-style:italic;
}

      /* Problem selection cards */
      .problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
      .prob-card{border:2px solid #e5e7eb;border-radius:10px;padding:16px 12px;cursor:pointer;transition:all .2s;text-align:center;background:#fff;user-select:none}
      .prob-card:hover{border-color:#3b82f6;background:#eff6ff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,130,246,.15)}
      .prob-card.selected{border-color:#1d4ed8;background:#dbeafe;box-shadow:0 0 0 3px rgba(29,78,216,.2)}
      .prob-icon{
        width:44px;height:44px;border-radius:50%;
        background:#eff6ff;border:1px solid #bfdbfe;
        display:flex;align-items:center;justify-content:center;
        margin:0 auto 8px;
      }
      .prob-icon .ti{font-size:19px;color:#1d4ed8}
      .prob-title{font-weight:600;font-size:13px;color:#1e40af;margin-bottom:4px}
      .prob-desc{font-size:11px;color:#6b7280;line-height:1.4}

.hamburger-btn{display:none;background:none;border:none;cursor:pointer;padding:6px 8px;flex-direction:column;gap:5px;margin-left:auto;}
.hamburger-btn span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:all .25s;}
.hamburger-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger-btn.open span:nth-child(2){opacity:0;}
.hamburger-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none;position:fixed;inset:0;background:rgba(12,35,64,.98);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:28px;}
.mobile-menu.open{display:flex;}
.mobile-menu a{color:#fff;text-decoration:none;font-size:20px;font-weight:600;transition:color .15s;}
.mobile-menu a:hover{color:var(--gov-green);}
@media(max-width:600px){
  .hamburger-btn{display:flex;}
  .nav-links{display:none!important;}
}

/* Firm directory: --navy text was designed for the panel's light-mode
   surface only; the surface itself (--bg1/--bg2, via .dir-panel/.dir-card)
   correctly flips dark, but these specific elements never got a
   corresponding dark-mode color. Placed after their light-mode definitions
   above so equal-specificity cascade order resolves in this rule's favor. */
.dir-count,.dir-notice-text strong,.dir-tag,.dir-phone{color:var(--white);}
/* .prob-title/.prob-desc used fixed light-mode colors (dark blue, gray);
   now that .prob-card's background is dark too, they need to match —
   placed after their own definitions so cascade order wins. */
.prob-card{background:var(--bg3);}
.prob-title{color:var(--white);}
.prob-desc{color:var(--gray-dim);}
.prob-card:hover{background:var(--bg2);}
.prob-card.selected{background:var(--bg1);}

/* background-attachment:fixed is known to misbehave on iOS Safari
   (scroll jank, the background clipping/detaching when the address bar
   shows or hides) — turn it off below the tablet breakpoint, where iOS
   Safari is the dominant browser. Not observed in testing, but this is a
   real, well-documented WebKit limitation, so disabling it defensively
   for small/touch viewports costs nothing (the gradient still renders,
   it just scrolls with the page instead of staying fixed). */
@media(max-width:900px){
  body,.modal,nav,.q-section,.cra-section,.section.alt,.dir-panel{
    background-attachment:scroll !important;
  }
}