/* ==========================================================
   Big Challenge — Security Cibernetic
   Dirección visual heredada del proyecto anterior (expediente + plataforma).
   Los colores y tipografías están al inicio (:root): cámbialos solo ahí.
   Sin librerías, sin fuentes externas, sin imágenes.
   Este archivo lo usan el sitio principal y el panel de demostración (demo/).
   ========================================================== */

:root {
  /* Colores */
  --marino: #0f2342;
  --marino-2: #0a1a33;       /* franja superior */
  --papel: #f6f3ec;
  --papel-2: #fbfaf6;
  --linea: #d9d4c7;
  --tinta: #1c2430;
  --suave: #4f5864;
  --acero: #2f4f7f;          /* enlaces y controles */
  --ambar-texto: #8a5a00;    /* ámbar para texto sobre papel */
  --ambar: #c98a1b;          /* ámbar solo para líneas y marcas */
  --ambar-claro: #e3b55e;    /* ámbar para texto sobre marino */
  --plataforma: #eaeff6;     /* fondo de la sección de demostración */
  --plataforma-borde: #c9d2e0;
  --vivo: #b3261e;           /* solo para el indicador EN VIVO */

  /* Tipografías (todas del sistema) */
  --serif: Georgia, "Palatino Linotype", Palatino, serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: Consolas, "SFMono-Regular", Menlo, "Courier New", monospace;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
}

h1, h2 { font-family: var(--serif); color: var(--marino); line-height: 1.15; margin: 0 0 0.5em; }
h2 { font-size: clamp(1.7rem, 4.2vw, 2.3rem); font-weight: 700; }
h3, h4 { font-family: var(--sans); color: var(--marino); line-height: 1.3; margin: 0 0 0.4em; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; display: flex; align-items: center; gap: 8px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: 0.3em; }
a { color: var(--acero); }
strong { font-weight: 650; }

:focus-visible { outline: 3px solid var(--acero); outline-offset: 2px; }
.oscuro :focus-visible { outline-color: var(--ambar-claro); }

.contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.saltar {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--papel); color: var(--marino); padding: 8px 12px;
}
.saltar:focus { left: 8px; top: 8px; }

/* Etiqueta pequeña tipo expediente: "SECCIÓN 02", "FIGURA 1"… */
.rotulo {
  display: block; margin: 0 0 0.5em;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave);
}
.rotulo-titulo {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave);
  margin: 0 0 0.8em; padding-bottom: 0.5em; border-bottom: 1px solid var(--linea);
}

/* ---------- Íconos (SVG propios) ---------- */
.ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-grande { width: 28px; height: 28px; }
.ico-si { color: #1d7a46; }
.ico-no { color: #a32727; }

/* ---------- Encabezado fijo ---------- */
.sitio {
  position: sticky; top: -22px; z-index: 50;   /* en celular la franja sube y la barra se queda */
  background: var(--marino); color: var(--papel);
}
.franja {
  height: 22px; padding: 0 12px;
  background: var(--marino-2); color: var(--ambar-claro);
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  line-height: 22px; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.franja .largo { display: none; }

.barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 48px; }

.marca {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--papel); text-decoration: none; font-weight: 700; font-size: 1.05rem; padding: 8px 0;
}
.marca .ico { color: var(--ambar-claro); width: 1.4em; height: 1.4em; }

.boton-menu {
  display: none; align-items: center; gap: 6px;
  background: transparent; color: var(--papel);
  border: 1px solid rgba(246, 243, 236, 0.4); border-radius: 6px;
  padding: 5px 12px; font: inherit; font-size: 0.92rem; cursor: pointer;
}

.menu { display: flex; flex-wrap: wrap; width: 100%; }
.menu a {
  display: flex; align-items: baseline; gap: 8px;
  color: var(--papel); text-decoration: none; font-size: 0.95rem;
  padding: 12px 10px; border-top: 1px solid rgba(246, 243, 236, 0.14); width: 100%;
}
.menu a span { font-family: var(--mono); font-size: 0.72rem; color: var(--ambar-claro); }
.menu a:hover { background: rgba(246, 243, 236, 0.07); }
.menu a.activo { box-shadow: inset 3px 0 0 var(--ambar); background: rgba(246, 243, 236, 0.07); }

/* Con JavaScript activo, el menú se esconde en celular y se abre con el botón */
.js .boton-menu { display: inline-flex; }
.js .menu { display: none; }
.js .menu.abierto { display: flex; }

@media (min-width: 860px) {
  .sitio { top: 0; }
  .franja .corto { display: none; }
  .franja .largo { display: inline; }
  .js .boton-menu { display: none; }
  .barra { min-height: 56px; flex-wrap: nowrap; }
  .js .menu, .menu { display: flex; flex-wrap: nowrap; width: auto; gap: 22px; }
  .menu a {
    width: auto; border-top: 0; padding: 19px 2px 16px;
    border-bottom: 3px solid transparent; font-size: 0.92rem;
  }
  .menu a:hover { background: transparent; border-bottom-color: rgba(246, 243, 236, 0.35); }
  .menu a.activo { box-shadow: none; background: transparent; border-bottom-color: var(--ambar); }
}

/* Para que el encabezado fijo no tape los títulos al navegar */
section[id] { scroll-margin-top: 64px; }
@media (min-width: 860px) { section[id] { scroll-margin-top: 84px; } }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; font-family: var(--sans); font-weight: 650; font-size: 1rem;
  padding: 12px 22px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
}
.boton-papel { background: var(--papel); color: var(--marino); }
.boton-papel:hover { background: #fff; }
.boton-marino { background: var(--marino); color: var(--papel); }
.boton-marino:hover { background: var(--acero); }

/* ---------- 01. Portada ---------- */
.portada { background: var(--marino); color: var(--papel); padding: 40px 0 28px; }
.portada h1 { color: var(--papel); font-size: clamp(2.1rem, 6.4vw, 3.5rem); margin-bottom: 0.15em; letter-spacing: -0.01em; }
.portada .rotulo { color: var(--ambar-claro); }
.portada-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.subtitulo-portada { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: #c9d3e3; margin-bottom: 1em; }
.portada-intro { max-width: 540px; font-size: 1.08rem; color: #e1e7f0; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 1.5em 0 1.2em; }
.enlace-claro { color: var(--papel); text-underline-offset: 4px; }
.enlace-claro:hover { color: var(--ambar-claro); }
.portada-aviso {
  font-size: 0.9rem; color: #c9d3e3; margin: 0;
  padding-left: 12px; border-left: 3px solid var(--ambar);
}

/* Ficha del proceso (hoja color papel) */
.ficha {
  background: var(--papel); color: var(--tinta);
  border-radius: 4px; padding: 6px 20px 14px; border-top: 4px solid var(--ambar);
}
.ficha-cab { display: flex; justify-content: space-between; padding: 12px 0 6px; }
.ficha-cab .rotulo { margin: 0; }
.pasos-ficha { list-style: none; margin: 0; padding: 0; }
.pasos-ficha li { margin: 0; border-top: 1px solid var(--linea); }
.pasos-ficha a {
  display: grid; grid-template-columns: 36px 28px 1fr 20px; gap: 12px; align-items: center;
  padding: 14px 0; text-decoration: none; color: var(--marino);
}
.pasos-ficha a:hover .paso-texto strong { text-decoration: underline; text-underline-offset: 3px; }
.pasos-ficha a:hover .flecha { transform: translateX(3px); }
.paso-num { font-family: var(--serif); font-size: 1.5rem; color: var(--ambar-texto); }
.paso-texto strong { display: block; font-size: 1.1rem; }
.paso-texto small { display: block; color: var(--suave); font-size: 0.88rem; line-height: 1.35; }
.flecha { color: var(--acero); transition: transform 0.15s; }
.ficha-pie {
  margin: 0; padding-top: 12px; border-top: 1px solid var(--linea);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--suave);
}

.pregunta-guia {
  margin: 32px 0 0; padding-top: 16px; border-top: 1px solid rgba(246, 243, 236, 0.22);
  font-family: var(--serif); font-size: 1.05rem; color: #e1e7f0; max-width: 780px;
}
.pregunta-guia .rotulo { margin-bottom: 0.3em; }

@media (min-width: 920px) {
  .portada { padding: 56px 0 32px; }
  .portada-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
}

/* ---------- Secciones ---------- */
.seccion { padding: 48px 0; border-top: 1px solid var(--linea); }
.fondo-papel { background: var(--papel); }
.fondo-claro { background: var(--papel-2); }
.fondo-plataforma { background: var(--plataforma); border-top-color: var(--plataforma-borde); }
.lead { color: var(--suave); }
.bloque { margin-top: 2.2em; }
.nota-pie { font-size: 0.88rem; color: var(--suave); }

@media (min-width: 920px) { .seccion { padding: 72px 0; } }

/* ---------- 02. Editorial: título a la izquierda, explicaciones a la derecha ---------- */
.editorial { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 920px) {
  .editorial { grid-template-columns: 300px minmax(0, 1fr); gap: 64px; }
  .editorial-lado { position: sticky; top: 100px; align-self: start; }
}

.fila { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 18px 0; border-top: 1px solid var(--linea); }
.fila:first-child { border-top: 2px solid var(--marino); }
.fila-num { font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; color: var(--ambar-texto); }
.fila p { margin: 0; }
.fila p + p { margin-top: 0.7em; }

.lista-ico { list-style: none; margin: 0; padding: 0; }
.lista-ico li { margin: 0; padding: 8px 0; border-top: 1px solid var(--linea); font-size: 0.97rem; }

.alcance { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .alcance { grid-template-columns: 1fr 1fr; gap: 32px; } }

.referencias { margin-top: 2em; font-size: 0.88rem; color: var(--suave); border-top: 1px solid var(--linea); padding-top: 1em; }
.referencias .rotulo { margin-bottom: 0.2em; }

/* ---------- Tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--linea); }
.tabla thead th {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--suave); border-bottom: 2px solid var(--marino);
}
.tabla tbody th { font-weight: 650; color: var(--marino); padding-right: 18px; }

/* Tablas de 3 columnas: en celular se convierten en bloques apilados */
@media (max-width: 679px) {
  .tabla-apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-apilable, .tabla-apilable tbody, .tabla-apilable tr, .tabla-apilable th, .tabla-apilable td { display: block; width: 100%; }
  .tabla-apilable tr { padding: 10px 0; border-bottom: 1px solid var(--linea); }
  .tabla-apilable th, .tabla-apilable td { border: 0; padding: 2px 0; }
  .tabla-apilable tbody th { font-size: 1.02rem; margin-bottom: 4px; }
  .tabla-apilable td::before {
    content: attr(data-etiqueta); display: block;
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave);
  }
  .tabla-apilable td { padding-bottom: 6px; }
}

/* Etiqueta de estado dentro de tablas: Implementada / Planeada / Por evaluar */
.tag {
  display: inline-block; padding: 1px 8px; border: 1px solid var(--linea); border-radius: 4px;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--suave); background: #fff; white-space: nowrap;
}
.tag-hecho { border-color: #1d7a46; color: #1d5c38; background: #eef8f1; }
.tag-plan { border-color: var(--ambar); color: var(--ambar-texto); background: #fff7e3; }
/* Dentro de tablas, una etiqueta larga puede pasar a dos líneas en pantallas angostas en lugar de salirse */
.tabla .tag { white-space: normal; }

/* ---------- 03. Propuesta ---------- */
.encabezado-seccion { max-width: 720px; margin-bottom: 2em; }
.dos-col { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.dos-col p:last-child { margin-bottom: 0; }
@media (min-width: 720px) { .dos-col { grid-template-columns: 1fr 1fr; gap: 40px; } }

.figura { margin: 0; }
.figura figcaption { font-size: 0.95rem; margin: 0 0 14px; color: var(--marino); }
.figura-nota { font-size: 0.84rem; color: var(--suave); margin: 12px 0 0; }

/* Diagrama de flujo: vertical en celular, horizontal en computadora */
.flujo { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); }
.flujo li {
  position: relative; margin: 0; padding: 14px 16px 16px;
  background: #fff; border: 1px solid var(--linea); border-top: 3px solid var(--marino);
}
.flujo-num { display: block; font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ambar-texto); }
.flujo strong { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--marino); margin: 2px 0 6px; }
.flujo p { margin: 0; font-size: 0.9rem; color: var(--suave); line-height: 1.45; }
.flujo li:not(:last-child)::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border-right: 2px solid var(--ambar); border-bottom: 2px solid var(--ambar);
  left: 50%; bottom: -20px; transform: translateX(-50%) rotate(45deg);
}
@media (min-width: 860px) {
  .flujo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .flujo li:not(:last-child)::after {
    left: auto; bottom: auto; right: -21px; top: 50%; transform: translateY(-50%) rotate(-45deg);
  }
}

/* ---------- 04. Demostración (resumen en el sitio principal) ---------- */
.instrumento {
  background: #fff; border: 1px solid var(--plataforma-borde); border-radius: 10px; overflow: hidden;
}
.instrumento-cab {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: var(--marino); color: var(--papel); padding: 20px 20px 18px;
}
.instrumento-cab :is(h1, h2) { color: var(--papel); font-size: clamp(1.4rem, 4vw, 1.9rem); margin: 0; }
.instrumento-cab .rotulo { color: var(--ambar-claro); }
.estado {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  background: rgba(246, 243, 236, 0.1); border: 1px solid rgba(246, 243, 236, 0.28);
  border-radius: 999px; padding: 4px 12px; font-size: 0.82rem; font-weight: 600;
}
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ambar-claro); }

.instrumento-meta {
  display: grid; grid-template-columns: 1fr 1fr; margin: 0;
  background: #f4f7fb; border-bottom: 1px solid var(--plataforma-borde);
}
.instrumento-meta div { padding: 12px 20px; border-top: 1px solid var(--plataforma-borde); }
.instrumento-meta div:nth-child(-n+2) { border-top: 0; }
.instrumento-meta div:nth-child(even) { border-left: 1px solid var(--plataforma-borde); }
.instrumento-meta dt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.instrumento-meta dd { margin: 0; font-weight: 650; color: var(--marino); }

.instrumento-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); }
.instrumento-cuerpo > div { padding: 20px; }
.instrumento-cuerpo > div + div { border-top: 1px solid var(--plataforma-borde); }
.instrumento-cuerpo h3 { font-size: 1rem; margin-top: 0; }

.lista-pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0 0 1.4em; }
.lista-pasos li { counter-increment: paso; display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px; }
.lista-pasos li::before {
  content: counter(paso); flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--marino); color: var(--papel); font-size: 0.82rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}

@media (min-width: 920px) {
  .instrumento-meta { grid-template-columns: repeat(4, 1fr); }
  .instrumento-meta div { border-top: 0 !important; padding: 14px 24px; }
  .instrumento-meta div + div { border-left: 1px solid var(--plataforma-borde) !important; }
  .instrumento-cuerpo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .instrumento-cuerpo > div { padding: 28px; }
  .instrumento-cuerpo > div + div { border-top: 0; border-left: 1px solid var(--plataforma-borde); }
  .instrumento-cab { padding: 24px 28px 20px; }
}

.acceso { margin-top: 2em; }
.acceso .tabla { background: #fff; }

/* Sello de aviso (datos ficticios, función pendiente…) */
.sello {
  margin: 0; padding: 12px 14px; background: #fff7e3; color: #5a3a00;
  border: 2px solid var(--ambar); border-radius: 4px; font-size: 0.95rem;
}
.sello strong { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.sello span { display: block; margin-top: 4px; font-size: 0.84rem; color: #6b4a10; }

/* ---------- 05. Ficha de investigación ---------- */
.expediente { background: #fff; border: 1px solid var(--linea); border-top: 4px solid var(--marino); padding: 22px 18px 28px; }
.expediente-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.expediente-cab h2 { margin-bottom: 0.1em; }
.etiqueta-estado {
  margin: 0; padding: 3px 10px; border: 1px solid var(--ambar); border-radius: 4px;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ambar-texto); background: #fff7e3;
}
.expediente-aviso { color: var(--suave); font-size: 0.92rem; margin-bottom: 1.4em; }

.campos { margin: 0; border-top: 2px solid var(--marino); }
.campo { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid var(--linea); }
.campo dt { font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--marino); }
.campo dt small { display: block; font-weight: 400; color: var(--ambar-texto); text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 0.8rem; }
.campo dd { margin: 0; }

.objetivos, .dos-tablas { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); margin-top: 2em; }
.objetivos p { margin: 0; }
.lista-num { margin: 0; }

.metodologia { list-style: none; counter-reset: met; margin: 0; padding: 0; }
.metodologia li {
  counter-increment: met; position: relative; margin: 0; padding: 0 0 18px 44px;
  border-left: 2px solid var(--linea); margin-left: 13px; font-size: 0.97rem;
}
.metodologia li:last-child { border-left-color: transparent; padding-bottom: 0; }
.metodologia li::before {
  content: counter(met); position: absolute; left: -15px; top: -2px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--marino); color: var(--papel);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
}

.cierre { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); margin-top: 2.4em; }
.cierre p, .cierre ul { margin-bottom: 0; font-size: 0.97rem; }

.abstract { margin-top: 2.4em; padding: 14px 16px; border: 1px solid var(--linea); border-left: 4px solid var(--ambar); background: var(--papel-2); }
.abstract p:last-child { margin: 0; font-size: 0.95rem; }

@media (min-width: 720px) {
  .expediente { padding: 32px 36px 36px; }
  .campo { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 16px 0; }
  .objetivos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .dos-tablas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .cierre { grid-template-columns: 1fr 1fr; gap: 28px 40px; }
}
@media (min-width: 920px) {
  /* En computadora la metodología es una línea horizontal de 6 pasos */
  .metodologia { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .metodologia li { border-left: 0; margin-left: 0; padding: 40px 0 0; border-top: 2px solid var(--linea); font-size: 0.9rem; }
  .metodologia li:last-child { border-top-color: var(--linea); padding-bottom: 0; }
  .metodologia li::before { left: 0; top: -15px; }
}

/* ---------- Pie ---------- */
.pie { background: var(--marino); color: #cfd8e6; padding: 28px 0; font-size: 0.9rem; }
.pie p { margin: 0 0 0.4em; }
.pie strong { color: var(--papel); }

/* ---------- Menos movimiento si el visitante lo prefiere ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flecha { transition: none; }
}