:root {
  --bg:#080b12; --bg-soft:#0d111a; --card:rgba(18,24,36,.86); --card-strong:#111827;
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16);
  --text:#f5f7fb; --muted:#9aa5b5; --muted-2:#6f7b8d;
  --accent:#6d7cff; --accent-2:#8a68ff; --success:#37d89b; --warning:#f2b94b; --danger:#ff647c;
  --shadow:0 25px 80px rgba(0,0,0,.35); --radius:22px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  margin:0; min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(109,124,255,.13), transparent 35%),
    radial-gradient(circle at 85% 10%, rgba(138,104,255,.11), transparent 30%),
    var(--bg);
}

button, input, select { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
code { background:rgba(255,255,255,.07); padding:2px 6px; border-radius:6px; font-size:.92em; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.app-shell { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding-bottom:60px; }

/* ---------- Cabecera y navegación ---------- */
.topbar {
  display:flex; align-items:center; gap:16px; min-height:76px; flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark {
  width:40px; height:40px; flex:0 0 40px; display:block; border-radius:12px;
  overflow:hidden; box-shadow:0 10px 30px rgba(109,124,255,.3);
}
.brand-mark svg { display:block; width:100%; height:100%; }
.brand-text { display:flex; flex-direction:column; }
.brand-name { font-size:17px; font-weight:800; letter-spacing:-.02em; }
.brand-subtitle { color:var(--muted-2); font-size:11px; margin-top:1px; }

.main-nav { flex:1; }
.nav-list { display:flex; gap:4px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.nav-list a {
  display:inline-block; padding:8px 12px; border-radius:10px;
  color:var(--muted); font-size:13px; font-weight:700; text-decoration:none;
}
.nav-list a:hover { background:rgba(255,255,255,.05); color:var(--text); }
.nav-list a[aria-current="page"] { color:var(--text); background:rgba(109,124,255,.14); }
.nav-toggle { display:none; }

/* Menú por categorías: un desplegable por grupo que se abre al pasar el
   ratón o al llegar con el teclado (focus-within). Sin JavaScript, y por
   eso sin riesgo para ninguna herramienta. */
.nav-group { position:relative; }
.nav-label {
  display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:10px;
  color:var(--muted); font-size:13px; font-weight:700; cursor:default; user-select:none;
}
.nav-label::after {
  content:""; width:5px; height:5px; margin-top:-3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); opacity:.7;
}
.nav-group:hover > .nav-label,
.nav-group:focus-within > .nav-label { background:rgba(255,255,255,.05); color:var(--text); }
.nav-group.is-current > .nav-label { color:var(--text); background:rgba(109,124,255,.14); }
.nav-sub {
  display:none; position:absolute; top:100%; left:0; z-index:60;
  min-width:210px; margin:0; padding:10px 6px 6px; list-style:none;
}
.nav-sub::before {
  content:""; position:absolute; inset:4px 0 0; z-index:-1;
  background:var(--card-strong); border:1px solid var(--border-strong);
  border-radius:14px; box-shadow:var(--shadow);
}
.nav-group:hover > .nav-sub,
.nav-group:focus-within > .nav-sub { display:block; }
.nav-sub a { display:block; white-space:nowrap; }
body.light .nav-group:hover > .nav-label,
body.light .nav-group:focus-within > .nav-label { background:rgba(20,27,40,.05); }

.top-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }

.status-badge {
  display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:999px;
  border:1px solid rgba(55,216,155,.18); background:rgba(55,216,155,.08); color:#8cebc5;
  font-size:12px; font-weight:700;
}
.status-badge.loading { border-color:rgba(242,185,75,.2); background:rgba(242,185,75,.08); color:#ffd98c; }
.status-badge.error { border-color:rgba(255,100,124,.2); background:rgba(255,100,124,.08); color:#ff9dad; }

.icon-btn {
  width:36px; height:36px; border:1px solid var(--border); border-radius:11px;
  background:var(--card); color:var(--text);
}
.icon-btn.small { width:30px; height:30px; border-radius:9px; font-size:13px; line-height:1; }
.icon-btn.danger { color:#ff9dad; border-color:rgba(255,100,124,.25); }
.icon-btn:disabled { opacity:.35; cursor:not-allowed; }

/* ---------- Hero ---------- */
.hero { padding:70px 0 34px; }
.hero-copy { max-width:820px; }
.eyebrow, .section-kicker { color:#8e9cff; font-size:11px; font-weight:900; letter-spacing:.16em; }
.hero h1 { margin:13px 0 18px; font-size:clamp(40px,6vw,68px); line-height:1; letter-spacing:-.05em; }
.hero h1 span { display:block; color:var(--muted); }
.hero p { max-width:690px; margin:0; color:var(--muted); font-size:17px; line-height:1.7; }

.tool-hero { padding:48px 0 26px; max-width:760px; }
.tool-hero h1 { margin:12px 0 14px; font-size:clamp(30px,4.6vw,46px); line-height:1.08; letter-spacing:-.04em; }
.tool-hero p { margin:0; color:var(--muted); font-size:16px; line-height:1.7; }

.privacy-row { display:flex; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap; }
.privacy-pill {
  display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border-radius:999px;
  background:rgba(55,216,155,.08); border:1px solid rgba(55,216,155,.16);
  color:#91e8c8; font-size:12px; font-weight:800;
}
.dot { width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 12px rgba(55,216,155,.8); }
.privacy-text { color:var(--muted-2); font-size:12px; }

/* ---------- Tarjetas de herramientas (home) ---------- */
.tools-section { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.tool-card {
  position:relative; display:block; padding:24px; border-radius:var(--radius); text-decoration:none;
  border:1px solid var(--border); background:var(--card); box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease;
}
.tool-card:hover { transform:translateY(-3px); border-color:var(--border-strong); }
.tool-card h2 { margin:0 0 8px; font-size:20px; letter-spacing:-.03em; }
.tool-card p { margin:0 0 14px; color:var(--muted); font-size:13px; line-height:1.6; }
.tool-link { color:#abb4ff; font-size:13px; font-weight:800; }
.tool-card.featured { grid-column:span 3; background:linear-gradient(145deg,rgba(109,124,255,.14),rgba(138,104,255,.05)); border-color:rgba(109,124,255,.4); }
.tool-badge {
  position:absolute; top:18px; right:18px; padding:4px 8px; border-radius:7px;
  background:rgba(109,124,255,.18); color:#c3c9ff; font-size:9px; font-weight:900; text-transform:uppercase;
}

/* ---------- Zona de carga ---------- */
.drop-zone {
  position:relative; min-height:340px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:28px;
  border:1px dashed rgba(140,156,255,.36); border-radius:28px;
  background:linear-gradient(180deg,rgba(18,24,36,.75),rgba(13,17,26,.85));
  box-shadow:var(--shadow); transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.drop-zone.compact { min-height:250px; }
.drop-zone:hover, .drop-zone.dragging {
  border-color:rgba(140,156,255,.8);
  background:linear-gradient(180deg,rgba(25,32,49,.9),rgba(13,17,26,.95)); transform:translateY(-2px);
}
.drop-icon {
  width:66px; height:66px; display:grid; place-items:center; margin-bottom:18px; border-radius:20px;
  background:rgba(109,124,255,.11); border:1px solid rgba(109,124,255,.22);
  color:#aab3ff; font-size:13px; font-weight:900;
}
.drop-zone h2 { margin:0; font-size:24px; letter-spacing:-.025em; }
.drop-zone p { margin:9px 0 20px; color:var(--muted); font-size:14px; }
.drop-note { margin-top:14px; color:var(--muted-2); font-size:11px; }

/* ---------- Botones ---------- */
.primary-btn, .secondary-btn, .compress-btn { border:0; transition:transform .18s ease, opacity .18s ease; }
.primary-btn {
  min-height:44px; padding:0 19px; border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; font-size:13px; font-weight:800; box-shadow:0 12px 30px rgba(109,124,255,.22);
}
.primary-btn:hover, .compress-btn:hover { transform:translateY(-1px); }
.secondary-btn {
  min-height:42px; padding:0 15px; border-radius:11px; border:1px solid var(--border);
  background:rgba(255,255,255,.035); color:var(--text); font-size:13px; font-weight:700;
}
.secondary-btn:hover { background:rgba(255,255,255,.07); }
.primary-btn:disabled, .secondary-btn:disabled, .compress-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.large { min-height:48px; padding-left:21px; padding-right:21px; }
.compress-btn {
  width:100%; min-height:54px; border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; font-size:14px; font-weight:900; box-shadow:0 15px 40px rgba(109,124,255,.23);
}

/* ---------- Paneles ---------- */
.workspace { margin-top:24px; }
.panel, .file-card, .analysis-panel, .controls-panel, .progress-panel,
.result-panel, .error-panel, .info-card, .faq-section details, .log-details {
  border:1px solid var(--border); background:var(--card);
  backdrop-filter:blur(20px); box-shadow:var(--shadow);
}
.panel, .analysis-panel, .controls-panel, .progress-panel, .result-panel, .error-panel {
  margin-top:16px; padding:24px; border-radius:var(--radius);
}
.file-card { display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--radius); }
.file-card.plain { box-shadow:none; background:rgba(255,255,255,.025); }
.file-icon {
  width:50px; height:50px; display:grid; place-items:center; border-radius:14px;
  background:rgba(255,100,124,.08); border:1px solid rgba(255,100,124,.16);
  color:#ff8da0; font-size:10px; font-weight:900;
}
.file-main { flex:1; min-width:0; }
.file-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; font-weight:800; }
.file-meta { margin-top:4px; color:var(--muted-2); font-size:12px; }

.global-error { margin:0 0 16px; padding:18px 20px; border-radius:var(--radius); }
.section-heading, .progress-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.section-heading h2, .progress-top h2, .info-card h2, .faq-section h2, .related h2 {
  margin:7px 0 0; font-size:22px; letter-spacing:-.035em;
}
.small-status { color:var(--muted); font-size:12px; padding-top:4px; }
.hint { color:var(--muted-2); font-size:12px; line-height:1.6; margin:10px 0 0; }

.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:22px; }
.stat-card, .result-card { padding:16px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,.025); }
.stat-card span, .result-card span { display:block; color:var(--muted-2); font-size:11px; }
.stat-card strong, .result-card strong { display:block; margin-top:8px; font-size:16px; letter-spacing:-.02em; }

.warning-box, .result-message {
  margin-top:14px; padding:14px 15px; border-radius:14px;
  border:1px solid rgba(242,185,75,.17); background:rgba(242,185,75,.06);
  color:#f9d889; font-size:12px; line-height:1.6;
}
.warning-box.blocking { border-color:rgba(255,100,124,.25); background:rgba(255,100,124,.07); color:#ffb3bf; }

.risk-row {
  display:flex; align-items:center; gap:11px; margin-top:12px; padding:13px 15px;
  border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.025); cursor:pointer;
}
.risk-row input { position:absolute; opacity:0; pointer-events:none; }
.risk-row strong { display:block; font-size:12px; }
.risk-row small { display:block; margin-top:3px; color:var(--muted-2); font-size:10px; }

/* ---------- Modos de compresión ---------- */
.mode-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:22px; }
.mode-card {
  position:relative; min-height:150px; padding:17px; text-align:left;
  border:1px solid var(--border); border-radius:17px; background:rgba(255,255,255,.025); color:var(--text);
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.mode-card:hover { transform:translateY(-2px); border-color:var(--border-strong); }
.mode-card.active { border-color:rgba(109,124,255,.6); background:linear-gradient(145deg,rgba(109,124,255,.13),rgba(138,104,255,.05)); }
.mode-title { display:block; font-size:14px; font-weight:900; }
.mode-description { display:block; margin-top:9px; color:var(--muted); font-size:11px; line-height:1.5; }
.mode-tag {
  display:inline-block; margin-top:12px; padding:4px 7px; border-radius:7px;
  background:rgba(109,124,255,.12); color:#abb4ff; font-size:9px; font-weight:900; text-transform:uppercase;
}

/* ---------- Campos ---------- */
.advanced-row, .options-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:15px; }
.field, .checkbox-field { padding:15px; border:1px solid var(--border); border-radius:15px; background:rgba(255,255,255,.025); }
/* Campo que no aplica ahora mismo (p. ej. la calidad JPG con PNG). */
.field.disabled { opacity:.5; }
.field.disabled select { cursor:not-allowed; }
.field > span { display:block; color:var(--muted); font-size:11px; font-weight:700; margin-bottom:8px; }
.text-input {
  width:100%; padding:10px 11px; border:1px solid var(--border); border-radius:9px; outline:none;
  background:rgba(0,0,0,.18); color:var(--text);
}
.input-wrap { display:flex; align-items:center; gap:8px; }
.input-wrap input { width:110px; padding:8px 9px; border:1px solid var(--border); border-radius:8px; background:rgba(0,0,0,.18); color:var(--text); outline:none; }
.input-wrap span { color:var(--muted); font-size:11px; }
.checkbox-field { display:flex; align-items:center; gap:11px; cursor:pointer; }
.checkbox-field input { position:absolute; opacity:0; pointer-events:none; }
.checkbox-ui { width:20px; height:20px; flex:0 0 20px; border-radius:6px; border:1px solid var(--border-strong); background:rgba(0,0,0,.12); }
.checkbox-field input:checked + .checkbox-ui, .risk-row input:checked + .checkbox-ui {
  border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 4px rgba(255,255,255,.85);
}
.checkbox-field strong { display:block; font-size:12px; }
.checkbox-field small { display:block; margin-top:3px; color:var(--muted-2); font-size:10px; }

.radio-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:18px; }
.radio-option {
  display:flex; align-items:flex-start; gap:10px; padding:14px 15px; cursor:pointer;
  border:1px solid var(--border); border-radius:15px; background:rgba(255,255,255,.025);
}
.radio-option strong { display:block; font-size:13px; }
.radio-option small { display:block; margin-top:3px; color:var(--muted-2); font-size:11px; }

.panel-actions { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.panel-actions .compress-btn { flex:1 1 260px; }
.toolbar { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

/* ---------- Lista de archivos ---------- */
.queue-list { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.queue-item {
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  border:1px solid var(--border); background:rgba(255,255,255,.025); cursor:grab;
}
.queue-item.dragging { opacity:.5; }
.queue-item.drop-target { border-color:var(--accent); background:rgba(109,124,255,.12); }
.queue-order {
  width:26px; height:26px; flex:0 0 26px; display:grid; place-items:center; border-radius:8px;
  background:rgba(109,124,255,.14); color:#abb4ff; font-size:12px; font-weight:900;
}
.queue-main { flex:1; min-width:0; }
.queue-name { display:block; font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue-meta { display:block; margin-top:3px; color:var(--muted-2); font-size:11px; }
.queue-actions { display:flex; gap:6px; }

/* ---------- Miniaturas de páginas ---------- */
.page-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:18px; }
.page-card {
  padding:10px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.025);
  text-align:center; cursor:pointer; transition:border-color .15s ease, transform .15s ease;
}
.page-card:hover { border-color:var(--border-strong); transform:translateY(-2px); }
.page-card.selected { border-color:rgba(109,124,255,.7); background:rgba(109,124,255,.12); }
.page-card.dragging { opacity:.5; }
.page-card.drop-target { border-color:var(--accent); }
.page-frame {
  display:grid; place-items:center; height:160px; overflow:hidden; border-radius:8px;
  background:#fff; transition:transform .2s ease;
}
.page-frame canvas { max-width:100%; max-height:100%; display:block; }
.page-label { margin-top:8px; color:var(--muted-2); font-size:11px; }
.page-tools { display:flex; justify-content:center; gap:4px; margin-top:8px; flex-wrap:wrap; }

/* ---------- Progreso, resultado, error ---------- */
.progress-top strong { color:#abb4ff; font-size:24px; }
.progress-track { height:9px; margin-top:22px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.07); }
.progress-bar { width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .25s ease; }
.progress-text { margin:12px 0 0; color:var(--muted); font-size:12px; }
#cancelBtn { margin-top:16px; }

.result-success { display:flex; align-items:center; gap:12px; }
.success-icon {
  width:48px; height:48px; display:grid; place-items:center; border-radius:15px;
  background:rgba(55,216,155,.09); border:1px solid rgba(55,216,155,.18);
  color:var(--success); font-size:20px; font-weight:900;
}
.success-icon.neutral { background:rgba(242,185,75,.09); border-color:rgba(242,185,75,.2); color:var(--warning); }
.result-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:22px; }
.result-message { border-color:rgba(109,124,255,.16); background:rgba(109,124,255,.05); color:var(--muted); }
.result-actions { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }

.result-list { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.result-item {
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px;
  border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.025);
}
.result-info { min-width:0; }
.result-name { display:block; font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-meta { display:block; margin-top:3px; color:var(--muted-2); font-size:11px; }

.log-details { margin-top:14px; padding:12px 14px; border-radius:14px; }
.log-details summary { cursor:pointer; font-size:12px; font-weight:800; color:var(--muted); }
.log-details pre { margin:10px 0 0; max-height:220px; overflow:auto; color:var(--muted-2); font-size:11px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }

.error-panel { border-color:rgba(255,100,124,.2); background:rgba(255,100,124,.05); }
.error-panel strong { color:#ff9dad; }
.error-panel p { color:var(--muted); font-size:12px; line-height:1.6; }

/* ---------- Contenido informativo ---------- */
.related { margin-top:40px; }
.related-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.related-links a {
  padding:10px 14px; border-radius:11px; border:1px solid var(--border);
  background:rgba(255,255,255,.025); color:var(--muted); font-size:13px; font-weight:700; text-decoration:none;
}
.related-links a:hover { color:var(--text); border-color:var(--border-strong); }

.info-section { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px; }
.info-card { padding:25px; border-radius:var(--radius); }
.info-card p { margin:12px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }
.faq-section { margin-top:56px; }
.faq-section > h2 { margin-bottom:18px; }
.faq-section details { margin-top:9px; padding:17px 18px; border-radius:15px; }
summary { cursor:pointer; font-size:13px; font-weight:800; }
.faq-section details p { margin:10px 0 0; color:var(--muted); font-size:12px; line-height:1.65; }

footer {
  display:flex; justify-content:space-between; gap:20px; margin-top:60px; padding-top:22px;
  border-top:1px solid var(--border); color:var(--muted-2); font-size:11px; flex-wrap:wrap;
}
.footer-links { display:flex; gap:14px; flex-wrap:wrap; }
.footer-links a { color:var(--muted-2); text-decoration:none; }
.footer-links a:hover { color:var(--text); }

/* ---------- Huecos de publicidad ----------
   Ocultos hasta que exista código real de Google.
   Activarlos añadiendo la clase "ads-on" al <body>. */
.ad-slot { display:none; }
body.ads-on .ad-slot {
  display:block; margin:26px 0; min-height:90px; border-radius:16px;
  border:1px solid var(--border); background:rgba(255,255,255,.02);
}

.hidden { display:none !important; }

/* ---------- Tema claro ---------- */
body.light {
  --bg:#f3f5fa; --bg-soft:#fff; --card:rgba(255,255,255,.9); --card-strong:#fff;
  --border:rgba(20,27,40,.09); --border-strong:rgba(20,27,40,.17);
  --text:#141925; --muted:#596477; --muted-2:#7a8597; --shadow:0 25px 70px rgba(35,45,65,.12);
}
body.light .drop-zone { background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,249,253,.95)); }
body.light code { background:rgba(20,27,40,.06); }

/* ---------- Responsive ---------- */
@media (max-width:980px) {
  .tools-section { grid-template-columns:repeat(2,1fr); }
  .tool-card.featured { grid-column:span 2; }
  .mode-grid { grid-template-columns:repeat(2,1fr); }
  .stats-grid, .result-grid { grid-template-columns:repeat(2,1fr); }
  .info-section { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .nav-toggle { display:block; order:3; }
  .main-nav { order:4; flex-basis:100%; }
  .nav-list { display:none; flex-direction:column; gap:2px; padding-bottom:12px; }
  .nav-list.open { display:flex; }
  .nav-list a { padding:12px; font-size:14px; }
  /* En el menú del móvil no hay desplegables: los grupos se muestran
     abiertos, con su nombre como encabezado. */
  .nav-group { position:static; }
  .nav-label { padding:14px 12px 4px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
  .nav-label::after { display:none; }
  .nav-group:hover > .nav-label, .nav-group:focus-within > .nav-label,
  .nav-group.is-current > .nav-label { background:none; color:var(--muted-2); }
  .nav-sub { display:block; position:static; min-width:0; padding:0; }
  .nav-sub::before { display:none; }
  .top-actions { order:2; }
}

@media (max-width:650px) {
  .app-shell { width:min(100% - 22px,1180px); }
  .status-badge { display:none; }
  .hero { padding-top:40px; }
  .tools-section { grid-template-columns:1fr; }
  .tool-card.featured { grid-column:span 1; }
  .drop-zone { min-height:260px; padding:22px; }
  .stats-grid, .result-grid, .advanced-row, .options-grid, .mode-grid { grid-template-columns:1fr; }
  .result-actions, .panel-actions { flex-direction:column; }
  .result-item { flex-direction:column; align-items:stretch; }
  .result-item .primary-btn, .result-item .secondary-btn { width:100%; }
  .page-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
  .page-frame { height:130px; }
  footer { flex-direction:column; }
}
/* ================================================================
   CLEKARA V1 — bloque añadido: navegación de idioma, pasos,
   páginas legales, 404, pie ampliado y accesibilidad.
   Nada de lo anterior se ha eliminado.
   ================================================================ */

/* ---------- Salto al contenido ---------- */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:50;
  padding:10px 16px; border-radius:0 0 12px 0; font-size:13px; font-weight:800;
  background:var(--accent); color:#fff; text-decoration:none;
}
.skip-link:focus { left:0; }

/* ---------- Selector de idioma ---------- */
.lang-switch {
  display:flex; align-items:center; gap:2px; padding:3px;
  border:1px solid var(--border); border-radius:11px; background:rgba(255,255,255,.03);
}
.lang-option {
  display:grid; place-items:center; min-width:34px; height:28px; padding:0 8px;
  border-radius:8px; font-size:11px; font-weight:900; letter-spacing:.06em;
  color:var(--muted-2); text-decoration:none; transition:color .18s ease, background .18s ease;
}
.lang-option:hover { color:var(--text); background:rgba(255,255,255,.06); }
.lang-option.active { color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }

/* ---------- Home: rejilla de herramientas con encabezado ---------- */
.tools-section-wrap { margin-top:56px; }
.section-title { margin:12px 0 0; font-size:clamp(24px,3.2vw,32px); letter-spacing:-.035em; }
.tools-section-wrap .tools-section { margin-top:20px; }
.hero-tagline {
  margin:0 0 14px; color:var(--muted-2); font-size:13px;
  font-weight:800; letter-spacing:.04em;
}

/* ---------- Pasos de cada herramienta ---------- */
.steps-section { margin-top:48px; }
.steps-list {
  counter-reset:step; list-style:none; margin:16px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.steps-list li {
  counter-increment:step; position:relative;
  padding:22px 22px 22px 22px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--card);
  color:var(--muted); font-size:13px; line-height:1.7;
}
.steps-list li::before {
  content:counter(step); display:grid; place-items:center;
  width:26px; height:26px; margin-bottom:12px; border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; font-size:12px; font-weight:900;
}
.steps-list strong { color:var(--text); font-weight:800; }

/* ---------- Páginas legales ---------- */
.legal { max-width:760px; padding:48px 0 10px; }
.legal h1 { margin:0; font-size:clamp(30px,4.4vw,44px); line-height:1.1; letter-spacing:-.04em; }
.legal-updated { margin:14px 0 34px; color:var(--muted-2); font-size:12px; }
.legal h2 {
  margin:36px 0 0; font-size:19px; letter-spacing:-.025em;
  padding-top:22px; border-top:1px solid var(--border);
}
.legal p { margin:12px 0 0; color:var(--muted); font-size:14px; line-height:1.8; }
.legal a { color:#abb4ff; }

/* ---------- 404 ---------- */
.notfound { padding:40px 0 0; }
.notfound-block { padding:34px 0; border-bottom:1px solid var(--border); }
.notfound-block:last-child { border-bottom:0; }
.notfound-block h1, .notfound-block h2 {
  margin:0 0 10px; font-size:clamp(26px,3.6vw,38px); letter-spacing:-.04em;
}
.notfound-block p { margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.7; }
.primary-link { color:#abb4ff; font-weight:800; text-decoration:none; }
.primary-link:hover { text-decoration:underline; }

/* ---------- Pie ampliado ---------- */
footer { align-items:flex-start; }
.footer-brand { display:flex; flex-direction:column; gap:6px; max-width:260px; }
.footer-brand strong { color:var(--text); font-size:15px; letter-spacing:-.02em; }
.footer-brand span { color:var(--muted-2); font-size:11px; line-height:1.6; }
.footer-col { display:flex; flex-direction:column; gap:10px; }
.footer-heading {
  color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
}
.footer-col .footer-links { flex-direction:column; gap:8px; }
.footer-bottom { width:100%; padding-top:18px; border-top:1px solid var(--border); }

/* ---------- Responsive de lo añadido ---------- */
@media (max-width:980px) {
  .steps-list { grid-template-columns:1fr; }
}
@media (max-width:650px) {
  .lang-switch { order:3; }
  .footer-brand { max-width:none; }
  .footer-col .footer-links { flex-direction:row; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .tool-card:hover, .primary-btn:hover, .compress-btn:hover { transform:none; }
}

/* ---------- Ajustes del tema claro para lo añadido ---------- */
body.light .lang-switch { background:rgba(20,27,40,.03); }
body.light .lang-option:hover { background:rgba(20,27,40,.06); }
body.light .steps-list li { background:var(--card-strong); }

/* ---------- Página de entrada en la raíz ---------- */
.root-entry { padding:70px 0 40px; }
.root-brand { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.root-brand .brand-mark { width:64px; height:64px; flex:0 0 64px; border-radius:18px; }
.root-entry h1 { margin:10px 0 0; font-size:clamp(36px,6vw,58px); letter-spacing:-.05em; line-height:1; }
.root-tagline { margin:0; color:var(--muted); font-size:clamp(15px,2.2vw,19px); }
.root-descriptor { margin:0; color:var(--muted-2); font-size:12px; font-weight:800; letter-spacing:.06em; }
.root-choose { margin:46px 0 16px; text-align:center; color:var(--muted-2); font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.lang-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lang-card { padding:26px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); }
.lang-headline { display:flex; flex-direction:column; gap:4px; text-decoration:none; margin-bottom:18px; }
.lang-headline strong { font-size:22px; letter-spacing:-.03em; }
.lang-headline span { color:var(--muted); font-size:13px; }
.lang-headline:hover strong { color:#abb4ff; }
.lang-card-legal { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.lang-card-legal a { color:var(--muted-2); font-size:11px; text-decoration:none; }
.lang-card-legal a:hover { color:var(--text); }
@media (max-width:760px) { .lang-grid { grid-template-columns:1fr; } }

/* ================================================================
   Publicidad
   ================================================================
   Un hueco de anuncio no existe hasta que hay algo real que poner
   dentro. Sin .is-active no ocupa ni un píxel: cero recuadros grises
   y cero saltos de maquetación (CLS) mientras la publicidad esté
   apagada o el usuario la haya rechazado.

   Cuando se activa, se reserva la altura ANTES de que llegue el
   anuncio, para que el contenido de abajo no dé un salto. Las alturas
   son las mínimas habituales de los formatos responsivos de AdSense. */

.ad-slot { display: none; }

.ad-slot.is-active {
  display: block;
  margin: 28px auto;
  width: 100%;
  max-width: 970px;
  min-height: 280px;              /* móvil: rectángulo grande */
  overflow: hidden;
  text-align: center;
}

.ad-slot.is-active::before {
  content: attr(data-ad-label);
  display: block;
  margin-bottom: 6px;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim, #8a93a6);
}

@media (min-width: 768px) {
  .ad-slot.is-active { min-height: 250px; }
}

.ad-slot .adsbygoogle { display: block; width: 100%; }

/* ================================================================
   Aviso de cookies
   ================================================================
   Abajo, sin oscurecer la página y sin bloquear nada: se puede usar
   cualquier herramienta con el aviso puesto. Un aviso que impide
   trabajar es la forma más rápida de perder al visitante. */

.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 18px;
  border: 1px solid var(--line, #232a3a);
  border-radius: 14px;
  background: var(--panel, #10151f);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

.consent-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text, #e7ebf3);
}

.consent-text a { color: var(--accent, #7c8cff); }

.consent-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.consent-actions button {
  min-height: 44px;               /* objetivo táctil cómodo */
  padding: 0 20px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .consent { flex-direction: column; align-items: stretch; }
  .consent-actions button { flex: 1; }
}

/* ================================================================
   CLEKARA V2 — contraste WCAG AA (medido por build/test-mobile-a11y.mjs)
   Texto blanco sobre --accent (#6d7cff) daba 3,51:1 y sobre el degradado
   hasta --accent-2 3,81:1: por debajo de 4,5:1 en botones de 13-14 px.
   --muted-2 daba 4,13:1 sobre tarjetas oscuras y 3,45:1 en el tema claro.
   Solo cambian colores; ni tamaños, ni márgenes, ni comportamiento.
   ================================================================ */
:root { --muted-2:#8792a4; --accent-ink:#5563e8; --accent-ink-2:#6b52e6; }
body.light { --muted-2:#5f6a7c; }
.primary-btn, .compress-btn, .lang-option.active { background:linear-gradient(135deg,var(--accent-ink),var(--accent-ink-2)); }
.skip-link { background:var(--accent-ink); }
body.light .file-icon { color:#b3243d; }
.steps-list li::before { background:linear-gradient(135deg,var(--accent-ink),var(--accent-ink-2)); }

/* V2 — un hash SHA-256 (64 caracteres sin espacios) en /licenses/ desbordaba
   134 px a 390 px de ancho (medido por test-mobile-a11y). Se deja partir. */
.legal-content code, .legal code, main code { overflow-wrap:anywhere; word-break:break-word; }
/* V2 — la etiqueta «PDF/DOCX/XLSX/JPG» de la zona de arrastre era #aab3ff
   sobre casi blanco en el tema claro: 1,88:1. */
body.light .drop-icon { color:#4450c8; }

/* V2 — la llamada a la acción de las guías es un ENLACE con aspecto de
   botón: el color de enlace ganaba al del botón y dejaba 2,47:1 en el tema
   claro (medido por test-mobile-a11y). Se fija el texto en blanco y se
   centra como un botón de verdad. */
a.primary-btn, a.primary-btn:visited, a.primary-btn:hover {
  color:#fff; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.guide-intro { font-size:16px; color:var(--text); }
.guide-cta { margin-top:22px; }
.related-guide { font-weight:700; }