/* =============================================================
   MonkPDF — hoja de estilos compartida
   1. Tokens   2. Reset & base   3. Utilidades   4. Tipografía
   5. Componentes (header + mega-menú, tool-card, ad-slot, download panel)
   6. Secciones (hero, cómo-funciona, ideas, faq, categorías del hub)
   7. Efectos   8. Responsive   9. Reduced motion
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* -------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------- */
:root{
  --paper: #fafaf9;
  --card: #ffffff;
  --card-2: #f3f0ea;
  --ink: #1b1917;
  --ink-soft: #6b6560;
  --line: #e7e2d9;
  --line-soft: #f0ece4;
  --accent: #7e721b;
  --accent-strong: #544c12;
  --accent-ink: #1b1917;
  --accent-tint: #f9f6e3;
  --accent-2: #2a2622;
  --accent-2-tint: #ece9e4;
  --good: #1a7a4c;
  --good-tint: #dcf1e4;
  --warn: #a5541a;
  --warn-tint: #f7e5d2;
  --danger: #b3392b;
  --danger-tint: #f8ded9;
  --shadow: 0 1px 2px rgba(20,18,15,.06), 0 14px 32px -16px rgba(20,18,15,.20);
  --shadow-lift: 0 4px 10px rgba(20,18,15,.07), 0 24px 48px -20px rgba(20,18,15,.28);
  --radius: 14px;
  --radius-sm: 9px;
  --brand-gold: #d4c137;
  --grad-brand: linear-gradient(135deg, #7e721b 0%, #544c12 130%);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: #121110;
    --card: #1c1a17;
    --card-2: #242220;
    --ink: #f5f1ea;
    --ink-soft: #b8ada0;
    --line: #35312b;
    --line-soft: #2a2724;
    --accent: #d4c137;
    --accent-strong: #e6db89;
    --accent-ink: #1b1611;
    --accent-tint: #3a2e12;
    --accent-2: #d8d3c8;
    --accent-2-tint: #2c2a26;
    --good: #52c98a;
    --good-tint: #17322a;
    --warn: #e0904a;
    --warn-tint: #3a2414;
    --danger: #e58979;
    --danger-tint: #3a211d;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.6);
    --shadow-lift: 0 4px 12px rgba(0,0,0,.4), 0 28px 56px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper: #121110;
  --card: #1c1a17;
  --card-2: #242220;
  --ink: #f5f1ea;
  --ink-soft: #b8ada0;
  --line: #35312b;
  --line-soft: #2a2724;
  --accent: #d4c137;
  --accent-strong: #e6db89;
  --accent-ink: #1b1611;
  --accent-tint: #3a2e12;
  --accent-2: #d8d3c8;
  --accent-2-tint: #2c2a26;
  --good: #52c98a;
  --good-tint: #17322a;
  --warn: #e0904a;
  --warn-tint: #3a2414;
  --danger: #e58979;
  --danger-tint: #3a211d;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.6);
  --shadow-lift: 0 4px 12px rgba(0,0,0,.4), 0 28px 56px -20px rgba(0,0,0,.7);
}

/* -------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; margin: 0; }
html{ -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: 'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap: pretty; }
h1,h2,h3,h4{ text-wrap: balance; line-height: 1.08; letter-spacing:-.01em; font-family:'Manrope', ui-sans-serif, sans-serif; }
::selection{ background: var(--accent-tint); color: var(--ink); }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

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

/* -------------------------------------------------------------
   3. Utilidades
   ------------------------------------------------------------- */
.container{ max-width: 980px; margin:0 auto; padding:0 20px; }
.container-wide{ max-width: 1180px; margin:0 auto; padding:0 20px; }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
.vis-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius: 999px; font-weight:700; font-size:.95rem;
  font-family:'Manrope', sans-serif; transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s;
  white-space: nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-accent{ background:var(--accent); color:var(--accent-ink); box-shadow: var(--shadow); }
.btn-accent:hover{ background:var(--accent-strong); }
.btn-ghost{ background:var(--card); color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-sm{ padding:8px 14px; font-size:.85rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.04em;
  padding:4px 10px; border-radius:999px; background:var(--accent-tint); color:var(--accent-strong); font-weight:600;
}

/* -------------------------------------------------------------
   5. Header + mega-menú
   ------------------------------------------------------------- */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: var(--paper);
  border-bottom:1px solid var(--line-soft);
}
.site-header .bar{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  gap:16px; padding:16px 20px 12px; max-width:1180px; margin:0 auto;
}
.site-header .bar > .brand{ grid-column:2; justify-self:center; }
.site-header .bar > .nav-toggle{ grid-column:3; justify-self:end; }
.nav-row{ max-width:1180px; margin:0 auto; padding:0 20px 12px; }
.brand{ display:flex; align-items:center; gap:14px; font-family:'Manrope',sans-serif; font-weight:800; font-size:1.55rem; color:var(--ink); }
.brand-mark{ width:auto; height:62px; flex-shrink:0; display:block; object-fit:contain; }
.brand-word{ display:flex; flex-direction:column; line-height:1.1; }
.brand-word .wordmark{ white-space:nowrap; }
.brand-word .lite{ font-weight:500; }
.brand small{ display:block; font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:.62rem; color:var(--ink-soft); letter-spacing:.03em; margin-top:2px; }

.nav-tools{ display:flex; gap:2px; flex-wrap:wrap; align-items:center; }
.nav-tools > a{
  font-size:.85rem; font-weight:600; padding:8px 12px; border-radius:8px; color:var(--ink-soft);
}
.nav-tools > a:hover, .nav-tools > a[aria-current="page"]{ color:var(--accent); background:var(--accent-tint); }

.nav-cat{ position:relative; }
.nav-cat-btn{
  display:flex; align-items:center; gap:5px; font-size:.85rem; font-weight:600; padding:8px 10px;
  border-radius:8px; color:var(--ink-soft);
}
.nav-cat-btn svg{ width:13px; height:13px; transition: transform .15s; }
.nav-cat:hover .nav-cat-btn, .nav-cat:focus-within .nav-cat-btn{ color:var(--accent); background:var(--accent-tint); }
.nav-cat:hover .nav-cat-btn svg, .nav-cat:focus-within .nav-cat-btn svg{ transform: rotate(180deg); }

.nav-dropdown{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  min-width: 300px; background:var(--card); border:1px solid var(--line-soft); border-radius:14px;
  box-shadow: var(--shadow-lift); padding:10px; display:grid; gap:2px;
  opacity:0; visibility:hidden; translate: 0 4px; transition: opacity .14s, visibility .14s, translate .14s;
}
.nav-cat:hover .nav-dropdown, .nav-cat:focus-within .nav-dropdown{ opacity:1; visibility:visible; translate:0 0; }
.nav-dropdown a{
  display:flex; align-items:baseline; gap:8px; padding:9px 12px; border-radius:9px; font-size:.86rem; font-weight:600;
}
.nav-dropdown a:hover{ background:var(--card-2); color:var(--accent); }
.nav-dropdown a .soon-tag{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; font-weight:600; letter-spacing:.03em;
  color:var(--ink-soft); background:var(--card-2); padding:2px 6px; border-radius:999px; text-transform:uppercase;
}

.nav-toggle{ display:none; }
@media (max-width: 980px){
  .nav-row{ display:none; }
  .nav-toggle{ display:flex; }
}

/* Mobile nav (acordeón por categoría) */
.mobile-nav{ border-top:1px solid var(--line-soft); padding:10px 20px 18px; }
.mobile-nav .m-cat{ border-bottom:1px solid var(--line-soft); }
.mobile-nav .m-cat-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:14px 2px; font-family:'Manrope',sans-serif; font-weight:700; font-size:.95rem; text-align:left;
}
.mobile-nav .m-cat-btn svg{ width:16px; height:16px; color:var(--ink-soft); transition: transform .15s; flex-shrink:0; }
.mobile-nav .m-cat.is-collapsed .m-cat-btn svg{ transform: rotate(-90deg); }
/* Por defecto (sin JS) las categorías están abiertas: todo el sitio se puede
   navegar sin depender de que el JS cargue. El JS solo colapsa por defecto
   todas menos la primera, para ahorrar espacio, y activa el toggle. */
.mobile-nav .m-cat-list{ display:flex; flex-direction:column; gap:2px; padding: 0 2px 14px; }
.mobile-nav .m-cat.is-collapsed .m-cat-list{ display:none; }
.mobile-nav .m-cat-list a{
  display:flex; align-items:baseline; gap:8px; padding:9px 10px; border-radius:8px; font-size:.9rem; font-weight:600; color:var(--ink-soft);
}
.mobile-nav .m-cat-list a:hover{ background:var(--card-2); color:var(--accent); }

/* -------------------------------------------------------------
   5. Hero / H1
   ------------------------------------------------------------- */
.hero{ padding: 44px 0 8px; position:relative; }
.hero .eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--accent-strong); display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.hero .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px var(--good-tint); }
h1.tool-h1{ font-size: clamp(1.9rem, 4.4vw, 2.9rem); margin-bottom:12px; }
h1.tool-h1 .grad{
  background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tool-dek{ max-width:58ch; color:var(--ink-soft); font-size:1.08rem; margin-bottom: 26px; }

/* -------------------------------------------------------------
   5. La tarjeta de la herramienta (el componente principal)
   ------------------------------------------------------------- */
.tool-card{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; margin-bottom: 18px;
}
.dropzone{
  border: 2px dashed var(--line); border-radius: var(--radius-sm);
  padding: 34px 20px; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-drag{ border-color: var(--accent); background: var(--accent-tint); }
.dropzone svg{ width:42px; height:42px; color:var(--accent); }
.dropzone .dz-title{ font-family:'Manrope',sans-serif; font-weight:700; font-size:1.05rem; }
.dropzone .dz-sub{ font-size:.85rem; color:var(--ink-soft); }
.dropzone input[type="file"]{ position:absolute; width:1px; height:1px; opacity:0; }

/* Tool card state machine */
.tool-card[data-state="idle"] .st-loading,
.tool-card[data-state="idle"] .st-working,
.tool-card[data-state="idle"] .st-done,
.tool-card[data-state="idle"] .st-error{ display:none; }
.tool-card[data-state="loading-engine"] .st-idle,
.tool-card[data-state="loading-engine"] .st-working,
.tool-card[data-state="loading-engine"] .st-done,
.tool-card[data-state="loading-engine"] .st-error{ display:none; }
.tool-card[data-state="working"] .st-idle,
.tool-card[data-state="working"] .st-loading,
.tool-card[data-state="working"] .st-done,
.tool-card[data-state="working"] .st-error{ display:none; }
.tool-card[data-state="done"] .st-idle,
.tool-card[data-state="done"] .st-loading,
.tool-card[data-state="done"] .st-working,
.tool-card[data-state="done"] .st-error{ display:none; }
.tool-card[data-state="error"] .st-idle,
.tool-card[data-state="error"] .st-loading,
.tool-card[data-state="error"] .st-working,
.tool-card[data-state="error"] .st-done{ display:none; }

.progress-wrap{ padding: 20px 6px; }
.progress-label{ display:flex; justify-content:space-between; font-size:.85rem; color:var(--ink-soft); margin-bottom:8px; }
.progress-track{ height:8px; border-radius:999px; background:var(--card-2); overflow:hidden; }
.progress-bar{ height:100%; width:6%; background:var(--accent); border-radius:999px; transition: width .25s ease; }
.progress-note{ margin-top:10px; font-size:.8rem; color:var(--ink-soft); }

.file-rows{ display:flex; flex-direction:column; gap:8px; margin: 16px 0; }
.file-row{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--card-2); border-radius:10px; font-size:.88rem;
}
.file-row .fname{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'IBM Plex Mono',monospace; font-size:.8rem; }
.file-row .fsize{ color:var(--ink-soft); font-size:.78rem; font-family:'IBM Plex Mono',monospace; }
.file-row button.rm{ color:var(--danger); font-size:1.1rem; line-height:1; padding:2px 6px; }
.file-row.drag-handle{ cursor: grab; }

.error-box{
  display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:10px;
  background:var(--danger-tint); color:var(--danger); font-size:.9rem;
}
.error-box svg{ width:20px; height:20px; flex-shrink:0; margin-top:2px; }

/* -------------------------------------------------------------
   5. Panel de resultado / descarga
   ------------------------------------------------------------- */
.result-panel{ display:flex; flex-direction:column; gap:16px; }
.result-summary{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background: var(--good-tint); border-radius:10px; color:var(--good); font-weight:600; font-size:.92rem;
}
.result-summary svg{ width:20px; height:20px; flex-shrink:0; }
.result-summary .muted{ color: var(--ink-soft); font-weight:500; }

.download-panel{
  border:1px solid var(--line-soft); border-radius:12px; padding:16px; background:var(--card-2);
  display:flex; flex-direction:column; gap:14px;
}
.field-row{ display:flex; flex-direction:column; gap:6px; }
.field-row label{ font-size:.76rem; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; }
.filename-input-wrap{ display:flex; align-items:stretch; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--card); }
.filename-input-wrap input{
  flex:1; min-width:0; border:0; padding:11px 12px; font-family:'IBM Plex Mono',monospace; font-size:.88rem;
  background:transparent; color:var(--ink);
}
.filename-input-wrap input:focus{ outline:none; }
.filename-ext{
  display:flex; align-items:center; padding:0 12px; font-family:'IBM Plex Mono',monospace; font-size:.85rem;
  color: var(--ink-soft); background: var(--card-2); border-left:1px solid var(--line);
}
.format-options{ display:flex; gap:8px; flex-wrap:wrap; }
.format-opt{
  display:flex; align-items:center; gap:6px; padding:8px 13px; border-radius:8px;
  border:1px solid var(--line); background:var(--card); font-size:.85rem; font-weight:600;
}
.format-opt input{ accent-color: var(--accent); }
.format-opt.is-active{ border-color:var(--accent); background:var(--accent-tint); color:var(--accent-strong); }
.zip-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
  border:1px dashed var(--line); border-radius:9px; font-size:.85rem;
}
.zip-toggle .switch{
  width:38px; height:22px; border-radius:999px; background:var(--line); position:relative; flex-shrink:0;
  transition: background .15s;
}
.zip-toggle .switch::after{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition: transform .18s cubic-bezier(.16,1,.3,1);
}
.zip-toggle input{ display:none; }
.zip-toggle input:checked + .switch{ background:var(--accent); }
.zip-toggle input:checked + .switch::after{ transform: translateX(16px); }
.zip-note{ font-size:.76rem; color:var(--ink-soft); margin-top:2px; }

.download-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.download-actions .btn{ flex:1; min-width: 180px; }

.reset-link{ align-self:flex-start; font-size:.85rem; font-weight:600; color:var(--ink-soft); padding:6px 2px; }
.reset-link:hover{ color:var(--accent); }

/* -------------------------------------------------------------
   5. Cuadrícula de miniaturas de página (eliminar / extraer / ordenar)
   ------------------------------------------------------------- */
.pages-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.pages-toolbar .hint{ font-size:.85rem; color:var(--ink-soft); }
.pages-toolbar .actions{ display:flex; gap:8px; flex-wrap:wrap; }
.pages-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:14px;
  max-height: 560px; overflow-y:auto; padding: 4px; border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  background: var(--card-2);
}
.page-cell{
  position:relative; background:var(--card); border:2px solid var(--line); border-radius:10px; overflow:hidden;
  cursor:pointer; transition: border-color .12s, transform .12s; user-select:none;
}
.page-cell img{ width:100%; display:block; aspect-ratio: 3/4; object-fit:contain; background:#fff; }
.page-cell .page-num{
  position:absolute; left:6px; bottom:6px; font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:600;
  background: color-mix(in srgb, var(--ink) 78%, transparent); color:#fff; padding:2px 7px; border-radius:999px;
}
.page-cell .page-mark{
  position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:var(--card); border:1px solid var(--line); font-size:.9rem; color:var(--ink-soft);
  box-shadow:var(--shadow);
}
.page-cell .drag-handle{
  position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; background:color-mix(in srgb, var(--card) 85%, transparent); color:var(--ink-soft); cursor:grab; font-size:1rem;
}
.page-cell:hover{ border-color: var(--accent); }
.page-cell.is-marked-remove{ border-color:var(--danger); }
.page-cell.is-marked-remove img{ opacity:.45; }
.page-cell.is-marked-remove .page-mark{ background:var(--danger); color:#fff; border-color:var(--danger); }
.page-cell.is-marked-keep{ border-color:var(--good); }
.page-cell.is-marked-keep .page-mark{ background:var(--good); color:#fff; border-color:var(--good); }
.page-cell.is-dragging{ opacity:.4; }
.page-cell.is-drag-over{ border-color:var(--accent-2); border-style:dashed; }
.pages-skeleton{ display:flex; align-items:center; justify-content:center; gap:10px; padding:40px; color:var(--ink-soft); font-size:.9rem; }

/* -------------------------------------------------------------
   5. Vista 3D de la carpeta (decorativa, tras completar)
   ------------------------------------------------------------- */
.folder3d-wrap{
  border-radius:12px; overflow:hidden; border:1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  position: relative; height: 180px;
}
.folder3d-wrap canvas{ width:100%!important; height:100%!important; display:block; }
.folder3d-caption{
  position:absolute; left:0; right:0; bottom:0; padding:8px 14px;
  font-size:.74rem; color:var(--ink-soft); background: color-mix(in srgb, var(--card) 75%, transparent);
  backdrop-filter: blur(3px);
}
.folder3d-fallback{
  display:flex; align-items:center; justify-content:center; height:100%; color:var(--ink-soft); font-size:.85rem;
}

/* -------------------------------------------------------------
   5. Insignia de privacidad + límites honestos
   ------------------------------------------------------------- */
.privacy-badge{
  display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:12px 14px;
  border-radius:10px; background: var(--accent-tint); color: var(--accent-strong); font-size:.85rem;
}
.privacy-badge svg{ width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.limits-note{ margin-top:8px; font-size:.78rem; color:var(--ink-soft); padding-left:2px; }

/* -------------------------------------------------------------
   5. Ad slots — placeholders únicamente
   ------------------------------------------------------------- */
.ad-slot{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--line); border-radius:10px; color: var(--ink-soft);
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  background: repeating-linear-gradient(135deg, var(--card-2), var(--card-2) 10px, var(--card) 10px, var(--card) 20px);
  margin: 30px auto;
}
.ad-slot.leaderboard{ max-width:728px; min-height:90px; }
.ad-slot.rect{ max-width:336px; min-height:280px; }
.ad-slot.banner{ max-width:100%; min-height:100px; }

/* -------------------------------------------------------------
   6. Secciones compartidas
   ------------------------------------------------------------- */
section.page-section{ padding: 46px 0; }
section.page-section.tight{ padding: 30px 0; }
.section-head{ margin-bottom: 22px; max-width: 62ch; }
.section-head h2{ font-size: 1.55rem; margin-bottom: 8px; }
.section-head p{ color: var(--ink-soft); font-size:.98rem; }

.steps3{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.step3{ background:var(--card); border:1px solid var(--line-soft); border-radius:12px; padding:20px; }
.step3 .num{ font-family:'Manrope',sans-serif; font-weight:800; font-size:1.6rem; color:var(--accent); margin-bottom:8px; }
.step3 h3{ font-size:1.02rem; margin-bottom:6px; }
.step3 p{ font-size:.88rem; color:var(--ink-soft); }

.ideas-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
.idea-card{ display:flex; gap:12px; background:var(--card); border:1px solid var(--line-soft); border-radius:12px; padding:16px; }
.idea-card .ico{ width:36px; height:36px; border-radius:9px; background:var(--accent-tint); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.idea-card .ico svg{ width:19px; height:19px; }
.idea-card h3{ font-size:.94rem; margin-bottom:4px; }
.idea-card p{ font-size:.85rem; color:var(--ink-soft); }

.faq-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line-soft); }
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-item summary{
  padding:16px 4px; font-weight:700; font-family:'Manrope',sans-serif; font-size:.98rem;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-size:1.3rem; color:var(--accent); flex-shrink:0; transition:transform .18s;
}
.faq-item[open] summary::after{ content:'–'; }
.faq-item p{ padding: 0 4px 16px; color:var(--ink-soft); font-size:.92rem; max-width:64ch; }

.tools-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.tool-tile{
  display:flex; flex-direction:column; gap:10px; background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:20px; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tool-tile:hover{ border-color:var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.tool-tile .ico{ width:40px; height:40px; border-radius:10px; background:var(--accent-tint); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; }
.tool-tile .ico svg{ width:21px; height:21px; }
.tool-tile h3{ font-size:1rem; }
.tool-tile p{ font-size:.85rem; color:var(--ink-soft); flex:1; }
.tool-tile .go{ font-size:.82rem; font-weight:700; color:var(--accent); }

/* Categorías del hub (Organizar / Convertir a / Convertir desde / Editar y seguridad) */
.tool-category{ margin-bottom: 40px; }
.tool-category:last-child{ margin-bottom:0; }
.tool-category-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.tool-category-head .cat-ico{
  width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-2-tint); color:var(--accent-2); flex-shrink:0;
}
.tool-category-head .cat-ico svg{ width:17px; height:17px; }
.tool-category-head h2{ font-size:1.15rem; }
.tool-category-head .count{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--ink-soft); background:var(--card-2); padding:3px 9px; border-radius:999px; }

.tool-tile.is-soon{
  cursor:default; border-style:dashed; background:transparent;
}
.tool-tile.is-soon:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.tool-tile.is-soon .ico{ background:var(--card-2); color:var(--ink-soft); }
.tool-tile.is-soon .go{ color:var(--ink-soft); }
.tool-tile .soon-badge{
  align-self:flex-start; font-family:'IBM Plex Mono',monospace; font-size:.62rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-soft); background:var(--card-2); padding:3px 8px; border-radius:999px;
}

.more-tools-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.more-tool-card{
  display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--line-soft);
  border-radius:12px; background:var(--card);
}
.more-tool-card .ico{ width:32px; height:32px; border-radius:8px; background:var(--accent-tint); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; }
.more-tool-card .ico svg{ width:17px; height:17px; }
.more-tool-card h3{ font-size:.88rem; }
.more-tool-card p{ font-size:.78rem; color:var(--ink-soft); }

.seo-copy{ max-width:66ch; color:var(--ink-soft); font-size:.95rem; }
.seo-copy p + p{ margin-top:12px; }
.seo-copy h2{ color:var(--ink); font-size:1.2rem; margin: 22px 0 8px; }

footer.site-footer{ border-top:1px solid var(--line-soft); padding: 32px 0 40px; margin-top:20px; }
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; }
.footer-brand .brand-mark{ height:40px; }
.footer-brand .brand{ font-size:1.15rem; }
.footer-brand p{ font-size:.82rem; color:var(--ink-soft); max-width:36ch; margin-top:8px; }
.footer-links{ display:flex; gap:36px; flex-wrap:wrap; }
.footer-col h4{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:10px; }
.footer-col a{ display:block; font-size:.85rem; padding:4px 0; color:var(--ink-soft); }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{ margin-top:26px; padding-top:16px; border-top:1px solid var(--line-soft); font-size:.76rem; color:var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.credits{ font-size:.72rem; color:var(--ink-soft); opacity:.8; }

.callout{
  display:flex; gap:12px; padding:16px 18px; border-radius:12px; background:var(--warn-tint); color:var(--warn);
  font-size:.88rem; align-items:flex-start;
}
.callout svg{ width:19px; height:19px; flex-shrink:0; margin-top:1px; }

/* -------------------------------------------------------------
   8. Responsive (mobile-first)
   ------------------------------------------------------------- */
@media (max-width: 720px){
  .steps3{ grid-template-columns: 1fr; }
  .ideas-grid{ grid-template-columns: 1fr; }
  .tools-grid{ grid-template-columns: 1fr 1fr; }
  .more-tools-strip{ grid-template-columns: 1fr 1fr; }
  .download-actions .btn{ min-width: 100%; }
}
@media (max-width: 540px){
  .tools-grid{ grid-template-columns: 1fr; }
  .more-tools-strip{ grid-template-columns: 1fr; }
  h1.tool-h1{ font-size: 1.7rem; }
  .site-header .bar{ padding-left:12px; padding-right:12px; gap:8px; }
  .brand{ font-size:1.05rem; gap:8px; }
  .brand-mark{ height:38px; }
}

/* -------------------------------------------------------------
   9. Reduced motion — solo lo intrusivo
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .tool-tile, .btn{ transition: none; }
}

/* -------------------------------------------------------------
   10. Comparar PDF — columnas de diff lado a lado
   ------------------------------------------------------------- */
.muted{ color: var(--ink-soft); }
.diff-cols{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 720px){ .diff-cols{ grid-template-columns: 1fr; } }
.diff-panel{ background:var(--card-2); border:1px solid var(--line); border-radius:10px; padding:14px 16px; font-size:.92rem; line-height:1.65; word-wrap:break-word; max-height:420px; overflow-y:auto; }
.diff-panel-head{ font-weight:700; font-family:'Manrope',sans-serif; margin-bottom:8px; font-size:.85rem; text-transform:uppercase; letter-spacing:.02em; color:var(--ink-soft); }
.diff-del{ color:#c0392b; background:rgba(192,57,43,.12); text-decoration:line-through; text-decoration-thickness:1.5px; }
.diff-ins{ color:#1c8c47; background:rgba(28,140,71,.12); text-decoration:none; }
.diff-summary-bar{ background:var(--card-2); border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:.92rem; margin-bottom:14px; }
.diff-upload-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 640px){ .diff-upload-cols{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------
   11. Pipeline PDF — pasos encadenados
   ------------------------------------------------------------- */
.pipe-step{ border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:10px; transition:opacity .15s; background:var(--card); }
.pipe-step.is-off{ opacity:.55; }
.pipe-step-head{ display:flex; align-items:center; gap:10px; }
.pipe-step-num{ width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; font-size:.76rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pipe-step-title{ font-weight:700; font-size:.94rem; flex:1; }
.pipe-step-toggle{ display:flex; align-items:center; }
.pipe-step-toggle input{ display:none; }
.pipe-step-toggle .switch{
  width:38px; height:22px; border-radius:999px; background:var(--line); position:relative; flex-shrink:0;
  transition: background .15s;
}
.pipe-step-toggle .switch::after{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition: transform .18s cubic-bezier(.16,1,.3,1);
}
.pipe-step-toggle input:checked + .switch{ background:var(--accent); }
.pipe-step-toggle input:checked + .switch::after{ transform: translateX(16px); }
.pipe-step-body{ margin-top:12px; padding-left:34px; display:none; }
.pipe-step.is-on .pipe-step-body{ display:block; }
.pipe-log{ font-family: ui-monospace, Menlo, Consolas, monospace; font-size:.8rem; background:#12181a; color:#bdf3dc; border-radius:10px; padding:14px 16px; margin-top:14px; max-height:260px; overflow-y:auto; white-space:pre-wrap; display:none; }
.pipe-log .ok{ color:#7ee6bc; }
.pipe-log .warn{ color:#ffcf7a; }

/* 12. Barra "sin conexión" (modo offline de todo el sitio) */
.conn-banner{
  position: sticky; top:0; z-index:60;
  background: #1f2937; color:#fff; text-align:center;
  font-size:.82rem; font-weight:600; line-height:1.4;
  padding:8px 16px;
}
@media (max-width: 640px){ .conn-banner{ font-size:.76rem; padding:7px 12px; } }

/* 13. Renombrar PDF por lotes */
.preview-table-wrap{ overflow-x:auto; }
table.preview-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.preview-table th, .preview-table td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.preview-table th{ color:var(--ink-soft); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; }
.preview-table td.new-name{ font-weight:700; color:var(--accent); font-family:'IBM Plex Mono',monospace; }
.preview-table td.meta{ font-size:.78rem; color:var(--ink-soft); }
.preview-table td.meta.warn-cell{ color:#b3401f; }
.limits-note code{ background:var(--card-2); padding:1px 5px; border-radius:4px; font-family:'IBM Plex Mono',monospace; font-size:.78rem; }