/* ============================================================
   CANAL DE DENUNCIAS — sistema de diseño minimalista
   ============================================================ */

:root{
  --bg:        #FAFAF8;
  --surface:   #FFFFFF;
  --ink:       #14181A;
  --muted:     #666F6A;
  --muted-2:   #97A099;
  --line:      #E3E5DD;
  --line-2:    #ECEEE8;

  /* acento por rol — se sobreescribe por página */
  --accent:      #3A5049;
  --accent-soft: #EEF2EF;
  --accent-text: #2C3F3A;

  --radius: 2px;
  --max: 760px;
  --max-wide: 920px;
}

body.dark{
  --bg:      #14171A;
  --surface: #1B1F22;
  --ink:     #EDEFEA;
  --muted:   #9CA6A0;
  --muted-2: #6C7570;
  --line:    #2B2F31;
  --line-2:  #24282A;
  --accent-soft: #212A27;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}

h1,h2,h3,h4{
  font-family:'Newsreader',Georgia,serif;
  font-weight:500;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}

.eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.11em;
  text-transform:uppercase;
  color:var(--muted);
}

a{color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
.wrap-wide{max-width:var(--max-wide); margin:0 auto; padding:0 24px;}

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0;
}
.wordmark{
  display:flex; align-items:baseline; gap:9px;
  text-decoration:none; color:var(--ink);
  font-family:'Newsreader',serif; font-size:17px; font-weight:500;
}
.wordmark .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;}

.site-nav{display:flex; align-items:center; gap:28px;}
.site-nav a{
  text-decoration:none; font-size:13.5px; color:var(--muted); font-weight:500;
}
.site-nav a.current{color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:2px;}
.site-nav a:hover{color:var(--ink);}

.theme-btn{
  border:1px solid var(--line); background:none; color:var(--muted);
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.theme-btn:hover{color:var(--ink); border-color:var(--muted-2);}
.theme-btn svg{width:15px; height:15px;}
.theme-btn .sun{display:none;}
body.dark .theme-btn .moon{display:none;}
body.dark .theme-btn .sun{display:block;}

@media (max-width:640px){
  .site-nav .label{display:none;}
}

/* ============ HERO (compacto, sin gradientes) ============ */
.page-hero{padding:64px 0 8px;}
.page-hero .eyebrow{margin-bottom:16px;}
.page-hero h1{font-size:clamp(28px,4.4vw,42px); line-height:1.12; max-width:16ch;}
.page-hero p.lead{
  margin-top:18px; max-width:58ch; color:var(--muted); font-size:16.5px;
}

/* ============ CALLOUT (protección / confidencialidad) ============ */
.callout{
  margin:36px 0 0;
  border-left:2px solid var(--accent);
  background:var(--accent-soft);
  padding:20px 24px;
  font-size:14.5px;
  color:var(--ink);
}
.callout strong{color:var(--accent-text);}

/* ============ SECTION ============ */
section{padding:56px 0;}
.section-title{margin-bottom:34px;}
.section-title h2{font-size:clamp(22px,2.6vw,28px);}
.section-title p{margin-top:10px; color:var(--muted); font-size:15px; max-width:56ch;}

/* ============ CASE INDEX (categorías numeradas) ============ */
.case{
  display:grid; grid-template-columns:64px 1fr; gap:0;
  border-top:1px solid var(--line);
  padding:30px 0;
}
.case:last-child{border-bottom:1px solid var(--line);}
.case .idx{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--muted-2);
  padding-top:3px;
}
.case h4{font-size:18px; font-weight:500; margin-bottom:10px; display:flex; align-items:center; gap:10px;}
.case .def{
  font-style:italic; color:var(--muted); font-size:14px; line-height:1.65;
  margin-bottom:14px; max-width:62ch;
}
.case .ex-label{
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent-text); margin-bottom:8px; display:block;
}
.case ul{margin:0; padding:0; list-style:none; max-width:62ch;}
.case ul li{
  position:relative; padding-left:16px; font-size:14.5px; color:var(--ink);
  margin-bottom:7px;
}
.case ul li::before{
  content:'—'; position:absolute; left:0; color:var(--muted-2);
}

@media (max-width:600px){
  .case{grid-template-columns:1fr; gap:6px;}
  .case .idx{padding-top:0;}
}

/* ============ PROCESS (línea de tiempo simple) ============ */
.process{border-top:1px solid var(--line);}
.process-row{
  display:grid; grid-template-columns:140px 1fr; gap:24px;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.process-row .tag{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted);}
.process-row p{margin:0; font-size:14.5px; color:var(--ink);}
.process-row strong{font-weight:600;}
@media (max-width:560px){ .process-row{grid-template-columns:1fr; gap:4px;} }

/* ============ ROLE CARDS (inicio) ============ */
.roles{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  margin-top:44px;
}
@media (max-width:640px){ .roles{grid-template-columns:1fr;} }
.role-card{
  background:var(--surface); padding:38px 32px;
  text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:14px;
  transition:background .15s ease;
}
.role-card:hover{background:var(--accent-soft);}
.role-card .tag{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);}
.role-card h3{font-size:23px; font-weight:500;}
.role-card p{font-size:14px; color:var(--muted); margin:0; line-height:1.55;}
.role-card .go{
  margin-top:10px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:7px;
  color:var(--ink);
}
.role-card .go svg{width:13px; height:13px; transition:transform .15s ease;}
.role-card:hover .go svg{transform:translateX(3px);}

/* ============ FEATURES LIST ============ */
.checklist{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px;}
.checklist li{
  display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--muted);
}
.checklist svg{width:15px; height:15px; flex:none; margin-top:2px; color:var(--accent);}

/* ============ CTA / BOTONES ============ */
.cta-box{
  border:1px solid var(--line);
  padding:40px 36px;
  margin-top:8px;
  text-align:left;
}
.cta-box h3{font-size:20px; margin-bottom:8px;}
.cta-box p{color:var(--muted); font-size:14.5px; margin:0 0 26px;}
.cta-buttons{display:flex; gap:12px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:2px;
  font-size:14px; font-weight:600; text-decoration:none;
  border:1px solid transparent;
  transition:opacity .15s ease, background .15s ease;
}
.btn svg{width:14px; height:14px;}
.btn-solid{background:var(--accent); color:#FAFAF8;}
.btn-solid:hover{opacity:.88;}
.btn-outline{border-color:var(--line); color:var(--ink);}
.btn-outline:hover{border-color:var(--muted-2);}

/* ============ FOOTER ============ */
.site-footer{
  border-top:1px solid var(--line);
  padding:36px 0 40px;
  margin-top:40px;
}
.site-footer .wrap-wide{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted-2);
}
.site-footer a{text-decoration:underline; text-underline-offset:2px; color:var(--muted);}

/* utilidad */
.note-inline{
  font-size:13px; color:var(--muted-2); margin-top:14px;
}