/* Centinela: página de portafolio. CSS nativo, sin dependencias externas (ni fuentes, ni CDN, ni scripts).
   Un solo acento (esmeralda de la marca), un radio (10px), tema automático claro/oscuro. */

:root {
  --fondo: #f6f8f7;
  --superficie: #ffffff;
  --superficie-2: #eef2f0;
  --texto: #0f1714;
  --texto-2: #46534e;
  --texto-3: #5f6c67;
  --linea: #d8e0dc;
  --acento: #007854;          /* esmeralda oscurecido: AA también sobre --acento-suave */
  --acento-suave: #e3f4ec;
  --peligro: #a3341f;
  --peligro-suave: #fbeae6;
  --radio: 10px;
  --ancho: 1120px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #08100d;
    --superficie: #0e1814;
    --superficie-2: #13201b;
    --texto: #e3f2ea;
    --texto-2: #a9bbb2;
    --texto-3: #8a9c93;
    --linea: #22332b;
    --acento: #2fd99c;        /* cercano al #01CF91 de la marca, legible sobre oscuro */
    --acento-suave: #0f2a20;
    --peligro: #f08a72;
    --peligro-suave: #2c1612;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
q { quotes: "«" "»" "“" "”"; }
:lang(en) q, :lang(en) .pieza q { quotes: "“" "”" "‘" "’"; }
a { color: var(--acento); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }

.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }

.saltar {
  position: absolute; left: -999px; top: 0.5rem;
  background: var(--superficie); color: var(--texto); padding: 0.5rem 0.9rem; border-radius: var(--radio);
}
.saltar:focus { left: 0.5rem; z-index: 20; }

/* Navegación */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.nav .contenedor { display: flex; align-items: center; gap: 1.5rem; height: 64px; }
.marca { font-weight: 700; letter-spacing: -0.01em; color: var(--texto); text-decoration: none; font-size: 1.05rem; }
.marca span { color: var(--acento); }
.nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav ul a { color: var(--texto-2); text-decoration: none; font-size: 0.95rem; }
.nav ul a:hover { color: var(--texto); }
.idioma {
  font-family: var(--mono); font-size: 0.8rem; color: var(--texto); text-decoration: none;
  border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.2rem 0.55rem;
}
@media (max-width: 720px) { .nav ul { display: none; } .idioma { margin-left: auto; } }

/* Portada */
.portada { padding: 4.5rem 0 4rem; }
.portada .contenedor { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: center; }
.portada h1 {
  font-size: clamp(2rem, 3.7vw, 2.9rem); line-height: 1.08; letter-spacing: -0.025em;
  margin: 0 0 1.1rem; font-weight: 750; text-wrap: balance;
}
.portada h1 em { font-style: normal; color: var(--acento); }
.portada .bajada { font-size: 1.15rem; color: var(--texto-2); max-width: 40ch; margin: 0 0 1.8rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.boton {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  padding: 0.75rem 1.2rem; border-radius: var(--radio); font-weight: 600; text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s;
}
.boton:active { transform: translateY(1px) scale(0.98); }
.boton-principal { background: var(--acento); color: var(--fondo); }
.boton-principal:hover { text-decoration: none; filter: brightness(1.06); }
.boton-secundario { color: var(--texto); border: 1px solid var(--linea); background: var(--superficie); }
.boton-secundario:hover { border-color: var(--texto-3); text-decoration: none; }

/* El caso real de la portada */
.caso {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.25rem; display: grid; gap: 0.9rem;
  box-shadow: 0 18px 50px -28px color-mix(in srgb, var(--acento) 45%, transparent);
}
.caso figcaption { font-size: 0.85rem; color: var(--texto-3); }
.pieza { border-radius: var(--radio); padding: 0.85rem 1rem; font-size: 0.92rem; line-height: 1.5; }
.pieza b { display: block; font-size: 0.78rem; font-weight: 700; margin-bottom: 0.3rem; color: var(--texto-2); }
.pieza q { quotes: "«" "»"; font-family: var(--mono); font-size: 0.86rem; }
.pieza-registro { background: var(--superficie-2); }
.pieza-ingenuo { background: var(--peligro-suave); }
.pieza-ingenuo b { color: var(--peligro); }
.pieza-centinela { background: var(--acento-suave); }
.pieza-centinela b { color: var(--acento); }

/* Secciones */
section { padding: 4.5rem 0; }
section[id] { scroll-margin-top: 64px; }
.seccion-alterna { background: var(--superficie); border-block: 1px solid var(--linea); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 1rem; text-wrap: balance; }
h3 { font-size: 1.15rem; margin: 0 0 0.4rem; letter-spacing: -0.01em; }
.lead { font-size: 1.12rem; color: var(--texto-2); max-width: 62ch; margin: 0 0 2.25rem; }
.etiqueta {
  font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--acento); margin: 0 0 0.8rem;
}
p { max-width: 68ch; }

/* En sencillo: relato en dos columnas de texto */
.relato { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; }
.relato p { margin: 0; color: var(--texto-2); }
.relato p strong { color: var(--texto); }
.regla {
  grid-column: 1 / -1; margin-top: 1rem; padding: 1.25rem 1.4rem;
  border-left: 3px solid var(--acento); background: var(--acento-suave); border-radius: 0 var(--radio) var(--radio) 0;
}
.regla p { color: var(--texto); }

/* Resultados */
.comparacion { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.comparacion > div { padding: 1rem 1.2rem; border-top: 1px solid var(--linea); }
.comparacion > .cab { border-top: 0; font-size: 0.85rem; color: var(--texto-3); font-weight: 600; background: var(--superficie-2); }
.comparacion .cifra { font-family: var(--mono); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.comparacion .bien { color: var(--acento); }
.comparacion .mal { color: var(--peligro); }
.comparacion .que { color: var(--texto-2); font-size: 0.95rem; }
.comparacion .que small { display: block; color: var(--texto-3); font-size: 0.82rem; }
.honesto { margin-top: 1.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; }
.honesto p { margin: 0; color: var(--texto-2); }
.honesto h3 { color: var(--texto); }
.costo { font-family: var(--mono); color: var(--texto); }

/* Cómo funciona */
.flujo { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.diagrama { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; }
.diagrama figcaption { font-size: 0.85rem; color: var(--texto-3); margin-top: 0.6rem; }
.d-caja { fill: var(--superficie); stroke: var(--linea); stroke-width: 1; }
.d-origen { fill: var(--superficie-2); }
.d-fija { fill: var(--acento-suave); stroke: var(--acento); }
.d-titulo { font-family: var(--sans); font-size: 16px; font-weight: 600; fill: var(--texto); text-anchor: middle; }
.d-sub { font-family: var(--sans); font-size: 13px; fill: var(--texto-3); text-anchor: middle; }
.captura a { display: block; }
.captura a:hover img { border-color: var(--acento); }
.d-linea line { stroke: var(--texto-3); stroke-width: 1.5; }
.d-punta { fill: var(--texto-3); }
.principios { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; counter-reset: p; }
.principios li { padding-left: 2.6rem; position: relative; }
.principios li::before {
  counter-increment: p; content: counter(p); position: absolute; left: 0; top: 0.1rem;
  width: 1.75rem; height: 1.75rem; border-radius: var(--radio); display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.85rem; color: var(--acento); border: 1px solid var(--linea);
}
.principios p { margin: 0; color: var(--texto-2); }

/* Fase 1 */
.fase1 { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: center; }
.cifras-f1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 0; }
.cifras-f1 div { border-top: 2px solid var(--acento); padding-top: 0.6rem; }
.cifras-f1 strong { display: block; font-family: var(--mono); font-size: 1.6rem; letter-spacing: -0.02em; }
.cifras-f1 span { color: var(--texto-2); font-size: 0.9rem; }
.captura { margin: 0; }
.captura img { border-radius: var(--radio); border: 1px solid var(--linea); }
.captura figcaption { font-size: 0.85rem; color: var(--texto-3); margin-top: 0.6rem; }

/* Lo que el sistema paró: línea de tiempo */
.tiempo { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1.6rem; max-width: 820px; }
.tiempo::before { content: ""; position: absolute; left: 0.45rem; top: 0.4rem; bottom: 0.4rem; width: 1px; background: var(--linea); }
.tiempo li { position: relative; padding-left: 2.2rem; }
.tiempo li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.5rem; width: 0.65rem; height: 0.65rem;
  border-radius: 50%; background: var(--fondo); border: 2px solid var(--acento);
}
.tiempo p { margin: 0; color: var(--texto-2); }

/* Límites */
details { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); max-width: 820px; }
details + details { margin-top: 0.75rem; }
summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; list-style-position: inside; }
details > div { padding: 0 1.2rem 1.1rem; color: var(--texto-2); }
details ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }

/* Evidencia y pie */
.evidencia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 820px; }
.evidencia a {
  display: block; padding: 1.1rem 1.2rem; border: 1px solid var(--linea); border-radius: var(--radio);
  text-decoration: none; color: var(--texto); background: var(--superficie);
  transition: border-color 0.2s, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.evidencia a:hover { border-color: var(--acento); transform: translateY(-2px); }
.evidencia a span { display: block; color: var(--texto-2); font-size: 0.92rem; margin-top: 0.2rem; }
.nota-codigo { color: var(--texto-3); font-size: 0.92rem; margin-top: 1.25rem; }
footer { padding: 2.5rem 0 3rem; border-top: 1px solid var(--linea); color: var(--texto-3); font-size: 0.9rem; }
footer p { margin: 0.25rem 0; }
footer .contacto { margin: 1rem 0 1.25rem; }

/* Aparición al entrar en pantalla: solo con soporte y sin movimiento reducido */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .aparece { animation: aparecer linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  }
  .portada .contenedor > * { animation: entrar 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .portada .contenedor > *:nth-child(2) { animation-delay: 0.12s; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Móvil */
@media (max-width: 860px) {
  .portada { padding: 2.75rem 0 3rem; }
  .portada .contenedor, .flujo, .fase1, .relato, .honesto { grid-template-columns: 1fr; gap: 2rem; }
  section { padding: 3.25rem 0; }
  .comparacion { grid-template-columns: 1fr 1fr; }
  .comparacion > .que { grid-column: 1 / -1; background: var(--superficie-2); }
  .comparacion > .cab:first-child { display: none; }
  .comparacion .cifra { font-size: 1.1rem; }
  .cifras-f1 { grid-template-columns: 1fr; }
  .evidencia { grid-template-columns: 1fr; }
}