/* «Mejora mi web» (12-oct-2026): sección de la portada con antes/después, deslizador, puntaje y «Qué mejoramos». Usa los tokens de
   estilo.css (claro y oscuro) y respeta «reducir movimiento». Tocar en el celular: 44 px mínimo en todo lo que se toca. */
.mejora{max-width:1120px;margin-inline:auto;padding:56px 16px;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--bg-2),var(--bg));scroll-margin-top:calc(var(--cabecera) + 8px)}
.mj-cab{text-align:center;max-width:760px;margin:0 auto 26px}
.mj-cab h2{font-family:var(--display);font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.05;letter-spacing:-.02em;margin:.2em 0 .35em}
.mj-cab .lead{color:var(--muted);font-size:1.08rem;margin:0 auto}
.mj-form{max-width:720px;margin:0 auto}
.mj-caja{display:flex;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px;box-shadow:var(--sombra)}
.mj-caja input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:500 1.05rem var(--body);padding:0 16px;min-height:52px;outline:none}
.mj-caja:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 35%,transparent),var(--sombra)}
.mj-form .hint{text-align:center;margin-top:10px}
.mj-form .estado{text-align:center;margin-top:8px;min-height:1.2em}
.mj-narra{max-width:420px;margin:14px auto 0}
.mj-res{margin-top:34px;animation:mjEntra .6s var(--ease) both}
.mj-res-cab{text-align:center;margin-bottom:14px;scroll-margin-top:calc(var(--cabecera) + 16px)}
.mj-res-cab h3{font-family:var(--display);font-size:clamp(1.3rem,3vw,1.8rem);margin:0}
.mj-res-cab h3 span{color:var(--accent)}

/* Comparador: dos capas apiladas; el «Después» se recorta desde la izquierda con --pos (0 % = todo después, 100 % = todo antes). */
.mj-comp{--pos:50%;position:relative;height:min(640px,78vh);min-height:520px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:var(--sombra-2);touch-action:pan-y}
.mj-capa{position:absolute;inset:0;display:flex;flex-direction:column}
.mj-despues{clip-path:inset(0 0 0 var(--pos));background:var(--bg)}
.mj-comp.animando .mj-despues{transition:clip-path 1.3s var(--ease)}
.mj-comp.animando .mj-linea{transition:left 1.3s var(--ease)}
.mj-despues iframe{flex:1;width:100%;border:0;background:var(--bg)}
.mj-comp.arrastrando iframe{pointer-events:none}
.mj-nav{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-2);border-bottom:1px solid var(--line);font:500 .82rem var(--mono);color:var(--muted);min-height:40px}
.mj-puntos{display:flex;gap:6px}.mj-puntos i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.mj-puntos i:nth-child(1){background:#FB7185}.mj-puntos i:nth-child(2){background:#FBBF24}.mj-puntos i:nth-child(3){background:#34D399}
.mj-url{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mj-linea{position:absolute;top:0;bottom:0;left:var(--pos);width:44px;margin-left:-22px;z-index:3;cursor:ew-resize;display:flex;align-items:center;justify-content:center;touch-action:none}
.mj-linea::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(15,14,31,.25),0 0 18px rgba(15,14,31,.35)}
.mj-perilla{position:relative;width:44px;height:44px;border-radius:50%;background:#fff;color:#0F0E1F;display:grid;place-items:center;font-weight:700;font-size:1.1rem;box-shadow:0 6px 20px rgba(15,14,31,.3)}
.mj-etq{position:absolute;bottom:56px;z-index:2;padding:6px 12px;border-radius:999px;font:700 .78rem var(--body);letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.mj-etq.izq{left:14px;background:rgba(15,14,31,.78);color:#fff}
.mj-etq.der{right:14px;background:var(--lime);color:var(--lime-ink)}
.mj-rango{position:absolute;left:0;right:0;bottom:0;width:100%;height:44px;margin:0;z-index:4;opacity:0;cursor:ew-resize}
.mj-rango:focus-visible{opacity:1}
.mj-rango::-webkit-slider-thumb{width:44px;height:44px}
.mj-rango::-moz-range-thumb{width:44px;height:44px}
.mj-comp:has(.mj-rango:focus-visible) .mj-perilla{outline:3px solid var(--focus);outline-offset:3px}

/* Radiografía del «Antes»: fiel a lo leído (títulos, menú, colores, conteos), sin incrustar el sitio ajeno. */
.mj-antes{background:repeating-linear-gradient(135deg,var(--bg-2) 0 14px,var(--bg) 14px 28px)}
.mj-rx{flex:1;overflow:auto;padding:22px clamp(16px,4vw,40px);max-width:560px}
.mj-rx-etq{font:700 .72rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.mj-rx-titulo{font:700 1.25rem var(--display);color:var(--ink);margin-bottom:12px;word-break:break-word}
.mj-rx-menu{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.mj-rx-menu span{border:1px dashed var(--line);border-radius:6px;padding:3px 8px;font-size:.8rem;color:var(--muted);background:var(--surface)}
.mj-rx-h{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.mj-rx-h li{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:.92rem;color:var(--ink)}
.mj-rx-h li.h1{font-weight:700;font-size:1rem}
.mj-rx-vacio{color:var(--muted);font-style:italic}
.mj-rx-colores{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:.82rem;color:var(--muted)}
.mj-rx-colores div{display:flex;gap:6px}.mj-rx-colores i{width:24px;height:24px;border-radius:6px;border:1px solid var(--line)}
.mj-rx-datos{list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mj-rx-datos li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column}
.mj-rx-datos b{font:700 1.4rem var(--display);color:var(--ink)}.mj-rx-datos span{font-size:.78rem;color:var(--muted)}
.mj-rx-marca{display:inline-block;padding:6px 12px;border-radius:999px;font-weight:600;font-size:.85rem;margin:0 0 10px}
.mj-rx-marca.mal{background:var(--warn-soft);color:var(--warn)}.mj-rx-marca.ok{background:var(--ok-soft);color:var(--ok)}

/* Puntaje y «Qué mejoramos» */
.mj-abajo{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;margin-top:22px}
.mj-puntaje,.mj-mejoras,.mj-tomado{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sombra)}
.mj-total{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:6px}
.mj-total div{text-align:center}.mj-total span{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mj-total b{font:700 clamp(2.6rem,7vw,3.6rem)/1 var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
.mj-total .despues b{color:var(--accent)}
.mj-flecha{font-size:1.8rem;color:var(--muted)}
.mj-escala{text-align:center;color:var(--muted);font-size:.8rem;margin:0 0 12px}
.mj-criterios{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:12px}
.mj-criterios li{display:grid;grid-template-columns:1fr 34px minmax(80px,1.2fr) 34px;align-items:center;gap:10px;font-size:.92rem}
.mj-criterios b{font-variant-numeric:tabular-nums;text-align:right}.mj-criterios .mj-a{color:var(--muted)}.mj-criterios .mj-d{color:var(--accent)}
.mj-barra{position:relative;height:10px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.mj-barra i{position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:999px;animation:mjBarra 1.1s var(--ease) both}
.mj-barra i.a{background:color-mix(in srgb,var(--muted) 45%,transparent);z-index:1}
.mj-barra i.d{background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:.9;animation-delay:.35s}
.mj-barra i.a{z-index:2;height:4px;top:3px}
.mj-mejoras h4{font:700 1.15rem var(--display);margin:0 0 12px}
.mj-mejoras ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mj-mejoras li{position:relative;padding-left:32px;line-height:1.4}
.mj-mejoras li::before{content:"✓";position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;font-weight:800;font-size:.8rem}
.mj-tomado{margin-top:20px;padding:0}
.mj-tomado summary{cursor:pointer;padding:16px 22px;font-weight:700;min-height:44px;display:flex;align-items:center}
.mj-tomado ul{list-style:none;margin:0;padding:0 22px;display:grid;gap:8px}
.mj-tomado li{display:grid;grid-template-columns:150px 1fr;gap:12px;font-size:.92rem}.mj-tomado li span{color:var(--muted)}
.mj-tomado .hint{padding:8px 22px 18px;margin:0}
.mj-acciones{margin-top:22px;justify-content:center;flex-wrap:wrap;gap:12px}
.mj-acciones .btn-link{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600}
.mj-res > .hint{text-align:center}
@keyframes mjEntra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mjBarra{from{width:0}}
@media (max-width:800px){
  .mejora{padding:40px 16px;border-radius:0}
  .mj-caja{flex-direction:column;border-radius:var(--r)}
  .mj-caja input{text-align:center}
  .mj-abajo{grid-template-columns:1fr}
  .mj-comp{height:600px}
  .mj-tomado li{grid-template-columns:1fr}
  .mj-criterios li{grid-template-columns:34px 1fr 34px;grid-template-areas:"n n n" "a b d";row-gap:6px}
  .mj-criterios .mj-n{grid-area:n}.mj-criterios .mj-a{grid-area:a;text-align:left}.mj-criterios .mj-barra{grid-area:b}.mj-criterios .mj-d{grid-area:d}
  .mj-acciones > *{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .mj-res,.mj-barra i{animation:none}
  .mj-comp.animando .mj-despues,.mj-comp.animando .mj-linea{transition:none}
}