/* =====================================================================
   ConvierteAudit — Estilos (grounded en Sell-U Design System)
   ===================================================================== */
:root {
  /* Marca / acción */
  --blue-700:#072ac8; --blue-500:#3d5cdb; --blue-100:#e6ecfb; --blue-50:#f3f5fe;
  --navy-900:#434966; --navy-700:#434966; --navy-600:#5b607d; --navy-500:#9499ad;
  --navy-200:#e2e4ea; --navy-100:#eef0f4; --navy-50:#f6f7f9;
  --accent-500:#f6bb33; --accent-400:#f9cc66; --accent-300:#fbdd95; --accent-100:#fef5dd; --accent-700:#c89320;
  /* Neutros papel */
  --paper:#fbfaf7; --paper-2:#f5f3ee; --white:#fff;
  --ink-900:#15161a; --ink-700:#3a3d46; --ink-500:#6b6f7a; --ink-400:#9298a3;
  --ink-300:#c5c8d0; --ink-200:#e5e6ea; --ink-100:#f0f0f2;
  /* Semánticos */
  --success-700:#0f6b3f; --success-500:#1aa05f; --success-100:#e3f6ec;
  --warning-700:#c89320; --warning-500:#f6bb33; --warning-100:#fef5dd;
  --danger-700:#99231b;  --danger-500:#d6362a;  --danger-100:#fbe4e2;
  --info-700:#1d4f8a;    --info-500:#2f7dd6;    --info-100:#e3eefc;
  /* Tokens semánticos */
  --fg-primary:var(--navy-900); --fg-secondary:var(--ink-700); --fg-tertiary:var(--ink-500); --fg-muted:var(--ink-400);
  --border-default:var(--ink-200); --border-strong:var(--ink-300);
  /* Type */
  --font-sans:'Poppins',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-display:'Poppins',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --tracking-eyebrow:0.12em; --tracking-tight:-0.02em;
  /* Radii / shadow / motion */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-2xl:28px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(46,56,86,.04);
  --shadow-sm:0 1px 2px rgba(46,56,86,.05),0 1px 3px rgba(46,56,86,.04);
  --shadow-md:0 4px 8px -2px rgba(46,56,86,.06),0 2px 4px -2px rgba(46,56,86,.04);
  --shadow-lg:0 12px 24px -8px rgba(46,56,86,.10),0 4px 8px -4px rgba(46,56,86,.06);
  --shadow-xl:0 24px 48px -12px rgba(46,56,86,.16),0 8px 16px -8px rgba(46,56,86,.08);
  --shadow-ring-focus:0 0 0 4px rgba(7,42,200,.16);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --container-max:1160px;
}

/* ── Scope: estilos del Convertidor aplican solo dentro de .diag-scope
       para no contaminar el nav/footer Sell-U que vive fuera. ── */
html { scroll-behavior:smooth; }
.diag-scope, .diag-scope * { box-sizing:border-box; }
.diag-scope {
  background:var(--paper); color:var(--fg-primary);
  font-family:var(--font-sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Defensa contra scroll horizontal: contenedor scopeado nunca debe
     exceder el viewport, y cualquier overflow horizontal se oculta. */
  max-width: 100%;
  overflow-x: hidden;
}
/* Imágenes y videos nunca exceden el ancho del contenedor */
.diag-scope img, .diag-scope video, .diag-scope iframe { max-width: 100%; height: auto; }
/* Pre/code wrap si tienen contenido largo */
.diag-scope pre, .diag-scope code { word-wrap: break-word; overflow-wrap: anywhere; }
/* Texto largo (URLs, palabras sin espacios) se rompe en vez de desbordar */
.diag-scope { word-wrap: break-word; overflow-wrap: anywhere; }
.diag-scope .container { max-width:var(--container-max); margin:0 auto; padding:0 24px; width:100%; }
.diag-scope h1, .diag-scope h2, .diag-scope h3 { margin:0; font-family:var(--font-display); letter-spacing:var(--tracking-tight); font-weight:600; color:var(--navy-900); }
.diag-scope p { margin:0; }
.diag-scope strong { font-weight:600; color:var(--navy-900); }
.diag-scope .hl { background:linear-gradient(180deg,transparent 58%,var(--accent-300) 58%); padding:0 .12em; border-radius:2px; }

.diag-scope .eyebrow {
  font-size:12px; font-weight:600; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--fg-tertiary);
}

/* ---- Botones ---- */
.diag-scope .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:600; font-size:14px; line-height:20px;
  padding:10px 18px; border-radius:var(--radius-md); border:1px solid transparent;
  cursor:pointer; letter-spacing:-.005em; text-decoration:none; white-space:nowrap;
  transition:background .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s var(--ease-out),transform .12s var(--ease-out);
}
.diag-scope .btn:focus-visible { outline:none; box-shadow:var(--shadow-ring-focus); }
.diag-scope .btn-primary { background:var(--blue-700); color:#fff; box-shadow:var(--shadow-sm); }
.diag-scope .btn-primary:hover { background:var(--blue-500); box-shadow:var(--shadow-md); }
.diag-scope .btn-accent { background:var(--accent-500); color:var(--navy-900); box-shadow:var(--shadow-sm); }
.diag-scope .btn-accent:hover { background:var(--accent-400); box-shadow:var(--shadow-md); }
.diag-scope .btn-secondary { background:var(--white); color:var(--navy-900); border-color:var(--border-strong); box-shadow:var(--shadow-xs); }
.diag-scope .btn-secondary:hover { background:var(--paper-2); border-color:var(--navy-600); }
.diag-scope .btn-ghost { background:transparent; color:var(--navy-700); }
.diag-scope .btn-ghost:hover { background:var(--navy-50); }
.diag-scope .btn-on-dark { background:var(--paper); color:var(--navy-900); }
.diag-scope .btn-on-dark:hover { background:#fff; }
.diag-scope .btn-sm { padding:7px 13px; font-size:13px; line-height:18px; border-radius:8px; }
.diag-scope .btn-lg { padding:14px 22px; font-size:16px; line-height:22px; border-radius:12px; }

/* ===================== NAV ===================== */
.diag-scope .nav { position:sticky; top:0; z-index:50; transition:background .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s var(--ease-out); border-bottom:1px solid transparent; }
.diag-scope .nav--scrolled { background:rgba(251,250,247,.85); backdrop-filter:blur(12px); border-bottom-color:var(--border-default); box-shadow:var(--shadow-xs); }
.diag-scope .nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.diag-scope .brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--navy-900); }
.diag-scope .brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--blue-700); color:#fff; box-shadow:var(--shadow-sm); }
.diag-scope .brand-name { font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-.02em; }
.diag-scope .brand-accent { color:var(--blue-700); }
.diag-scope .nav-right { display:flex; align-items:center; gap:16px; }
.diag-scope .nav-trust { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--fg-tertiary); font-weight:500; }
.diag-scope .nav-trust svg { color:var(--success-500); }

/* ===================== HERO ===================== */
.diag-scope .hero { position:relative; overflow:hidden; padding:56px 0 64px; }
.diag-scope .hero-glow {
  position:absolute; inset:-20% 0 auto 0; height:560px; pointer-events:none; z-index:0;
  background:
    radial-gradient(620px 380px at 78% 8%, rgba(7,42,200,.08), transparent 70%),
    radial-gradient(520px 360px at 12% 0%, rgba(246,187,51,.12), transparent 70%);
}
.diag-scope .hero-inner { position:relative; z-index:1; max-width:880px; text-align:center; margin-inline:auto; }
.diag-scope .hero-eyebrow { display:inline-block; padding:6px 14px; border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--white); box-shadow:var(--shadow-xs); margin-bottom:22px; }
.diag-scope .hero-h1 { font-size:clamp(34px,6vw,60px); line-height:1.04; letter-spacing:-.03em; color:var(--navy-900); margin-bottom:18px; text-wrap:balance; }
.diag-scope .hero-sub { font-size:clamp(16px,2.2vw,20px); line-height:1.5; color:var(--fg-secondary); max-width:620px; margin:0 auto 32px; text-wrap:pretty; }

.diag-scope .hero-form { max-width:640px; margin:0 auto; }
.diag-scope .url-row { display:flex; gap:10px; align-items:stretch; }
.diag-scope .url-field {
  flex:1; display:flex; align-items:center; background:var(--white);
  border:1.5px solid var(--border-strong); border-radius:12px; padding:0 14px;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.diag-scope .url-field:focus-within { border-color:var(--blue-700); box-shadow:var(--shadow-ring-focus); }
.diag-scope .url-field--err { border-color:var(--danger-500); }
.diag-scope .url-proto { font-family:var(--font-mono); font-size:14px; color:var(--fg-muted); padding-right:2px; }
.diag-scope .url-input { flex:1; border:0; outline:none; background:transparent; font-family:var(--font-sans); font-size:16px; color:var(--navy-900); padding:15px 4px; min-width:0; }
.diag-scope .url-input::placeholder { color:var(--fg-muted); }
.diag-scope .url-btn { flex-shrink:0; }
.diag-scope .hero-controls { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; flex-wrap:wrap; }
.diag-scope .device-toggle { display:inline-flex; background:var(--navy-50); border:1px solid var(--border-default); border-radius:var(--radius-pill); padding:3px; gap:2px; }
.diag-scope .seg { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; cursor:pointer; font-family:var(--font-sans); font-weight:600; font-size:13px; color:var(--fg-tertiary); padding:7px 14px; border-radius:var(--radius-pill); transition:all .2s var(--ease-out); }
.diag-scope .seg svg { width:16px; height:16px; }
.diag-scope .seg--on { background:var(--white); color:var(--navy-900); box-shadow:var(--shadow-sm); }
.diag-scope .seg:focus-visible { outline:none; box-shadow:var(--shadow-ring-focus); }
.diag-scope .url-msg { font-size:13px; color:var(--fg-tertiary); display:inline-flex; align-items:center; gap:6px; }
.diag-scope .url-msg--err { color:var(--danger-700); font-weight:500; }
.diag-scope .url-msg--err svg { color:var(--danger-500); }

.diag-scope .hero-chips { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; padding:0; margin:32px 0 0; }
.diag-scope .hero-chips li { display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--fg-secondary); font-weight:500; }
.diag-scope .hero-chips svg { color:var(--success-500); }

/* ===================== ANALIZANDO ===================== */
.diag-scope .analyzing { min-height:78vh; display:flex; align-items:center; padding:48px 0; }
.diag-scope .an-inner { max-width:620px; margin:0 auto; text-align:center; width:100%; }
.diag-scope .an-pulse { width:72px; height:72px; margin:0 auto 22px; display:grid; place-items:center; border-radius:50%; background:var(--blue-50); color:var(--blue-700); box-shadow:0 0 0 0 rgba(7,42,200,.18); animation:pulse 2s var(--ease-out) infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(7,42,200,.18);} 70%{box-shadow:0 0 0 18px rgba(7,42,200,0);} 100%{box-shadow:0 0 0 0 rgba(7,42,200,0);} }
.diag-scope .an-title { font-size:clamp(24px,4vw,32px); color:var(--navy-900); margin-bottom:8px; }
.diag-scope .an-sub { color:var(--fg-secondary); margin-bottom:28px; }
.diag-scope .an-progress { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.diag-scope .an-progress-track { flex:1; height:10px; background:var(--navy-100); border-radius:var(--radius-pill); overflow:hidden; }
.diag-scope .an-progress-fill { height:100%; background:linear-gradient(90deg,var(--blue-700),var(--blue-500)); border-radius:var(--radius-pill); }
.diag-scope .an-progress-pct { font-family:var(--font-mono); font-size:14px; font-weight:500; color:var(--navy-700); width:42px; text-align:right; }
.diag-scope .an-checklist { list-style:none; padding:0; margin:0; text-align:left; background:var(--white); border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.diag-scope .an-item { display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--border-subtle, #f0f0f2); transition:background .2s var(--ease-out); }
.diag-scope .an-item:last-child { border-bottom:0; }
.diag-scope .an-item--active { background:var(--blue-50); }
.diag-scope .an-check { width:22px; height:22px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; }
.diag-scope .an-item--done .an-check { background:var(--success-500); color:#fff; }
.diag-scope .an-item--wait .an-check { border:1.5px solid var(--navy-200); }
.diag-scope .an-spin { width:16px; height:16px; border-radius:50%; border:2px solid var(--blue-200,#d0d8f8); border-top-color:var(--blue-700); animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.diag-scope .an-label { flex:1; font-size:15px; font-weight:500; color:var(--navy-900); }
.diag-scope .an-item--wait .an-label { color:var(--fg-muted); }
.diag-scope .an-status { font-size:12px; font-weight:600; letter-spacing:.02em; }
.diag-scope .an-item--done .an-status { color:var(--success-700); }
.diag-scope .an-item--active .an-status { color:var(--blue-700); }

/* ===================== RESULTADOS ===================== */
.diag-scope .results { padding-bottom:8px; }
.diag-scope .res-hero { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start; padding-top:48px; padding-bottom:24px; }
.diag-scope .res-target { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.diag-scope .res-target-label { font-size:13px; color:var(--fg-tertiary); }
.diag-scope .res-target-url { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:14px; font-weight:500; color:var(--blue-700); text-decoration:none; background:var(--blue-50); padding:4px 10px; border-radius:var(--radius-pill); }
.diag-scope .res-device { font-size:12px; font-weight:600; color:var(--fg-tertiary); border:1px solid var(--border-default); border-radius:var(--radius-pill); padding:4px 10px; }
.diag-scope .res-h1 { font-size:clamp(30px,5vw,48px); line-height:1.06; letter-spacing:-.03em; color:var(--navy-900); margin-bottom:14px; }
.diag-scope .res-sub { font-size:18px; line-height:1.55; color:var(--fg-secondary); max-width:520px; margin-bottom:26px; text-wrap:pretty; }
.diag-scope .res-actions { display:flex; gap:12px; flex-wrap:wrap; }

.diag-scope .score-card { background:var(--white); border:1px solid var(--border-default); border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg); padding:28px; display:flex; flex-direction:column; align-items:center; gap:22px; }

/* Gauge */
.diag-scope .gauge { position:relative; display:grid; place-items:center; }
.diag-scope .gauge svg { display:block; }
.diag-scope .gauge-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.diag-scope .gauge-num { font-family:var(--font-display); font-size:54px; line-height:1; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.diag-scope .gauge-of { font-size:12px; color:var(--fg-tertiary); margin-top:2px; }
.diag-scope .band-pill { margin-top:8px; font-size:13px; font-weight:600; padding:4px 12px; border-radius:var(--radius-pill); }

/* Potential */
.diag-scope .potential-card { width:100%; background:var(--navy-50); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:18px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; align-items:center; }
.diag-scope .potential-icon { grid-row:span 2; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--success-100); color:var(--success-700); }
.diag-scope .potential-label { font-size:13px; color:var(--fg-secondary); font-weight:500; }
.diag-scope .potential-num { font-family:var(--font-display); font-size:34px; font-weight:700; line-height:1; color:var(--success-700); letter-spacing:-.02em; }
.diag-scope .potential-num span { font-size:20px; }
.diag-scope .potential-note { grid-column:1/-1; font-size:12px; color:var(--fg-tertiary); margin-top:4px; }

/* Secciones */
.diag-scope .res-section { padding:40px 0; }
.diag-scope .section-head { margin-bottom:24px; max-width:680px; }
.diag-scope .section-head .eyebrow { display:block; margin-bottom:8px; }
.diag-scope .section-h2 { font-size:clamp(24px,3.4vw,34px); line-height:1.12; color:var(--navy-900); }
.diag-scope .section-lead { font-size:16px; color:var(--fg-secondary); margin-top:10px; text-wrap:pretty; }

/* Tráfico y autoridad SEO */
.diag-scope .traffic-hero { display:grid; grid-template-columns:.85fr 1.15fr; gap:0; background:var(--white); border:1px solid var(--border-default); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); overflow:hidden; margin-bottom:16px; }
.diag-scope .traffic-hero-main { padding:26px 28px; background:linear-gradient(160deg,var(--navy-900),#363c57); color:var(--paper); display:flex; flex-direction:column; gap:8px; justify-content:center; }
.diag-scope .traffic-hero-label { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:rgba(251,250,247,.8); }
.diag-scope .traffic-hero-label svg { color:var(--accent-500); }
.diag-scope .traffic-hero-num { font-family:var(--font-display); font-size:clamp(30px,4.4vw,42px); font-weight:700; line-height:1.04; letter-spacing:-.025em; color:#fff; font-variant-numeric:tabular-nums; }
.diag-scope .traffic-hero-num span { font-size:15px; font-weight:500; color:rgba(251,250,247,.72); letter-spacing:0; }
.diag-scope .traffic-trend { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; width:fit-content; padding:4px 11px; border-radius:var(--radius-pill); margin-top:4px; }
.diag-scope .traffic-trend--up { background:rgba(26,160,95,.18); color:#7fe0a8; }
.diag-scope .traffic-trend--down { background:rgba(214,54,42,.18); color:#f4a39c; }
.diag-scope .traffic-bridge { padding:24px 28px; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.diag-scope .bridge-row { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:14px; color:var(--fg-secondary); padding-bottom:9px; border-bottom:1px solid var(--border-default); }
.diag-scope .bridge-val { font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--navy-900); font-variant-numeric:tabular-nums; }
.diag-scope .bridge-val--good { color:var(--success-700); }
.diag-scope .bridge-result { font-size:14px; line-height:1.5; color:var(--fg-secondary); margin-top:6px; }
.diag-scope .bridge-result strong { color:var(--navy-900); }
.diag-scope .bridge-gain { display:block; margin-top:8px; font-size:13px; font-weight:600; color:var(--success-700); background:var(--success-100); border-radius:var(--radius-md); padding:7px 12px; width:fit-content; }

.diag-scope .traffic-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.diag-scope .kpi-card { background:var(--white); border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:18px; }
.diag-scope .kpi-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--blue-50); color:var(--blue-700); margin-bottom:12px; }
.diag-scope .kpi-value { font-family:var(--font-display); font-size:28px; font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--navy-900); font-variant-numeric:tabular-nums; }
.diag-scope .kpi-suffix { font-size:15px; font-weight:500; color:var(--fg-muted); }
.diag-scope .kpi-label { font-size:13px; font-weight:600; color:var(--navy-900); margin:8px 0 6px; }
.diag-scope .kpi-hint { font-size:12.5px; line-height:1.45; color:var(--fg-tertiary); }
.diag-scope .traffic-foot { display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.5; color:var(--fg-tertiary); margin-top:16px; padding:13px 16px; background:var(--paper-2); border:1px solid var(--border-default); border-radius:var(--radius-md); }
.diag-scope .traffic-foot svg { flex-shrink:0; color:var(--warning-700); margin-top:2px; }

/* Categorías */
.diag-scope .cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.diag-scope .cat-card { background:var(--white); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:12px; }
.diag-scope .cat-head { display:flex; align-items:center; justify-content:space-between; }
.diag-scope .cat-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; }
.diag-scope .cat-score { font-family:var(--font-display); font-size:26px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.diag-scope .cat-name { font-size:14px; font-weight:600; color:var(--navy-900); line-height:1.3; min-height:36px; }
.diag-scope .catbar-track { height:7px; background:var(--navy-100); border-radius:var(--radius-pill); overflow:hidden; }
.diag-scope .catbar-fill { height:100%; border-radius:var(--radius-pill); transition:width .9s var(--ease-out); }

/* Problemas */
.diag-scope .problem-list { display:flex; flex-direction:column; gap:14px; }
.diag-scope .problem { background:var(--white); border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:22px 24px; }
.diag-scope .problem--locked { background:linear-gradient(180deg,var(--white),var(--navy-50)); }
.diag-scope .problem-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.diag-scope .sev-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px 4px 8px; border-radius:var(--radius-pill); }
.diag-scope .sev-dot { width:7px; height:7px; border-radius:50%; }
.diag-scope .problem-cat { font-size:12px; font-weight:600; color:var(--fg-tertiary); letter-spacing:.01em; }
.diag-scope .quickwin { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--accent-700); background:var(--accent-100); padding:4px 10px; border-radius:var(--radius-pill); }
.diag-scope .problem-title { font-size:19px; line-height:1.3; font-weight:600; color:var(--navy-900); margin-bottom:12px; letter-spacing:-.01em; }
.diag-scope .problem-impact { display:flex; gap:10px; align-items:flex-start; margin-bottom:16px; }
.diag-scope .impact-tag { flex-shrink:0; width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:var(--info-100); color:var(--info-700); margin-top:1px; }
.diag-scope .problem-impact p { font-size:14px; line-height:1.5; color:var(--fg-secondary); }

.diag-scope .solution-wrap { border-top:1px solid var(--border-default); padding-top:15px; }
.diag-scope .solution-label { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--success-700); margin-bottom:8px; }
.diag-scope .problem--locked .solution-label { color:var(--fg-tertiary); }
.diag-scope .solution-text { font-size:14px; line-height:1.55; color:var(--fg-secondary); }
.diag-scope .solution-locked { position:relative; min-height:64px; }
.diag-scope .solution-text--blur { filter:blur(6px); user-select:none; opacity:.55; }
.diag-scope .lock-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
.diag-scope .lock-badge { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--navy-900); color:var(--accent-500); box-shadow:var(--shadow-md); }
.diag-scope .reanalyze { margin-top:24px; text-align:center; }

/* Metodología */
.diag-scope .method-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.diag-scope .method-card { background:var(--white); border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:20px 22px; }
.diag-scope .method-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.diag-scope .method-icon { width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; border-radius:10px; background:var(--blue-50); color:var(--blue-700); }
.diag-scope .method-name { font-size:16px; font-weight:600; color:var(--navy-900); letter-spacing:-.01em; flex:1; min-width:120px; }
.diag-scope .method-weight { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--fg-tertiary); background:var(--navy-50); border:1px solid var(--border-default); border-radius:var(--radius-pill); padding:3px 9px; white-space:nowrap; }
.diag-scope .method-signals { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.diag-scope .method-signals li { display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.45; color:var(--fg-secondary); }
.diag-scope .method-signals svg { color:var(--success-500); flex-shrink:0; margin-top:3px; }
.diag-scope .method-note { margin-top:18px; display:flex; gap:13px; align-items:flex-start; background:var(--paper-2); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:18px 20px; }
.diag-scope .method-note-icon { flex-shrink:0; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--white); border:1px solid var(--border-default); color:var(--navy-700); }
.diag-scope .method-note p { font-size:14px; line-height:1.55; color:var(--fg-secondary); }

/* ===================== CONVERSIÓN ===================== */
.diag-scope .section-inverse { background:var(--navy-900); color:var(--paper); }
.diag-scope .capture { padding:72px 0; margin-top:24px; }
.diag-scope .capture-inner { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.diag-scope .capture-copy .eyebrow { color:var(--accent-500); }
.diag-scope .capture-h2 { font-size:clamp(26px,4vw,40px); line-height:1.1; color:#fff; margin:10px 0 16px; letter-spacing:-.025em; }
.diag-scope .capture-lead { font-size:17px; line-height:1.6; color:rgba(251,250,247,.82); margin-bottom:24px; text-wrap:pretty; }
.diag-scope .capture-lead strong { color:#fff; }
.diag-scope .capture-points { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.diag-scope .capture-points li { display:flex; align-items:center; gap:11px; font-size:15px; color:rgba(251,250,247,.92); }
.diag-scope .capture-points svg { color:var(--accent-500); flex-shrink:0; }

.diag-scope .capture-form-wrap { width:100%; }
.diag-scope .capture-form, .diag-scope .capture-success { background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); padding:30px; color:var(--navy-900); }
.diag-scope .capture-form-title { font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:-.01em; margin-bottom:18px; }
.diag-scope .field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.diag-scope .field label { font-size:13px; font-weight:600; color:var(--navy-900); }
.diag-scope .inp { font-family:var(--font-sans); font-size:15px; line-height:20px; padding:12px 13px; border-radius:10px; border:1.5px solid var(--border-strong); background:var(--white); color:var(--navy-900); outline:none; width:100%; transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out); }
.diag-scope .inp::placeholder { color:var(--fg-muted); }
.diag-scope .inp:focus { border-color:var(--blue-700); box-shadow:var(--shadow-ring-focus); }
.diag-scope .inp--mono { font-family:var(--font-mono); font-size:14px; }
.diag-scope .inp--err { border-color:var(--danger-500); }
.diag-scope select.inp { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:38px; }
.diag-scope .field-err { font-size:12px; color:var(--danger-700); font-weight:500; }
.diag-scope .capture-submit { width:100%; margin-top:4px; }
.diag-scope .capture-fine { font-size:12px; color:var(--fg-tertiary); text-align:center; margin-top:12px; }

.diag-scope .capture-success { text-align:center; }
.diag-scope .success-check { width:64px; height:64px; margin:0 auto 16px; display:grid; place-items:center; border-radius:50%; background:var(--success-100); color:var(--success-700); }
.diag-scope .success-h { font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--navy-900); margin-bottom:10px; letter-spacing:-.01em; }
.diag-scope .capture-success p { font-size:15px; line-height:1.55; color:var(--fg-secondary); margin-bottom:18px; }

/* ===================== FOOTER ===================== */
.diag-scope .footer { background:var(--paper-2); border-top:1px solid var(--border-default); padding:36px 0; }
.diag-scope .footer-inner { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.diag-scope .footer-brand { display:inline-flex; align-items:center; gap:9px; }
.diag-scope .footer-brand .brand-mark { width:26px; height:26px; border-radius:8px; }
.diag-scope .footer-brand .brand-name { font-size:16px; }
.diag-scope .footer-disclaimer { font-size:13px; color:var(--fg-tertiary); max-width:560px; }
.diag-scope .footer-copy { font-size:12px; color:var(--fg-muted); }

/* ===================== RESPONSIVE ===================== */
.diag-scope .hide-mobile { display:none; }
@media (min-width:720px){ .diag-scope .hide-mobile { display:inline; } }

@media (max-width:980px){
  .diag-scope .res-hero { grid-template-columns:1fr; gap:32px; }
  .diag-scope .res-hero-right { order:-1; }
  .diag-scope .score-card { max-width:420px; }
  .diag-scope .capture-inner { grid-template-columns:1fr; gap:32px; }
  .diag-scope .cat-grid { grid-template-columns:repeat(2,1fr); }
  .diag-scope .method-grid { grid-template-columns:1fr; }
  .diag-scope .traffic-hero { grid-template-columns:1fr; }
  .diag-scope .traffic-kpis { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .diag-scope .url-row { flex-direction:column; }
  .diag-scope .url-btn { width:100%; }
  .diag-scope .hero-controls { flex-direction:column; align-items:stretch; }
  .diag-scope .device-toggle { align-self:center; }
  .diag-scope .url-msg { text-align:center; justify-content:center; }
  .diag-scope .nav-trust { display:none; }
  .diag-scope .res-actions .btn { flex:1; }
  .diag-scope .problem { padding:18px; }
}
@media (max-width:380px){
  .diag-scope .cat-grid { grid-template-columns:1fr; }
  .diag-scope .traffic-kpis { grid-template-columns:1fr; }
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  *, .diag-scope *::before, .diag-scope *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .diag-scope .an-pulse { animation:none; }
  .diag-scope .an-spin { animation:none; border-top-color:var(--blue-700); }
}