/* Compliance Intelligence México — Sistema de Diseño (Módulo 4) aplicado al sitio */

:root{
  --ink:#10141B; --ink-2:#1E2530; --stone:#E6E7DF; --stone-2:#F4F4EF;
  --brass:#C68A2E; --brass-ink:#8A5F1D; --verdict:#2F6F5E; --alert:#A63A2E;
  --text-on-stone:#1A1D22; --text-muted-on-stone:#5B5F58; --border-on-stone: rgba(26,29,34,0.12);

  --background: var(--stone-2);
  --foreground: var(--text-on-stone);
  --card:#FFFFFE;
  --card-foreground: var(--text-on-stone);
  --primary: var(--brass);
  --primary-foreground: var(--ink);
  --secondary:#EDEAE0;
  --secondary-foreground: var(--text-on-stone);
  --success: var(--verdict);
  --warning:#B8842E;
  --destructive: var(--alert);
  --muted:#DEDCD2;
  --muted-foreground: var(--text-muted-on-stone);
  --border: var(--border-on-stone);
  --ring: var(--brass);
  --radius: 8px;

  --font-display: Rockwell, "Rockwell Nova", "Roboto Slab", "Bookman Old Style", serif;
  --font-body: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: Consolas, "SF Mono", "Roboto Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --background:#151A21; --card:#1B212A; --card-foreground:#E9E9E3; --foreground:#E9E9E3;
    --secondary:#232B36; --secondary-foreground:#E9E9E3;
    --muted:#232B36; --muted-foreground:#9BA0A6; --border: rgba(233,233,227,0.14);
  }
}
:root[data-theme="dark"]{
  --background:#151A21; --card:#1B212A; --card-foreground:#E9E9E3; --foreground:#E9E9E3;
  --secondary:#232B36; --secondary-foreground:#E9E9E3;
  --muted:#232B36; --muted-foreground:#9BA0A6; --border: rgba(233,233,227,0.14);
}
:root[data-theme="light"]{
  --background: var(--stone-2); --card:#FFFFFE; --card-foreground: var(--text-on-stone); --foreground: var(--text-on-stone);
  --secondary:#EDEAE0; --secondary-foreground: var(--text-on-stone);
  --muted:#DEDCD2; --muted-foreground: var(--text-muted-on-stone); --border: var(--border-on-stone);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ margin:0; font-family: var(--font-body); color: var(--foreground); background: var(--background); line-height: 1.55; }
h1,h2,h3{ font-family: var(--font-display); text-wrap: balance; margin:0; }
a{ color:inherit; }
code{ font-family: var(--font-mono); background: var(--muted); padding:0.1rem 0.35rem; border-radius:4px; font-size:0.88em; }
:focus-visible{ outline: 2px solid var(--ring); outline-offset: 2px; }
img{ max-width:100%; }

/* ---- NAV ---- */
.site-nav{ position: sticky; top:0; z-index:20; background: var(--background); border-bottom:1px solid var(--border); }
.site-nav-inner{ max-width: 72rem; margin:0 auto; padding: 0.9rem clamp(1.25rem,5vw,2rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav-logo{ font-family: var(--font-display); font-weight:700; font-size:1.05rem; text-decoration:none; display:flex; align-items:center; gap:0.5rem; }
.nav-logo .dot{ color: var(--brass); }
.nav-links{ display:flex; align-items:center; gap:1.1rem; list-style:none; margin:0; padding:0; flex-wrap:wrap; justify-content:flex-end; }
.nav-links a{ font-size:0.88rem; text-decoration:none; color: var(--muted-foreground); transition: color 0.15s ease; white-space:nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--foreground); font-weight:600; }
.nav-cta{ font-size:0.85rem !important; padding:0.5rem 1rem; border-radius: var(--radius); background: var(--primary); color: var(--primary-foreground) !important; font-weight:700 !important; }
.nav-toggle{ display:none; background:none; border:1px solid var(--border); border-radius:6px; padding:0.4rem 0.6rem; cursor:pointer; color: var(--foreground); }

@media (max-width: 760px){
  .nav-links{ position:fixed; inset: 3.6rem 0 0 0; background: var(--background); flex-direction:column; align-items:flex-start; padding: 1.5rem; gap:1.1rem; transform: translateY(-8px); opacity:0; pointer-events:none; transition: opacity 0.15s ease, transform 0.15s ease; }
  .nav-links.open{ opacity:1; transform:none; pointer-events:auto; }
  .nav-toggle{ display:block; }
}

/* ---- HERO / COVER ---- */
.cover{ position: relative; background: var(--ink); color:#EDEBE0; padding: clamp(3.5rem,10vw,7rem) clamp(1.25rem,5vw,3rem); overflow:hidden; isolation:isolate; }
.cover canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.5; }
.cover-content{ position:relative; z-index:1; max-width: 40rem; margin:0 auto; text-align:center; }
.eyebrow{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:0.14em; font-size:0.72rem; color: var(--brass); margin:0 0 1.25rem; }
.hero-title{ font-size: clamp(2.1rem, 6vw, 3.6rem); font-weight:700; color:#F5F3E9; }
.hero-sub{ font-size: clamp(1.05rem, 2.2vw, 1.25rem); margin: 1rem 0 0; color:#C9CBC0; font-weight:500; }
.hero-body{ font-size:1rem; color:#9EA39A; max-width: 34rem; margin: 1.25rem auto 0; }
.hero-actions{ display:flex; gap:0.9rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }

/* ---- SECTIONS ---- */
.section{ max-width: 72rem; margin:0 auto; padding: clamp(3rem,7vw,5rem) clamp(1.25rem,5vw,2rem); }
.section--narrow{ max-width: 46rem; }
.section-title{ font-size: clamp(1.5rem,3.4vw,2.1rem); margin-bottom:1rem; }
.section-lead{ font-size:1.02rem; color: var(--muted-foreground); max-width:60ch; margin-bottom:2rem; }
.kicker{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:0.1em; font-size:0.72rem; color: var(--brass-ink); margin:0 0 0.8rem; display:block; }

/* ---- BUTTONS ---- */
.btn{ font-family: var(--font-body); font-size:0.95rem; font-weight:700; padding:0.75rem 1.4rem; border-radius: var(--radius); border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:0.5rem; transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease; }
.btn:active{ transform: scale(0.98); }
.btn-primary{ background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover{ box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 45%, transparent); }
.btn-secondary{ background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); }
.btn-secondary:hover{ background: var(--muted); }
.btn-ghost{ background: transparent; color: var(--foreground); border-color: var(--border); }
.btn-ghost:hover{ background: var(--muted); }
.btn-on-dark{ background: transparent; color:#EDEBE0; border-color: rgba(237,235,224,0.35); }
.btn-on-dark:hover{ background: rgba(237,235,224,0.1); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; box-shadow:none; }
.btn-lg{ font-size:1.05rem; padding:0.9rem 1.8rem; }

/* ---- CARDS ---- */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:1.25rem; }
.ui-card{ background: var(--card); border-radius: var(--radius); padding:1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.ui-card-eyebrow{ font-family: var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--muted-foreground); }
.ui-card h3{ font-size:1.15rem; margin:0.5rem 0 0.6rem; }
.ui-card p{ font-size:0.92rem; color: var(--muted-foreground); margin:0; }
.ui-card--link{ text-decoration:none; color:inherit; display:block; transition: box-shadow 0.2s ease, transform 0.15s ease; }
.ui-card--link:hover{ box-shadow: 0 10px 24px rgba(0,0,0,0.14); transform: translateY(-2px); }

/* ---- QUOTES / CHIPS ---- */
.quote-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:0.75rem; }
.quote-grid blockquote{ margin:0; padding:1rem 1.1rem; background: var(--card); border:1px solid var(--border); border-left:3px solid var(--brass); font-size:0.92rem; font-style:italic; color: var(--muted-foreground); }
.chip-row{ display:flex; flex-wrap:wrap; gap:0.55rem; }
.chip{ font-family: var(--font-mono); font-size:0.8rem; padding:0.4rem 0.85rem; background: var(--card); border:1px solid var(--border); border-radius:3px; }

/* ---- CHIP SELECT (Diagnóstico, Radar AML) ---- */
.chip-select{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:1.75rem; }
.chip-btn{ font-family: var(--font-mono); font-size:0.82rem; padding:0.5rem 0.9rem; border-radius:999px; border:1px solid var(--border); background: var(--card); color: var(--foreground); cursor:pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.chip-btn:hover{ border-color: var(--primary); }
.chip-btn[aria-pressed="true"]{ background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight:600; }

/* ---- FORMS ---- */
.form-demo{ display:flex; flex-direction:column; gap:1.15rem; }
.field{ display:flex; flex-direction:column; gap:0.35rem; }
.field-label{ font-size:0.85rem; font-weight:600; }
.field-input{ font-size:0.95rem; padding:0.65rem 0.8rem; border-radius: var(--radius); border:1px solid var(--border); background: var(--card); color: var(--card-foreground); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.field-input:focus{ border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent); outline:none; }
.field-hint{ font-size:0.78rem; color: var(--destructive); }
.field-error .field-input{ border-color: var(--destructive); }
.radio-option{ display:flex; align-items:center; gap:0.6rem; font-size:0.95rem; padding:0.65rem 0.9rem; border:1px solid var(--border); border-radius: var(--radius); margin-bottom:0.5rem; cursor:pointer; transition: border-color 0.15s ease, background 0.15s ease; background: var(--card); }
.radio-option:hover{ border-color: var(--primary); }
.radio-option:has(input:checked){ border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card)); font-weight:600; }

/* ---- PROGRESS / GAUGE ---- */
.progress-track{ height:6px; background: var(--muted); border-radius:3px; overflow:hidden; }
.progress-fill{ height:100%; background: var(--primary); border-radius:3px; transition: width 0.3s ease; }
.progress-label{ font-family: var(--font-mono); font-size:0.72rem; color: var(--muted-foreground); }
.gauge-card{ background: var(--card); border-radius: var(--radius); padding:1.5rem; box-shadow: 0 4px 14px rgba(0,0,0,0.1); display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.5rem; }
.gauge-label{ font-family: var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color: var(--muted-foreground); }
.gauge-value{ font-family: var(--font-display); font-size:3.2rem; font-weight:700; font-variant-numeric: tabular-nums; }
.gauge-value span{ font-size:1.1rem; font-weight:400; color: var(--muted-foreground); }
.gauge-bar{ width:100%; height:8px; background: var(--muted); border-radius:4px; overflow:hidden; }
.gauge-fill{ height:100%; background: var(--destructive); transition: width 0.6s ease; }

/* ---- BADGES ---- */
.risk-badge{ font-family: var(--font-mono); font-size:0.82rem; font-weight:700; padding:0.35rem 0.9rem; border-radius:999px; }
.risk-badge.band-bajo{ background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.risk-badge.band-medio{ background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.risk-badge.band-alto{ background: color-mix(in srgb, var(--destructive) 16%, transparent); color: var(--destructive); }
.risk-badge.band-critico{ background: var(--destructive); color:#F5F3E9; }

/* ---- FOOTER ---- */
.site-footer{ background: var(--ink); color:#C9CBC0; }
.site-footer-inner{ max-width:72rem; margin:0 auto; padding: clamp(2.5rem,6vw,3.5rem) clamp(1.25rem,5vw,2rem); display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; }
.footer-brand{ font-family: var(--font-display); font-weight:700; color:#F5F3E9; font-size:1.1rem; }
.footer-tag{ font-size:0.85rem; color:#9BA0A6; margin-top:0.4rem; max-width:22rem; }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.6rem; }
.footer-links a{ font-size:0.88rem; text-decoration:none; color:#C9CBC0; }
.footer-links a:hover{ color:#F5F3E9; }
.footer-col-title{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:0.06em; font-size:0.68rem; color:#7C8178; margin-bottom:0.9rem; }
.footer-bottom{ border-top:1px solid rgba(233,233,227,0.1); padding: 1.25rem clamp(1.25rem,5vw,2rem); text-align:center; font-size:0.76rem; color:#7C8178; }

/* ---- GLOSSARY / AUTHORITY CARDS (Biblioteca) ---- */
.authority-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1.1rem; }
.authority-card{ background: var(--card); border-radius: var(--radius); padding:1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.authority-acronym{ font-family: var(--font-display); font-weight:700; font-size:1.3rem; color: var(--brass-ink); }
.authority-name{ font-size:0.85rem; color: var(--muted-foreground); margin: 0.2rem 0 0.75rem; }
.authority-card p{ font-size:0.9rem; margin:0; }
.glossary-list{ display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; background: var(--card); }
.glossary-item{ padding: 1rem 1.25rem; border-bottom:1px solid var(--border); }
.glossary-item:last-child{ border-bottom:none; }
.glossary-term{ font-family: var(--font-display); font-weight:700; font-size:1rem; }
.glossary-def{ font-size:0.9rem; color: var(--muted-foreground); margin: 0.3rem 0 0; }

/* ---- POST CARDS (Observatorio) ---- */
.post-card{ background: var(--card); border-radius: var(--radius); padding:1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.post-date{ font-family: var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color: var(--muted-foreground); }
.post-card h3{ font-size:1.15rem; margin:0.5rem 0 0.6rem; }
.post-card p{ font-size:0.92rem; color: var(--muted-foreground); margin:0 0 0.75rem; }
.post-source{ font-size:0.78rem; }
.post-source a{ color: var(--brass-ink); }
.editorial-note{ background: var(--muted); border-radius: var(--radius); padding:1.25rem 1.5rem; font-size:0.9rem; color: var(--muted-foreground); }

/* ---- FAQ (Radar AML) ---- */
.faq-search{ margin-bottom:1.5rem; }
.faq-list{ display:flex; flex-direction:column; gap:0.75rem; }
.faq-item{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding:1rem 1.25rem; font-size:0.98rem; font-weight:600; font-family: var(--font-body); color: var(--foreground); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-q .faq-icon{ font-family: var(--font-mono); color: var(--muted-foreground); flex-shrink:0; }
.faq-a{ padding: 0 1.25rem 1.1rem; font-size:0.92rem; color: var(--muted-foreground); }
.faq-item[data-open="false"] .faq-a{ display:none; }
.faq-empty{ text-align:center; color: var(--muted-foreground); padding: 2rem 0; font-size:0.92rem; }

/* ---- COMPLIANCE SCORE (dentro del Diagnóstico) ---- */
.cscore-card{ background: var(--card); border-radius: var(--radius); padding:1.5rem; }
.cscore-note{ font-size:0.8rem; color: var(--muted-foreground); background: var(--muted); border-radius:4px; padding:0.6rem 0.9rem; margin-bottom:1.1rem; }
.cscore-bands{ display:flex; height:1.6rem; border-radius:4px; overflow:hidden; margin: 0.75rem 0 0.4rem; border:1px solid var(--border); }
.cscore-band{ flex:1; display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size:0.68rem; color:#fff; position:relative; }
.cscore-marker{ position:absolute; top:-0.6rem; width:2px; height:2.8rem; background: var(--foreground); }
.cscore-marker-label{ position:absolute; top:-1.5rem; transform: translateX(-50%); font-family: var(--font-mono); font-size:0.7rem; font-weight:700; white-space:nowrap; }

/* ---- COURSE CARDS (Compliance Academy) ---- */
.course-card{ background: var(--card); border-radius: var(--radius); padding:1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); display:flex; flex-direction:column; gap:0.75rem; }
.course-type{ font-family: var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; padding:0.2rem 0.55rem; border-radius:3px; background: color-mix(in srgb, var(--brass) 18%, transparent); color: var(--brass-ink); align-self:flex-start; }
.course-meta{ font-size:0.8rem; color: var(--muted-foreground); }
.course-syllabus{ margin:0; padding-left:1.1rem; font-size:0.88rem; }
.course-syllabus li + li{ margin-top:0.3rem; }

/* ---- WAITLIST / SUBSCRIBE FORMS ---- */
.waitlist-form{ display:flex; gap:0.6rem; flex-wrap:wrap; max-width:28rem; }
.waitlist-form .field-input{ flex:1; min-width:12rem; }
.waitlist-confirm{ font-size:0.88rem; color: var(--success); font-weight:600; }

/* ---- UTIL ---- */
.mt-lg{ margin-top: 2rem; }
.text-center{ text-align:center; }
[hidden]{ display:none !important; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } }