/* ─── RESET & TOKENS ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --cn:  #0f1a35;
  --cb:  #3156ac;
  --cbl: #dee8ff;
  --cg:  #324335;
  --cgm: #76997c;
  --cgs: #A2BAA6;
  --cgb: #ebf1ec;
  --cy:  #f7f9cd;
  --cgr: #d2d7e2;
  --cgw: #b9b2a8;
  --cpk: #fcf1f1;
  --cr:  #D63B44;
  --cw:  #ffffff;
  --ease: cubic-bezier(0.25,0.46,0.45,0.94);
}
body { background: #f4f6f9; font-family: 'Host Grotesk', -apple-system, sans-serif; }

/* ─── WRAPPER ─── */
.ce-page { max-width: 1060px; margin: 0 auto; padding: 40px 24px 80px; }

.cm { font-family: 'Host Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 300; color: var(--cn); background: transparent; line-height: 1.7; -webkit-font-smoothing: antialiased; }

/* ─── PORTADA ─── */
.cm-portada { position: relative; min-height: 600px; overflow: hidden; border-radius: 20px; margin-bottom: 32px; display: flex; flex-direction: column; justify-content: flex-end; }
.cm-portada-img { position: absolute; inset: 0; }
.cm-portada-img .cm-simg { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.cm-portada-img .cm-simg-ph { position: absolute; inset: 0; background: linear-gradient(140deg,#0f1a35 0%,#1e3a8a 50%,#324335 100%); }
.cm-portada-tinta { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,16,38,0.97) 0%, rgba(10,16,38,0.65) 45%, rgba(10,16,38,0.15) 100%); }
.cm-portada-cuerpo { position: relative; padding: 52px 56px; }
.cm-portada-ficha { display: inline-block; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.92); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 22px; }
.cm-portada-h1 { font-size: clamp(2.6rem,5.5vw,4.2rem); font-weight: 700; color: #fff !important; line-height: 1.05; letter-spacing: -0.045em; margin-bottom: 18px; }
.cm-portada-bajada { font-size: 0.94rem; font-weight: 300; color: rgba(255,255,255,0.85) !important; max-width: 480px; line-height: 1.65; margin-bottom: 32px; }
.cm-portada-datos { display: flex; gap: 28px; margin-bottom: 20px; }
.cm-dato { display: flex; flex-direction: column; gap: 3px; }
.cm-dato-k { font-size: 0.63rem; font-weight: 400; color: rgba(255,255,255,0.55) !important; letter-spacing: 0.09em; text-transform: uppercase; }
.cm-dato-v { font-size: 0.82rem; font-weight: 500; color: #fff !important; }

/* ─── ÍNDICE ─── */
.cm-indice { background: #fff; border: 1px solid var(--cgr); border-radius: 20px; padding: 36px 40px; margin-bottom: 28px; }
.cm-indice-header { margin-bottom: 22px; }
.cm-indice-titulo { font-size: 1.45rem; font-weight: 700; color: var(--cn); letter-spacing: -0.025em; }
.cm-indice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px,1fr)); gap: 7px; }
.cm-idx-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 13px; border-radius: 10px; text-decoration: none !important; border: 1px solid var(--cgr); background: #fff; transition: background 200ms var(--ease), border-color 200ms var(--ease); }
.cm-idx-item:hover { background: var(--cbl); border-color: var(--cb); }
.cm-idx-num { font-size: 0.67rem; font-weight: 600; color: var(--cb); background: var(--cbl); width: 28px; height: 28px; min-width: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; letter-spacing: 0.02em; }
.cm-idx-txt { display: flex; flex-direction: column; gap: 2px; }
.cm-idx-titulo { font-size: 0.84rem; font-weight: 500; color: #4a5568; text-decoration: none !important; }
.cm-idx-desc { font-size: 0.74rem; font-weight: 400; color: #7a828f; text-decoration: none !important; }
.cm-idx-item, .cm-idx-item *, .cm-idx-item:hover, .cm-idx-item:visited { text-decoration: none !important; }

/* ─── SECCIÓN: layout foto + texto ─── */
.cm-sec { display: grid; grid-template-columns: 300px 1fr; gap: 0; background: #fff; border-radius: 20px; overflow: hidden; margin-bottom: 28px; border: 1px solid var(--cgr); }
.cm-sec-inv { grid-template-columns: 1fr 300px; }
.cm-sec-foto { position: relative; min-height: 400px; overflow: hidden; background: var(--cgr); }
.cm-sec-inv .cm-sec-foto { order: 2; }
.cm-sec-foto .cm-simg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; transform: translateZ(0); }
.cm-sec-foto .cm-simg-ph { position: absolute; inset: 0; background: linear-gradient(160deg, var(--cbl) 0%, var(--cgr) 100%); display: flex; align-items: center; justify-content: center; color: var(--cgw); font-size: 0.73rem; letter-spacing: 0.05em; }
.cm-sec-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,26,53,0.25) 0%, rgba(15,26,53,0) 40%); pointer-events: none; }
.cm-sec-badge { position: absolute; bottom: 16px; right: 16px; background: var(--cn); color: var(--cw); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; padding: 5px 11px; border-radius: 100px; z-index: 2; }
.cm-sec-kicker-foto { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); color: rgba(255,255,255,0.8); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; z-index: 2; }
.cm-sec-cuerpo { padding: 36px 38px 40px; }

/* ─── TIPOGRAFÍA INTERNA ─── */
.cm-kicker { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cgm); margin-bottom: 7px; }
.cm-h2 { font-size: 1.6rem; font-weight: 700; color: var(--cn); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 18px; }
.cm-subtit { font-size: 0.88rem; font-weight: 600; color: var(--cn); margin: 20px 0 9px; letter-spacing: -0.01em; }
.cm-p { font-size: 0.87rem; font-weight: 300; color: #3d3d50; line-height: 1.77; margin-bottom: 11px; }

/* ─── AVISOS / CALLOUTS ─── */
.cm-aviso { display: flex; gap: 11px; align-items: flex-start; border-radius: 10px; padding: 14px 16px; margin: 13px 0; }
.cm-aviso svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cm-aviso p, .cm-aviso div { font-size: 0.85rem; font-weight: 300; color: var(--cn); line-height: 1.65; margin: 0; }
.cm-aviso > div p { margin-bottom: 0; }
.cm-av-azul { background: var(--cbl); }
.cm-av-azul svg { stroke: var(--cb); }
.cm-av-verde { background: var(--cgb); }
.cm-av-verde svg { stroke: var(--cgm); }
.cm-av-rojo { background: var(--cpk); }
.cm-av-rojo svg { stroke: var(--cr); }
.cm-av-gris { background: #f8f9fb; border: 1px solid #e4e8ef; }
.cm-av-gris svg { stroke: var(--cn); fill: none; }

/* ─── LISTAS ─── */
.cm-lista { list-style: none; margin: 11px 0; }
.cm-lista li { display: block; font-size: 0.85rem; font-weight: 300; color: #3d3d50; line-height: 1.68; padding: 6px 0 6px 20px; border-bottom: 1px solid rgba(15,26,53,0.05); position: relative; }
.cm-lista li:last-child { border-bottom: none; }
.cm-lista li::before { content: '—'; position: absolute; left: 0; top: 6px; font-size: 0.72rem; color: var(--cb); font-weight: 400; }

/* Lista numerada para Anexo */
.cm-lista-num { list-style: none; margin: 14px 0; counter-reset: item; }
.cm-lista-num > li { display: block; font-size: 0.85rem; font-weight: 300; color: #3d3d50; line-height: 1.68; padding: 10px 0 10px 32px; border-bottom: 1px solid rgba(15,26,53,0.05); position: relative; counter-increment: item; }
.cm-lista-num > li:last-child { border-bottom: none; }
.cm-lista-num > li::before { content: counter(item) "."; position: absolute; left: 0; top: 10px; font-size: 0.78rem; font-weight: 600; color: var(--cb); width: 24px; }
.cm-lista-num .cm-lista-sub { list-style: none; margin: 8px 0 4px 8px; }
.cm-lista-num .cm-lista-sub li { font-size: 0.82rem; padding: 4px 0 4px 16px; border: none; }
.cm-lista-num .cm-lista-sub li::before { content: '·'; color: var(--cgm); font-size: 1rem; top: 2px; }

/* ─── COLUMNAS ─── */
.cm-tres-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 13px 0; }
.cm-dos-cols { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin: 13px 0; }
.cm-tcol { border-radius: 13px; padding: 18px 15px; border: 1px solid transparent; }
.cm-tcol svg { width: 26px; height: 26px; margin-bottom: 10px; display: block; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cm-tcol strong { display: block; font-size: 0.82rem; font-weight: 600; color: var(--cn); margin-bottom: 5px; }
.cm-tcol p { font-size: 0.77rem; font-weight: 300; color: #505060; line-height: 1.57; }
.cm-tcol-azul { background: var(--cbl); }
.cm-tcol-azul svg { stroke: var(--cb); }
.cm-tcol-verde { background: var(--cgb); }
.cm-tcol-verde svg { stroke: var(--cg); }
.cm-tcol-amarillo { background: var(--cy); }
.cm-tcol-amarillo svg { stroke: #7a6a00; }

/* ─── VALORES ─── */
.cm-valores { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 12px 0; }
.cm-valor-card { background: #fff; border: 1px solid var(--cgr); border-radius: 13px; padding: 16px 14px; }
.cm-valor-card svg { width: 24px; height: 24px; margin-bottom: 10px; display: block; stroke: var(--cb); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cm-valor-card strong { display: block; font-size: 0.82rem; font-weight: 600; color: var(--cn); margin-bottom: 5px; }
.cm-valor-card p { font-size: 0.76rem; font-weight: 300; color: #555; line-height: 1.57; }

/* ─── GLOSARIO ─── */
.ce-glosario-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 16px 0; }
.ce-glos-item { background: #f8f9fb; border: 1px solid var(--cgr); border-radius: 10px; padding: 14px 16px; }
.ce-glos-term { font-size: 0.84rem; font-weight: 600; color: var(--cn); margin-bottom: 5px; }
.ce-glos-def { font-size: 0.8rem; font-weight: 300; color: #555; line-height: 1.6; }

/* ─── FIRMA DIRECTOR ─── */
.ce-firma { margin-top: 28px; padding-top: 20px; }
.ce-firma-nombre { font-size: 0.92rem; font-weight: 600; color: var(--cn); }
.ce-firma-cargo { font-size: 0.78rem; font-weight: 300; color: var(--cgw); margin-top: 3px; }

/* ─── PRINCIPIOS ─── */
.ce-principios-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin: 20px 0; }
.ce-principio-card { background: #f8f9fb; border: 1px solid var(--cgr); border-radius: 12px; padding: 18px; font-size: 0.84rem; line-height: 1.65; color: #3d3d50; }
.ce-principio-tit { font-size: 0.88rem; font-weight: 600; color: var(--cn); margin-bottom: 10px; }
.ce-principio-card p { margin: 0; }

/* ─── RELACIÓN CON TERCEROS ─── */
.ce-dos-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.ce-rel-card { background: #f8f9fb; border: 1px solid var(--cgr); border-radius: 12px; padding: 18px; font-size: 0.84rem; line-height: 1.65; color: #3d3d50; }
.ce-rel-card-tit { font-size: 0.88rem; font-weight: 600; color: var(--cn); margin-bottom: 10px; }
.ce-rel-card p { margin: 0; }
.ce-subtemas-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 18px 0; }
.ce-subtemas-grid .cm-aviso { margin: 0; }
.ce-subtemas-grid .cm-aviso { flex-direction: column; gap: 6px; }

/* ─── PROCESO DENUNCIA ─── */
.ce-proceso-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 20px 0; }
.ce-proceso-card { background: #f8f9fb; border: 1px solid var(--cgr); border-radius: 12px; padding: 16px; font-size: 0.83rem; line-height: 1.65; color: #3d3d50; }
.ce-proceso-num { width: 28px; height: 28px; background: var(--cb); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; margin-bottom: 10px; }
.ce-proceso-tit { font-size: 0.86rem; font-weight: 600; color: var(--cn); margin-bottom: 8px; }
.ce-proceso-card p { margin: 0; }

/* ─── CANAL DENUNCIA ─── */
.cm-contacto-bloque { background: var(--cg); border-radius: 16px; padding: 22px 20px; margin: 16px 0; }
.cm-contacto-titulo { font-size: 0.88rem; font-weight: 600; color: var(--cw); margin-bottom: 4px; }
.cm-contacto-sub { font-size: 0.78rem; font-weight: 300; color: rgba(255,255,255,0.55); margin-bottom: 18px; line-height: 1.55; }
.cm-contacto-fila { display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; font-weight: 300; color: rgba(255,255,255,0.75); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cm-contacto-fila:last-child { border-bottom: none; }
.cm-contacto-fila svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; stroke: rgba(255,255,255,0.4); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cm-contacto-fila a { color: var(--cy); text-decoration: none; font-weight: 500; }

/* ─── CONFIRMACIÓN DE LECTURA ─── */
.cm-confirm { background: #fff; border: 1px solid var(--cgr); border-radius: 20px; padding: 48px 50px 56px; margin-bottom: 28px; }
.cm-confirm-inner { max-width: 680px; }
.cm-frm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.cm-frm-col { display: flex; flex-direction: column; gap: 4px; }
.cm-lbl { font-size: 0.67rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cn); }
.cm-input { background: #f5f6fa; border: 1.5px solid var(--cgr); border-radius: 9px; padding: 10px 13px; font-family: 'Host Grotesk',sans-serif; font-size: 0.88rem; font-weight: 300; color: var(--cn); outline: none; transition: border-color 200ms, box-shadow 200ms; width: 100%; }
.cm-input:focus { border-color: var(--cb); box-shadow: 0 0 0 3px rgba(49,86,172,0.09); }
.cm-input::placeholder { color: var(--cgw); }
.cm-check-row { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; background: #f5f6fa; border-radius: 10px; cursor: pointer; margin-bottom: 14px; }
.cm-chkbox { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--cb); cursor: pointer; flex-shrink: 0; }
.cm-chk-lbl { font-size: 0.82rem; font-weight: 300; color: var(--cn); line-height: 1.62; cursor: pointer; }
.cm-chk-lbl strong { font-weight: 600; }
.cm-btn { display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--cn); color: var(--cw); border: none; border-radius: 10px; padding: 13px 24px; font-family: 'Host Grotesk',sans-serif; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 250ms, transform 180ms; width: 100%; letter-spacing: 0.01em; }
.cm-btn:hover { background: var(--cb); transform: translateY(-2px); }
.cm-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.cm-ok-marca { width: 50px; height: 50px; background: var(--cgb); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.cm-ok-marca svg { width: 22px; height: 22px; stroke: var(--cgm); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cm-ok-tit { font-size: 1.1rem; font-weight: 600; color: var(--cg); margin-bottom: 7px; }
.cm-ok-sub { font-size: 0.85rem; font-weight: 300; color: var(--cgw); line-height: 1.6; max-width: 420px; margin: 0 auto; }

/* ─── REVEAL ─── */
.cm-reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.cm-reveal.cm-vis { opacity: 1; transform: none; }

/* ─── RESPONSIVE ─── */
@media (max-width: 880px) {
  .ce-page { padding: 20px 16px 60px; }
  .cm-sec, .cm-sec-inv { grid-template-columns: 1fr; }
  .cm-sec-foto { min-height: 220px; }
  .cm-sec-inv .cm-sec-foto { order: -1; }
  .cm-sec-cuerpo { padding: 26px 22px; }
  .cm-tres-cols, .cm-valores { grid-template-columns: 1fr 1fr; }
  .cm-indice { padding: 24px 22px; }
  .cm-portada-cuerpo { padding: 32px 26px; }
  .cm-confirm { padding: 30px 22px; }
  .cm-frm-grid { grid-template-columns: 1fr; }
  .ce-glosario-grid, .ce-dos-cards, .ce-principios-grid, .ce-subtemas-grid { grid-template-columns: 1fr; }
  .ce-proceso-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .cm-portada-h1 { font-size: 2rem; }
  .cm-h2 { font-size: 1.3rem; }
  .cm-tres-cols, .cm-valores { grid-template-columns: 1fr; }
  .ce-proceso-grid { grid-template-columns: 1fr; }
}

/* ─── FORCE WHITE BACKGROUNDS ─── */
.cm-sec, .cm-sec-inv, .cm-indice, .cm-confirm { background: #ffffff !important; }