/* =============================================================
   Inspector de Imagen — Herramentia
   Familia visual heredada de herramentia.com / transcriptor,
   con tratamiento actualizado: marca propia, retícula, HUD.
   ============================================================= */

/* -------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------- */
:root {
  --color-bg: #18181b;
  --color-bg-deep: #101012;
  --color-surface: #1d1d20;
  --color-surface-alt: #232326;
  --color-surface-hi: #2a2a2e;
  --color-text-primary: #ffffff;
  --color-text-secondary: #a1a1aa;
  --color-text-dim: #71717a;
  --color-border: #3f3f46;
  --color-border-soft: #2c2c31;
  --color-primary: #fef08a;
  --color-primary-hover: #fde047;
  --color-primary-text: #0b0b0d;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #60a5fa;

  --glow-primary: 0 0 0 1px rgba(254,240,138,.14), 0 0 32px -8px rgba(254,240,138,.28);
  --hairline: linear-gradient(90deg, transparent, var(--color-border) 18%, var(--color-border) 82%, transparent);

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
}

/* -------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
}

/* retícula + halo de fondo, solo CSS */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 78%);
}
body::after {
  content: "";
  position: fixed; top: -220px; left: 50%; transform: translateX(-50%);
  width: min(1100px, 130vw); height: 620px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(254,240,138,.075), transparent 68%);
}

img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: var(--color-primary); }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .6rem 1rem; border-radius: 8px; font-weight: 600;
  background: var(--color-primary); color: var(--color-primary-text);
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* etiqueta mono reutilizable */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-text-dim);
}

/* -------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------- */
.container { max-width: 900px; margin: 0 auto; padding: 20px; }

.header { text-align: center; margin-top: 18px; margin-bottom: 30px; }

.back-to-hub {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600;
  color: var(--color-text-secondary); text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 999px; padding: 5px 13px; margin-bottom: 22px;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.back-to-hub:hover {
  color: var(--color-primary); border-color: var(--color-primary);
  box-shadow: 0 0 20px -6px rgba(254,240,138,.4);
}

/* --- marca --- */
.brand-mark { width: 74px; height: 74px; margin: 0 auto 14px; filter: drop-shadow(0 0 18px rgba(254,240,138,.28)); }
.brand-mark svg { width: 100%; height: 100%; overflow: visible; }
.mark-ring { transform-origin: 32px 32px; animation: markSpin 26s linear infinite; }
.mark-scan { animation: markScan 3.6s var(--ease-out) infinite; }
@keyframes markSpin { to { transform: rotate(360deg); } }
@keyframes markScan { 0%,100% { transform: translateY(-13px); } 50% { transform: translateY(13px); } }

.header h1 {
  font-size: clamp(2.05rem, 6.5vw, 3rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
  margin-bottom: 12px; color: var(--color-primary);
  text-wrap: balance;
}
.header-lead {
  font-size: 1.05rem; color: var(--color-text-secondary);
  max-width: 56ch; margin: 0 auto; text-wrap: balance;
}

/* -------------------------------------------------------------
   4. Esquema de flujo (qué hace, de un vistazo)
   ------------------------------------------------------------- */
.flow {
  margin: 26px auto 0; max-width: 780px;
  display: grid; grid-template-columns: 1fr; gap: 8px;
  align-items: stretch; text-align: left;
}
@media (min-width: 760px) {
  .flow { grid-template-columns: 1fr auto 1.35fr auto 1fr; gap: 0; align-items: center; }
}

.flow-node {
  position: relative;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0));
  padding: 13px 15px;
  display: flex; flex-direction: column; gap: 3px;
}
.flow-node .flow-k { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-dim); }
.flow-node .flow-v { font-size: .875rem; font-weight: 600; line-height: 1.35; }
.flow-node .flow-v em { font-style: normal; color: var(--color-text-secondary); font-weight: 400; }

.flow-node-core {
  border-color: rgba(254,240,138,.34);
  background: linear-gradient(180deg, rgba(254,240,138,.07), rgba(254,240,138,.015));
  box-shadow: var(--glow-primary);
}
.flow-node-core .flow-k { color: var(--color-primary); }

.flow-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-border);
  padding: 2px 0;
}
.flow-arrow svg { width: 22px; height: 22px; }
@media (min-width: 760px) { .flow-arrow { padding: 0 10px; } .flow-arrow svg { width: 34px; height: 18px; } }

/* -------------------------------------------------------------
   5. Herramienta
   ------------------------------------------------------------- */
.panel {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-lg);
  padding: 28px;
  margin-bottom: 26px;
  box-shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 20px 50px -34px rgba(0,0,0,.9);
}
@media (max-width: 600px) { .panel { padding: 20px; border-radius: var(--r-md); } }

/* esquinas HUD */
.hud::before, .hud::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 1px solid rgba(254,240,138,.4);
}
.hud::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: var(--r-lg) 0 0 0; }
.hud::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 var(--r-lg) 0; }

.tool-section { }
.panel-head {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: baseline; justify-content: space-between;
  margin-bottom: 18px;
}
.panel-head h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; }
.panel-head .badge-privacy {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-success);
  border: 1px solid rgba(16,185,129,.45);
  background: rgba(16,185,129,.08);
  border-radius: 999px; padding: 5px 11px;
}
.badge-privacy .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } }

/* Dropzone */
.file-input-area {
  position: relative; overflow: hidden; display: block;
  border: 1px dashed var(--color-border);
  border-radius: var(--r-md);
  padding: 44px 24px; text-align: center; cursor: pointer;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(254,240,138,.055), transparent 70%),
    var(--color-surface-alt);
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.file-input-area::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; top: 0;
  background: linear-gradient(90deg, transparent, rgba(254,240,138,.5), transparent);
  opacity: 0; transition: opacity .3s;
  animation: sweep 3.4s linear infinite;
}
.file-input-area:hover::after, .file-input-area.is-drag::after { opacity: 1; }
@keyframes sweep { 0% { transform: translateY(0); } 100% { transform: translateY(180px); } }

.file-input-area:hover, .file-input-area.is-drag {
  border-color: var(--color-primary);
  border-style: solid;
  background-color: var(--color-surface-hi);
}
.file-input-area.is-drag { transform: scale(1.005); }
.drop-icon { width: 40px; height: 40px; margin: 0 auto 14px; color: var(--color-primary); opacity: .9; }
.drop-title { font-size: 1.02rem; font-weight: 600; margin-bottom: 6px; }
.drop-hint { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; color: var(--color-text-dim); }
.file-input-area input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Estados */
[data-state] .state { display: none; }
[data-state="idle"] .state-idle { display: block; }
[data-state="working"] .state-working { display: block; }
[data-state="done"] .state-done { display: block; }
[data-state="error"] .state-error { display: block; }

.working-box { text-align: center; padding: 32px 10px; }
.working-label { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--color-text-secondary); margin-bottom: 16px; }
.progress-track { height: 6px; border-radius: 999px; background: var(--color-surface-alt); overflow: hidden; border: 1px solid var(--color-border-soft); }
.progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, rgba(254,240,138,.55), var(--color-primary));
  box-shadow: 0 0 14px rgba(254,240,138,.5);
  transition: width .25s var(--ease-out);
}

.error-box {
  border: 1px solid rgba(239,68,68,.5); background: rgba(239,68,68,.07);
  border-radius: var(--r-md); padding: 18px 20px;
}
.error-box h3 { color: var(--color-error); font-size: .98rem; margin-bottom: 6px; }
.error-box p { font-size: .9rem; color: var(--color-text-secondary); }

/* -------------------------------------------------------------
   6. Resultados
   ------------------------------------------------------------- */
.result-head {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--color-border-soft);
}
.result-thumb {
  width: 128px; height: 128px; flex: none;
  border-radius: var(--r-sm); border: 1px solid var(--color-border-soft);
  background: var(--color-bg-deep); object-fit: contain;
}
.result-head-info { flex: 1 1 260px; min-width: 0; }
.result-filename { font-family: var(--font-mono); font-size: .92rem; font-weight: 600; word-break: break-all; margin-bottom: 7px; }
.result-sub { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .03em; color: var(--color-text-dim); }

.verdict {
  border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 22px;
  border: 1px solid var(--color-border-soft); background: var(--color-surface-alt);
}
.verdict h3 { font-size: .95rem; margin-bottom: 8px; }
.verdict p { font-size: .88rem; color: var(--color-text-secondary); }
.verdict.has-data { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.06); }
.verdict.has-data h3 { color: var(--color-success); }
.verdict.no-data { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.06); }
.verdict.no-data h3 { color: var(--color-warning); }

.findings { display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
.finding {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  border: 1px solid var(--color-border-soft); border-radius: var(--r-sm);
  padding: 13px 15px; background: var(--color-surface-alt);
}
.finding::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; }
.finding .f-icon { width: 22px; height: 22px; margin-top: 1px; color: var(--color-text-dim); }
.finding .f-icon svg { width: 22px; height: 22px; }
.finding.lvl-flag .f-icon { color: var(--color-warning); }
.finding.lvl-info .f-icon { color: var(--color-info); }
.finding.lvl-ok   .f-icon { color: var(--color-success); }
.finding .f-title { font-size: .9rem; font-weight: 600; margin-bottom: 3px; }
.finding .f-body { font-size: .84rem; color: var(--color-text-secondary); }
.finding.lvl-flag::before { background: var(--color-warning); box-shadow: 0 0 12px rgba(245,158,11,.6); }
.finding.lvl-info::before { background: var(--color-info); box-shadow: 0 0 12px rgba(96,165,250,.5); }
.finding.lvl-ok::before   { background: var(--color-success); box-shadow: 0 0 12px rgba(16,185,129,.5); }

.cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  position: relative;
  border: 1px solid var(--color-border-soft); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,0)), var(--color-surface-alt);
  padding: 16px 18px;
}
.card.card-wide { grid-column: 1 / -1; }
.card h3 {
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--color-text-dim); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.card h3::after { content: ""; flex: 1; height: 1px; background: var(--color-border-soft); }
.card .empty { font-size: .84rem; color: var(--color-text-dim); font-style: italic; }

dl.kv { display: grid; grid-template-columns: minmax(0,auto) minmax(0,1fr); gap: 6px 14px; font-size: .85rem; }
dl.kv dt { color: var(--color-text-secondary); white-space: nowrap; }
dl.kv dd { font-family: var(--font-mono); font-size: .8rem; word-break: break-word; font-variant-numeric: tabular-nums; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .06em;
  border: 1px solid var(--color-border-soft); border-radius: 6px;
  padding: 3px 8px; color: var(--color-text-dim);
}
.tag.on { border-color: rgba(16,185,129,.5); color: var(--color-success); background: rgba(16,185,129,.06); }
.tag.off { opacity: .5; }
.tag.warn { border-color: rgba(245,158,11,.5); color: var(--color-warning); background: rgba(245,158,11,.06); }

.gps-coords {
  font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--color-primary); margin-bottom: 10px; word-break: break-all;
  text-shadow: 0 0 22px rgba(254,240,138,.35);
}
.gps-note {
  font-size: .8rem; color: var(--color-warning);
  border: 1px solid rgba(245,158,11,.4); background: rgba(245,158,11,.06);
  border-radius: var(--r-sm); padding: 10px 13px; margin: 14px 0;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-sm); padding: 10px 18px;
  font-size: .88rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--color-border); color: var(--color-text-primary);
  transition: .2s var(--ease-out);
}
.btn:hover { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 22px -8px rgba(254,240,138,.55); }
.btn-primary {
  background-color: var(--color-primary); color: var(--color-primary-text); border-color: var(--color-primary);
  box-shadow: 0 0 30px -10px rgba(254,240,138,.7);
}
.btn-primary:hover { background-color: var(--color-primary-hover); color: var(--color-primary-text); }
.btn-ghost { font-size: .83rem; padding: 8px 14px; }

.compare { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare figure { margin: 0; }
.compare figcaption {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em;
  color: var(--color-text-dim); margin-top: 9px; text-align: center;
}
.compare img, .compare canvas {
  width: 100%; height: auto; border-radius: var(--r-sm);
  border: 1px solid var(--color-border-soft); background: var(--color-bg-deep);
  aspect-ratio: 4 / 3; object-fit: contain;
}

.caveat {
  font-size: .8rem; color: var(--color-text-secondary);
  border-left: 2px solid var(--color-warning); padding-left: 12px; margin-top: 14px;
}

.result-actions {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--color-border-soft);
}
.reset-link { font-size: .84rem; color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.reset-link:hover { color: var(--color-primary); }

.limits {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--color-text-dim); text-align: center; margin: -8px 0 34px;
}

/* -------------------------------------------------------------
   7. Propuesta de valor
   ------------------------------------------------------------- */
.value { margin-bottom: 36px; }
.value-head { text-align: center; margin-bottom: 22px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.value-head h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
.value-head p { font-size: .95rem; color: var(--color-text-secondary); max-width: 68ch; text-wrap: balance; }

.value-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px) { .value-grid { grid-template-columns: 1fr 1fr; } }

.value-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--color-border-soft); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--color-surface);
  padding: 20px;
  display: grid; grid-template-columns: 38px 1fr; gap: 15px; align-items: start;
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.value-card:hover { border-color: rgba(254,240,138,.32); transform: translateY(-2px); }
.value-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(340px 130px at 100% 0%, rgba(254,240,138,.075), transparent 70%);
}
.v-ico {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  border: 1px solid rgba(254,240,138,.28); background: rgba(254,240,138,.06);
  display: grid; place-items: center; color: var(--color-primary);
}
.v-ico svg { width: 19px; height: 19px; }
.value-card h3 { font-size: .98rem; font-weight: 700; margin-bottom: 5px; letter-spacing: -.012em; }
.value-card p { font-size: .855rem; color: var(--color-text-secondary); }

/* -------------------------------------------------------------
   8. Qué lee dentro del archivo
   ------------------------------------------------------------- */
.reads { margin-bottom: 36px; }
.reads h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.025em; margin-bottom: 6px; text-align: center; }
.reads .reads-sub { font-size: .93rem; color: var(--color-text-secondary); text-align: center; margin-bottom: 22px; }
.reads-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 620px) { .reads-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .reads-grid { grid-template-columns: repeat(3, 1fr); } }

.read-card {
  border: 1px solid var(--color-border-soft); border-radius: var(--r-md);
  background: var(--color-surface); padding: 17px 18px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .25s var(--ease-out);
}
.read-card:hover { border-color: var(--color-border); }
.read-card .r-tag {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-primary);
}
.read-card h3 { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.read-card p { font-size: .83rem; color: var(--color-text-secondary); }

/* -------------------------------------------------------------
   9. Sí hace / No hace
   ------------------------------------------------------------- */
.does { margin-bottom: 36px; }
.does-head { text-align: center; margin-bottom: 22px; }
.does-head h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.025em; margin-bottom: 6px; }
.does-head p { font-size: .93rem; color: var(--color-text-secondary); max-width: 70ch; margin: 0 auto; text-wrap: balance; }

.does-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .does-grid { grid-template-columns: 1fr 1fr; } }

.does-col {
  border: 1px solid var(--color-border-soft); border-radius: var(--r-md);
  background: var(--color-surface); padding: 22px 22px 20px;
  position: relative; overflow: hidden;
}
.does-col::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.does-col.yes::before { background: linear-gradient(90deg, var(--color-success), transparent); }
.does-col.no::before  { background: linear-gradient(90deg, var(--color-warning), transparent); }

.does-col > .col-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--color-border-soft);
}
.col-head .col-ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; }
.col-head .col-ico svg { width: 15px; height: 15px; }
.does-col.yes .col-ico { background: rgba(16,185,129,.12); color: var(--color-success); border: 1px solid rgba(16,185,129,.4); }
.does-col.no  .col-ico { background: rgba(245,158,11,.12); color: var(--color-warning); border: 1px solid rgba(245,158,11,.4); }
.col-head h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
.does-col.yes .col-head h3 { color: var(--color-success); }
.does-col.no  .col-head h3 { color: var(--color-warning); }

.does-col ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.does-col li { font-size: .875rem; color: var(--color-text-secondary); padding-left: 24px; position: relative; line-height: 1.5; }
.does-col li strong { color: var(--color-text-primary); font-weight: 600; }
.does-col li::before {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: .85rem; font-weight: 700;
}
.does-col.yes li::before { content: "+"; color: var(--color-success); }
.does-col.no  li::before { content: "\2212"; color: var(--color-warning); }

.does-foot {
  margin-top: 16px; text-align: center;
  font-size: .85rem; color: var(--color-text-secondary);
  border: 1px dashed var(--color-border); border-radius: var(--r-md);
  padding: 14px 18px;
}
.does-foot strong { color: var(--color-primary); font-weight: 600; }

/* -------------------------------------------------------------
   10. Huecos publicitarios
   ------------------------------------------------------------- */
.ad-slot {
  position: relative;
  background-color: rgba(255,255,255,.012);
  border: 1px dashed var(--color-border-soft);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin: 0 auto 34px;
}
.ad-slot-leaderboard { min-height: 100px; }
.ad-slot-rectangle { min-height: 260px; max-width: 340px; }
.ad-slot-footer { min-height: 100px; }
.ad-slot-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-border); pointer-events: none;
}
.ad-slot ins { position: relative; z-index: 1; }

/* -------------------------------------------------------------
   11. Texto largo, FAQ, más herramientas
   ------------------------------------------------------------- */
.prose { margin-bottom: 38px; }
.prose h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.025em; margin-bottom: 16px; }
.prose h3 { font-size: 1.02rem; font-weight: 700; margin: 26px 0 8px; }
.prose p { font-size: .93rem; color: var(--color-text-secondary); margin-bottom: 14px; max-width: 68ch; }
.prose code { font-family: var(--font-mono); font-size: .85em; color: var(--color-primary); }

.faq { margin-bottom: 38px; }
.faq h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.025em; margin-bottom: 18px; }
.faq details {
  border: 1px solid var(--color-border-soft); border-radius: var(--r-md);
  background: var(--color-surface); margin-bottom: 8px;
  transition: border-color .25s var(--ease-out);
}
.faq details[open] { border-color: rgba(254,240,138,.25); }
.faq summary {
  cursor: pointer; padding: 15px 20px; font-weight: 600; font-size: .93rem;
  list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-primary); font-size: 1.15rem; font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 20px 17px; font-size: .88rem; color: var(--color-text-secondary); }

.more-tools { margin-bottom: 38px; }
.more-tools h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.025em; margin-bottom: 18px; }
.more-tools-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .more-tools-grid { grid-template-columns: 1fr 1fr; } }
.tool-link {
  display: block; text-decoration: none; color: inherit;
  background: var(--color-surface); border: 1px solid var(--color-border-soft);
  border-radius: var(--r-md); padding: 20px;
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.tool-link:hover { border-color: rgba(254,240,138,.35); transform: translateY(-2px); }
.tool-link h3 { font-size: .98rem; font-weight: 700; margin-bottom: 6px; }
.tool-link p { font-size: .84rem; color: var(--color-text-secondary); }

footer.site-footer {
  margin-top: 54px; padding: 26px 0 10px;
  border-top: 1px solid var(--color-border-soft);
  text-align: center; color: var(--color-text-dim); font-size: .82rem;
}
footer.site-footer a { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 3px; }
footer.site-footer a:hover { color: var(--color-primary); }
footer.site-footer .legal-row { margin-top: 10px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------
   12. Reveal / sin JS
   ------------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal.in-view { opacity: 1; transform: translateY(0); }
.js .reveal.delay-1 { transition-delay: .07s; }
.js .reveal.delay-2 { transition-delay: .14s; }

.no-js-note {
  display: none;
  border: 1px solid rgba(245,158,11,.5); background: rgba(245,158,11,.07);
  color: var(--color-warning); border-radius: var(--r-md); padding: 16px 18px; font-size: .88rem;
}
html:not(.js) .no-js-note { display: block; }
html:not(.js) .needs-js { display: none; }

/* -------------------------------------------------------------
   13. Móvil: la herramienta tiene que caber sobre el pliegue
   ------------------------------------------------------------- */
@media (max-width: 759px) {
  .container { padding: 16px; }

  .header { margin-top: 10px; margin-bottom: 20px; }
  .back-to-hub { margin-bottom: 14px; padding: 4px 12px; font-size: .75rem; }
  .brand-mark { width: 54px; height: 54px; margin-bottom: 10px; }
  .header h1 { font-size: 1.85rem; margin-bottom: 8px; }
  .header-lead { font-size: .92rem; line-height: 1.45; }

  /* el esquema pasa a filas de una sola línea y las flechas desaparecen */
  .flow { margin-top: 16px; gap: 6px; }
  .flow-arrow { display: none; }
  .flow-node { flex-direction: row; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm); }
  .flow-node .flow-k { flex: none; font-size: .58rem; letter-spacing: .1em; }
  .flow-node .flow-v { font-size: .78rem; line-height: 1.3; }

  .panel { padding: 18px; margin-bottom: 20px; }
  .panel-head { margin-bottom: 14px; gap: 8px 12px; }
  .panel-head h2 { font-size: 1.02rem; }
  .badge-privacy { font-size: .6rem; padding: 4px 9px; }

  .file-input-area { padding: 30px 18px; }
  .drop-icon { width: 32px; height: 32px; margin-bottom: 10px; }
  .drop-title { font-size: .95rem; }
  .drop-hint { font-size: .64rem; }

  .limits { margin: -6px 0 26px; font-size: .68rem; }
}

@media (max-width: 759px) and (max-height: 700px) {
  .header-lead { display: none; }
  .brand-mark { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .progress-bar { transition: none; }
  .mark-ring, .mark-scan, .badge-privacy .dot, .file-input-area::after { animation: none; }
  .file-input-area::after { display: none; }
  .value-card:hover, .tool-link:hover, .file-input-area.is-drag { transform: none; }
}