/* SinRastro — hoja de estilos
   Concepto: "laboratorio nocturno". Fondo índigo casi negro, auroras de naranja
   arcilla (el naranja oscuro de Claude) y lila eléctrico, vidrio esmerilado con bordes
   de degradado y un láser que recorre lo que se "procesa". Todo se mueve, pero
   respeta a quien pide menos movimiento (prefers-reduced-motion). */

@font-face { font-family: 'Unbounded'; font-weight: 500; font-display: swap; src: url(/assets/fonts/unbounded-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Unbounded'; font-weight: 700; font-display: swap; src: url(/assets/fonts/unbounded-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plex'; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plex'; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plex'; font-weight: 600; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }

:root {
  --bg: #0A0713;
  --bg-2: #110B1F;
  --bg-3: #181029;
  --glass: rgba(255, 255, 255, .045);
  --glass-2: rgba(255, 255, 255, .075);
  --line: rgba(196, 181, 253, .14);
  --line-2: rgba(196, 181, 253, .28);
  --text: #F3EFFB;
  --muted: #ADA3C6;
  --dim: #7F7698;

  --naranja: #D97757;      /* naranja de Claude */
  --naranja-hondo: #B9542F;
  --naranja-luz: #FF9F75;
  --lila: #A78BFA;
  --lila-hondo: #7C3AED;
  --lila-luz: #D6CBFF;
  --menta: #5EEAD4;
  --alerta: #FF6B6B;

  --grad: linear-gradient(115deg, var(--naranja-hondo) 0%, var(--naranja) 28%, #C77DD6 58%, var(--lila) 78%, var(--lila-hondo) 100%);
  --grad-soft: linear-gradient(135deg, rgba(217,119,87,.22), rgba(167,139,250,.18));
  --glow-n: 0 0 0 1px rgba(217,119,87,.4), 0 10px 40px -10px rgba(217,119,87,.55);
  --glow-l: 0 0 0 1px rgba(167,139,250,.45), 0 10px 40px -10px rgba(124,58,237,.6);

  --display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --body: 'Plex', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --r: 16px;
  --r-sm: 10px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  font: 400 1.0625rem/1.65 var(--body);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Auroras de fondo: dos manchas que respiran despacio */
body::before, body::after {
  content: ''; position: fixed; z-index: -2; pointer-events: none; border-radius: 50%;
  filter: blur(90px); opacity: .55; will-change: transform;
}
body::before { width: 62vmax; height: 62vmax; left: -18vmax; top: -24vmax; background: radial-gradient(circle, rgba(217,119,87,.55), transparent 62%); animation: aurora-a 22s ease-in-out infinite alternate; }
body::after { width: 58vmax; height: 58vmax; right: -20vmax; top: 10vh; background: radial-gradient(circle, rgba(124,58,237,.6), transparent 62%); animation: aurora-b 26s ease-in-out infinite alternate; }
@keyframes aurora-a { to { transform: translate(14vmax, 18vmax) scale(1.15); } }
@keyframes aurora-b { to { transform: translate(-12vmax, 30vh) scale(.9); } }
/* Retícula técnica */
.grid-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(196,181,253,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(196,181,253,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h2 { font-size: clamp(1.45rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.08rem; font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: var(--lila-luz); text-underline-offset: 3px; text-decoration-color: rgba(167,139,250,.5); transition: color .2s; }
a:hover { color: #fff; text-decoration-color: var(--naranja); }
img, canvas, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--naranja-luz); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
::selection { background: rgba(217,119,87,.45); color: #fff; }

.grad-text { background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 .78rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--naranja-luz); margin-bottom: 14px; }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--grad); border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--naranja); color: #1a0d07; padding: 8px 14px; z-index: 100; border-radius: 8px; }
.skip:focus { left: 8px; }
.lead { font-size: 1.16rem; color: var(--muted); max-width: 62ch; }
.small-muted { color: var(--muted); font-size: .9rem; }
.block-small { display: block; color: var(--muted); font-size: .84rem; font-weight: 400; margin-top: 2px; }

/* ---------- Cabecera ---------- */
.site-header { position: sticky; top: 0; z-index: 40; view-transition-name: cabecera; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: rgba(10,7,19,.62); border-bottom: 1px solid var(--line); transition: background .3s; }
.site-header.scrolled { background: rgba(10,7,19,.86); }
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--grad); opacity: .55; transform: scaleX(var(--progress, 0)); transform-origin: left; }
.bar { max-width: 1400px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; text-decoration: none; --logo-bg: #0D0A16; }
.logo { display: block; height: 34px; width: auto; overflow: visible; }
.brand .logo { filter: drop-shadow(0 0 14px rgba(217,119,87,.25)); transition: filter .3s, transform .4s var(--ease); }
.brand:hover .logo { filter: drop-shadow(0 0 16px rgba(167,139,250,.55)); transform: translateY(-1px); }
.logo-cursor { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nav { display: flex; gap: 6px; margin-left: auto; }
.nav a { position: relative; color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem; padding: 8px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.nav a:hover { color: var(--text); background: var(--glass-2); }
.nav a[aria-current="page"] { color: var(--text); background: var(--grad-soft); box-shadow: inset 0 0 0 1px var(--line-2); }
.nav-toggle { display: none; margin-left: auto; background: var(--glass); border: 1px solid var(--line-2); color: var(--text); border-radius: 999px; padding: 7px 14px; font: 500 .95rem var(--body); }
.net { display: inline-flex; align-items: center; gap: 8px; font: 500 .78rem var(--mono); color: var(--muted); white-space: nowrap; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); }
.net i { width: 8px; height: 8px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 0 rgba(94,234,212,.6); animation: ping 2.4s infinite; }
.net.offline i { background: var(--naranja); animation-name: ping-n; }
.net.offline { color: var(--naranja-luz); border-color: rgba(217,119,87,.4); }
@keyframes ping { 70% { box-shadow: 0 0 0 7px rgba(94,234,212,0); } 100% { box-shadow: 0 0 0 0 rgba(94,234,212,0); } }
@keyframes ping-n { 70% { box-shadow: 0 0 0 7px rgba(217,119,87,0); } }

@media (max-width: 980px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); flex-direction: column; gap: 2px; background: rgba(17,11,31,.97); border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px; box-shadow: 0 30px 60px -20px #000; }
  .nav.open { display: flex; animation: drop .25s var(--ease); }
  .nav a { padding: 12px 14px; border-radius: 10px; }
  .net span { display: none; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Marco ---------- */
.frame { max-width: 1140px; margin: 0 auto; padding: 36px 24px 72px; }
main > section + section { margin-top: 96px; }

/* ---------- Franja de privacidad, visible en todas las páginas ---------- */
.trust-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; padding: 9px 20px; background: linear-gradient(90deg, rgba(94,234,212,.16), rgba(167,139,250,.14)); border-bottom: 1px solid rgba(94,234,212,.28); color: var(--text); font-size: .86rem; text-decoration: none; text-align: center; }
.trust-bar span { display: inline-flex; align-items: center; gap: 7px; }
.trust-bar span + span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--menta); margin-right: 12px; }
.trust-bar strong { color: var(--menta); }
.trust-bar .lock { width: 16px; height: 16px; color: var(--menta); flex: none; }
.trust-bar:hover { background: linear-gradient(90deg, rgba(94,234,212,.24), rgba(167,139,250,.2)); }
@media (max-width: 620px) { .trust-bar span + span::before { display: none; } .trust-bar { font-size: .8rem; } }

/* ---------- Botones ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 1rem var(--body); padding: 11px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; color: var(--text); transition: transform .25s var(--ease), box-shadow .25s, background-color .2s, border-color .2s, color .2s; }
.btn:hover { transform: translateY(-2px); color: #fff; }
.btn:active { transform: translateY(0) scale(.98); }
.btn.big { padding: 15px 30px; font-size: 1.05rem; }
.btn.small { padding: 7px 14px; font-size: .88rem; }
.btn.primary, .btn.ink { background: var(--grad); background-size: 160% 100%; background-position: 0 0; color: #fff; box-shadow: 0 10px 30px -10px rgba(217,119,87,.7), inset 0 1px 0 rgba(255,255,255,.25); }
.btn.primary:hover, .btn.ink:hover { background-position: 100% 0; box-shadow: 0 14px 40px -10px rgba(124,58,237,.75), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.primary::after, .btn.ink::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn.primary:hover::after, .btn.ink:hover::after { transform: translateX(120%); }
.btn.ghost, .btn.ghost-dark { background: var(--glass); border-color: var(--line-2); color: var(--text); backdrop-filter: blur(8px); }
.btn.ghost:hover, .btn.ghost-dark:hover { border-color: var(--lila); box-shadow: var(--glow-l); }
.btn.danger { border-color: rgba(255,107,107,.55); color: #FFB4B4; background: rgba(255,107,107,.06); }
.btn.danger:hover { background: rgba(255,107,107,.14); box-shadow: 0 0 0 1px rgba(255,107,107,.6), 0 10px 30px -12px rgba(255,107,107,.6); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-2); background: var(--glass); color: var(--text); cursor: pointer; font-size: 1rem; transition: border-color .2s, background .2s; }
.icon-btn:hover:not(:disabled) { border-color: var(--lila); background: rgba(167,139,250,.12); }
.icon-btn:disabled { opacity: .35; cursor: default; }

/* ---------- Iconos ---------- */
.ico { width: 22px; height: 22px; flex: none; }
.ico-lg { width: 28px; height: 28px; }
.ico-xl { width: 46px; height: 46px; }
.ico-tile { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--grad-soft); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--lila-luz); transition: transform .4s var(--ease), box-shadow .3s, color .3s; }
.ico-tile .ico, .ico-tile .ico-lg { width: 26px; height: 26px; }

/* ---------- Vidrio ---------- */
.sheet, .panel, .glass-card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 60px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); }
.sheet { color: var(--text); }
.crop { position: absolute; width: 16px; height: 16px; border-color: var(--naranja); border-style: solid; border-width: 0; opacity: .8; transition: all .35s var(--ease); }
.crop.tl { top: 12px; left: 12px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 4px; }
.crop.tr { top: 12px; right: 12px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 4px; border-color: var(--lila); }
.crop.bl { bottom: 12px; left: 12px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 4px; border-color: var(--lila); }
.crop.br { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 4px; }

/* Borde de degradado animado (para lo importante) */
.glow-border { position: relative; }
.glow-border::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--ang, 0deg), var(--naranja), var(--lila), var(--lila-hondo), var(--naranja-hondo), var(--naranja)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-border 6s linear infinite; pointer-events: none; opacity: .85; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin-border { to { --ang: 360deg; } }

/* ---------- Aparición al hacer scroll ---------- */
.fx .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.fx .reveal.in { opacity: 1; transform: none; }

/* ---------- Inicio: héroe ---------- */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; padding-top: 28px; min-height: min(78vh, 720px); }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.3rem); line-height: 1; letter-spacing: -0.04em; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: inline-block; animation: rise 1s var(--ease) both; animation-delay: calc(var(--i) * .12s); }
@keyframes rise { from { transform: translateY(105%); } }
.hero .lead { animation: fade-up .9s .35s var(--ease) both; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 26px; animation: fade-up .9s .5s var(--ease) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
.pledges { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; animation: fade-up .9s .65s var(--ease) both; }
.pledges li { display: inline-flex; align-items: center; gap: 8px; font: 500 .82rem var(--mono); color: var(--muted); padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); }
.pledges li::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--grad); transform: rotate(45deg); }

/* Arte del héroe: un PDF que se vuelve editable */
.hero-art { position: relative; aspect-ratio: 1 / 1.05; animation: fade-up 1.1s .3s var(--ease) both; }
.orbit { position: absolute; inset: 4%; border-radius: 50%; border: 1px dashed var(--line-2); animation: spin 40s linear infinite; }
.orbit.o2 { inset: 16%; border-style: solid; border-color: rgba(217,119,87,.18); animation-duration: 28s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.chip { position: absolute; font: 600 .74rem var(--mono); letter-spacing: .06em; padding: 7px 12px; border-radius: 10px; background: rgba(17,11,31,.85); border: 1px solid var(--line-2); box-shadow: 0 10px 30px -10px #000; backdrop-filter: blur(8px); animation: float 6s ease-in-out infinite; z-index: 3; }
.chip b { color: var(--naranja-luz); }
.chip.c1 { top: 8%; left: 4%; } .chip.c2 { top: 14%; right: 0; animation-delay: -1.5s; } .chip.c3 { bottom: 16%; left: -2%; animation-delay: -3s; } .chip.c4 { bottom: 6%; right: 8%; animation-delay: -4.5s; }
.chip.c2 b, .chip.c4 b { color: var(--lila-luz); }
@keyframes float { 50% { transform: translateY(-12px); } }
.doc-card { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 210 / 297; transform: translate(-50%, -50%) rotate(-4deg); border-radius: 12px; background: linear-gradient(180deg, #FBF8FF, #EDE7FA); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.4), 0 0 80px -10px rgba(167,139,250,.45); padding: 10% 10%; display: flex; flex-direction: column; gap: 5.5%; overflow: hidden; z-index: 2; animation: tilt 9s ease-in-out infinite; }
@keyframes tilt { 50% { transform: translate(-50%, -52%) rotate(-1deg); } }
.doc-card .band { margin: -18% -18% 4%; height: 26%; background: linear-gradient(120deg, #2A1650, #4B1E3A 60%, #7A3A22); display: flex; flex-direction: column; justify-content: flex-end; gap: 10%; padding: 0 18% 9%; }
.doc-card .band i { display: block; height: 11%; border-radius: 3px; background: rgba(255,255,255,.9); width: 72%; }
.doc-card .band i + i { width: 46%; background: var(--naranja); height: 7%; }
.doc-card .ln { height: 3.4%; border-radius: 3px; background: #CFC6E2; }
.doc-card .ln.s { width: 68%; }
.doc-card .ln.edit { position: relative; background: none; height: auto; font: 600 clamp(.55rem, 1.3vw, .82rem)/1.2 var(--body); color: #2A1650; white-space: nowrap; outline: 2px dashed var(--lila-hondo); outline-offset: 3px; border-radius: 3px; }
.doc-card .ln.edit .typed { display: inline-block; overflow: hidden; vertical-align: bottom; border-right: 2px solid var(--naranja-hondo); animation: typing 7s steps(22) infinite, caret .7s step-end infinite; max-width: 0; }
@keyframes typing { 0%, 12% { max-width: 0; } 45%, 85% { max-width: 22ch; } 100% { max-width: 0; } }
@keyframes caret { 50% { border-color: transparent; } }
.doc-card .img { height: 22%; border-radius: 6px; background: linear-gradient(135deg, #7C3AED, #D97757); position: relative; overflow: hidden; }
.doc-card .img::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(60deg, transparent 0 8px, rgba(255,255,255,.18) 8px 10px); }
.laser { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--naranja-luz), var(--lila-luz), transparent); box-shadow: 0 0 18px 4px rgba(217,119,87,.55); animation: sweep 3.6s ease-in-out infinite; z-index: 4; }
@keyframes sweep { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 50% { top: calc(100% - 3px); opacity: 1; } 60%, 100% { top: calc(100% - 3px); opacity: 0; } }
.art-caption { position: absolute; bottom: -10px; left: 0; right: 0; text-align: center; font: 500 .8rem var(--mono); color: var(--dim); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 30px; min-height: 0; }
  .hero-art { max-width: 380px; width: 100%; margin: 0 auto; }
}

/* Cinta de formatos */
.marquee { margin-top: 70px; overflow: hidden; border-block: 1px solid var(--line); padding: 16px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 46px; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font: 500 .92rem var(--mono); color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 46px; }
.marquee span::after { content: '✦'; color: var(--naranja); }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Encabezados de sección ---------- */
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--muted); max-width: 52ch; }

/* ---------- Herramientas ---------- */
.cat { margin-top: 44px; }
.cat:first-of-type { margin-top: 0; }
.cat-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-title h3 { margin: 0; font-size: 1rem; font-family: var(--mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--naranja-luz); }
.cat-title p { margin: 0; color: var(--dim); font-size: .92rem; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.tool-card { --mx: 50%; --my: 50%; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 20px; color: var(--text); text-decoration: none; border-radius: var(--r); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid var(--line); overflow: hidden; transition: transform .45s var(--ease), border-color .3s, box-shadow .4s; isolation: isolate; }
.tool-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(217,119,87,.20), rgba(167,139,250,.12) 35%, transparent 60%); opacity: 0; transition: opacity .35s; }
.tool-card:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: 0 30px 60px -30px rgba(124,58,237,.6); color: var(--text); }
.tool-card:hover::before { opacity: 1; }
.tool-card:hover .ico-tile { transform: rotate(-6deg) scale(1.06); color: #fff; box-shadow: inset 0 0 0 1px var(--lila), 0 0 30px -4px rgba(167,139,250,.6); }
.tool-card strong { font: 500 1.08rem/1.25 var(--display); letter-spacing: -.01em; }
.tool-card .desc { font-size: .95rem; color: var(--muted); line-height: 1.5; }
.io { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; align-items: center; gap: 8px; font: 500 .74rem var(--mono); color: var(--dim); }
.io b { color: var(--lila-luz); font-weight: 500; }
.io .arr { color: var(--naranja); }
.badge { position: absolute; top: 18px; right: 18px; font: 600 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; color: #fff; background: var(--grad); box-shadow: 0 6px 20px -6px rgba(217,119,87,.8); }
.tool-card.featured { grid-column: span 2; padding: 30px; background: radial-gradient(120% 140% at 0% 0%, rgba(217,119,87,.20), transparent 50%), radial-gradient(120% 140% at 100% 100%, rgba(124,58,237,.28), transparent 55%), rgba(255,255,255,.03); border-color: var(--line-2); }
.tool-card.featured strong { font-size: 1.55rem; font-weight: 700; }
.tool-card.featured .desc { font-size: 1.02rem; max-width: 46ch; color: #CFC6E6; }
.tool-card.featured .ico-tile { width: 62px; height: 62px; }
@media (max-width: 600px) { .tool-card.featured { grid-column: auto; } }
.tool-card.ask { background: transparent; border: 1px dashed var(--line-2); justify-content: center; }
.suggest-cta { margin-top: 30px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 20px 24px; border-radius: var(--r); border: 1px dashed var(--line-2); background: linear-gradient(120deg, rgba(217,119,87,.08), rgba(124,58,237,.08)); color: var(--text); text-decoration: none; transition: border-color .25s, transform .35s var(--ease), box-shadow .3s; }
.suggest-cta:hover { color: var(--text); border-style: solid; border-color: var(--lila); transform: translateY(-3px); box-shadow: var(--glow-l); }
.suggest-cta strong { display: block; font-size: 1.05rem; }
.suggest-cta small { display: block; color: var(--muted); font-size: .92rem; margin-top: 2px; }
.sc-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 1.1rem; }
.suggest-cta .go { font: 600 .82rem var(--mono); color: var(--naranja-luz); white-space: nowrap; }
.suggest-cta .go::after { content: ' →'; }
@media (max-width: 640px) { .suggest-cta { grid-template-columns: auto 1fr; } .suggest-cta .go { grid-column: 2; } }

/* Aviso al volver con «Atrás» */
.back-notice { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; margin-bottom: 18px; padding: 18px 20px; border-radius: var(--r); border: 1px solid rgba(217,119,87,.55); background: linear-gradient(120deg, rgba(217,119,87,.14), rgba(124,58,237,.10)); box-shadow: var(--glow-n); animation: fade-up .5s var(--ease); }
.back-notice strong { display: block; font-size: 1.05rem; }
.back-notice p { margin: 4px 0 12px; color: #D7CFEA; }
.bn-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 1.3rem; }
.bn-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ¿Qué herramienta necesito? */
.chooser { display: grid; gap: 10px; }
.choose { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 18px 22px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--glass); text-decoration: none; color: var(--text); transition: border-color .25s, background .25s, transform .35s var(--ease); }
.choose:hover { border-color: var(--lila); background: rgba(167,139,250,.08); transform: translateX(6px); color: var(--text); }
.choose .want { font-size: 1.02rem; }
.choose .want small { display: block; color: var(--dim); font-size: .86rem; margin-top: 2px; }
.choose .go { font: 600 .82rem var(--mono); color: var(--naranja-luz); white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.choose .go::after { content: '→'; transition: transform .3s var(--ease); }
.choose:hover .go::after { transform: translateX(5px); }
@media (max-width: 640px) { .choose { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Flujo de 3 pasos ---------- */
.flow-steps, .howto { counter-reset: n; list-style: none; padding: 0; margin: 0; }
.flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
.flow-steps li { position: relative; padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--glass); }
.flow-steps b { width: 42px; height: 42px; border-radius: 12px; background: var(--grad); color: #fff; display: grid; place-items: center; font: 600 1rem var(--mono); box-shadow: 0 10px 30px -10px rgba(217,119,87,.8); }
.flow-steps strong { font: 500 1.2rem var(--display); margin-top: 6px; }
.flow-steps span { color: var(--muted); }
.flow-steps li:not(:last-child)::after { content: ''; position: absolute; top: 46px; right: -19px; width: 20px; height: 2px; background: linear-gradient(90deg, var(--naranja), var(--lila)); }
@media (max-width: 760px) { .flow-steps { grid-template-columns: 1fr; } .flow-steps li:not(:last-child)::after { display: none; } }

/* ---------- Prueba de privacidad ---------- */
.proof { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; }
.proof p { color: var(--muted); }
.specs { margin: 0; display: grid; gap: 12px; }
.specs div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--glass); }
.specs dt { color: var(--muted); font-size: .95rem; }
.specs dd { margin: 0; font: 700 1.6rem var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 760px) { .proof { grid-template-columns: 1fr; } }

/* ---------- Privacidad ---------- */
.privacy-sec { position: relative; padding: 40px 36px; border-radius: var(--r); border: 1px solid rgba(94,234,212,.3); background: linear-gradient(145deg, rgba(94,234,212,.09), rgba(167,139,250,.08)); }
.privacy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pv-card { padding: 24px 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--glass); display: flex; flex-direction: column; gap: 8px; }
.pv-num { font: 700 2.5rem var(--display); line-height: 1; color: var(--menta); }
.pv-card h3 { margin: 0; font-size: 1.12rem; }
.pv-card p { margin: 0; color: var(--muted); font-size: .95rem; }
.privacy-proof { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 22px 24px; border-radius: var(--r); border: 1px dashed rgba(94,234,212,.45); }
.privacy-proof h3 { margin: 0 0 4px; }
.privacy-proof p { margin: 0; max-width: 640px; color: var(--muted); }
.privacy-pledge { margin: 18px 0 8px; padding: 18px 22px; border-radius: var(--r-sm); border-left: 4px solid var(--menta); background: rgba(94,234,212,.1); }
.privacy-pledge p { margin: 0; font-size: 1.08rem; }
@media (max-width: 640px) { .privacy-sec { padding: 26px 18px; } }

/* ---------- Cabecera de herramienta y pasos ---------- */
.crumbs { font: 500 .82rem var(--mono); color: var(--dim); margin-bottom: 16px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--naranja-luz); }
.tool-title { display: flex; align-items: center; gap: 18px; view-transition-name: titulo-herramienta; }
.tool-title h1 { margin: 0; }
.tool-title .ico-tile { width: 60px; height: 60px; flex: none; box-shadow: inset 0 0 0 1px var(--line-2), 0 0 40px -10px rgba(217,119,87,.7); }
.tool-title .ico-tile .ico { width: 30px; height: 30px; }
.stepper { display: flex; gap: 10px; list-style: none; padding: 0; margin: 28px 0 0; max-width: 620px; view-transition-name: pasos; }
.stepper li { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; padding-top: 12px; color: var(--dim); font-weight: 500; font-size: .95rem; }
.stepper li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--line); }
.stepper li.done::before { background: linear-gradient(90deg, var(--naranja), var(--lila)); }
.stepper li.now::before { background: linear-gradient(90deg, var(--naranja), var(--lila)); background-size: 200% 100%; animation: shimmer 2.5s linear infinite; box-shadow: 0 0 14px rgba(217,119,87,.6); }
.stepper b { font: 600 .78rem var(--mono); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line-2); }
.stepper li.now { color: var(--text); }
.stepper li.now b { background: var(--grad); border-color: transparent; color: #fff; }
.stepper li.done { color: var(--muted); }
.stepper li.done b { color: var(--lila-luz); border-color: var(--lila); }

/* Ficha de la herramienta */
.ficha { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.ficha .what { padding: 28px; }
.ficha .what p { color: #D7CFEA; font-size: 1.05rem; margin: 0; }
.ficha dl { margin: 0; display: grid; gap: 10px; }
.ficha dl div { padding: 14px 18px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--glass); }
.ficha dt { font: 600 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--naranja-luz); margin-bottom: 4px; }
.ficha dd { margin: 0; color: var(--muted); font-size: .95rem; }
.ficha dl div:nth-child(2n) dt { color: var(--lila-luz); }
@media (max-width: 820px) { .ficha { grid-template-columns: 1fr; } }

/* ---------- Paso 1: subida ---------- */
.uploader { margin-top: 34px; }
.dropzone { padding: 60px 24px; text-align: center; border-radius: 22px; transition: transform .35s var(--ease), box-shadow .3s, background .3s; overflow: hidden; }
.dropzone::after { content: ''; position: absolute; inset: 14px; border-radius: 14px; border: 1.5px dashed var(--line-2); pointer-events: none; transition: border-color .3s, inset .35s var(--ease); }
.dropzone:hover::after { border-color: rgba(217,119,87,.6); }
.dropzone.is-over { transform: scale(1.012); background: linear-gradient(180deg, rgba(217,119,87,.14), rgba(124,58,237,.14)); box-shadow: var(--glow-n); }
.dropzone.is-over::after { inset: 8px; border-color: var(--naranja); }
.dropzone.is-over .crop { transform: scale(1.4); }
.drop-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.drop-inner .ico-tile { width: 84px; height: 84px; border-radius: 22px; animation: float 5s ease-in-out infinite; }
.drop-inner .ico-tile .ico { width: 40px; height: 40px; }
.drop-title { font: 500 1.4rem var(--display); margin: 0; }
.drop-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.drop-hint { font: 500 .8rem var(--mono); color: var(--dim); margin: 0; }
.camera-btn { display: none; }
@media (pointer: coarse) { .camera-btn { display: inline-flex; } }
.file-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.file-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-sm); animation: fade-up .4s var(--ease) both; }
.file-row[draggable="true"] { cursor: grab; }
.file-row.dragging { opacity: .5; }
.file-row.drop-target { border-color: var(--naranja); box-shadow: var(--glow-n); }
.file-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .meta { font: 500 .8rem var(--mono); color: var(--dim); white-space: nowrap; }
.file-row .thumb-mini { width: 36px; height: 44px; object-fit: cover; border-radius: 4px; background: #fff; flex: none; }
.actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.form-error { color: #FFB4B4; font-weight: 500; margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-sm); background: rgba(255,107,107,.08); border: 1px solid rgba(255,107,107,.35); }
.form-error:empty { display: none; }

/* ---------- Prosa, consejos, FAQ ---------- */
.prose { max-width: 72ch; }
.prose p, .prose li { color: #CFC6E2; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .55em; }
.prose.page { margin: 0 auto; }
.prose.page h2 { margin-top: 1.7em; }
.prose.narrow { max-width: 660px; }
.howto { display: grid; gap: 12px; margin-top: 20px !important; padding-left: 0 !important; }
.howto li { counter-increment: n; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; margin: 0; padding: 16px 18px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--glass); }
.howto li::before { content: counter(n); width: 34px; height: 34px; border-radius: 10px; background: var(--grad); color: #fff; display: grid; place-items: center; font: 600 .88rem var(--mono); }
.tips li::marker { color: var(--naranja); }
.vault-note { position: relative; padding: 28px 30px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(94,234,212,.06), rgba(167,139,250,.06)); max-width: 820px; }
.vault-note ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.vault-note li { color: var(--muted); padding-left: 30px; position: relative; }
.vault-note li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: .75rem; background: rgba(94,234,212,.15); color: var(--menta); }
.vault-note strong { color: var(--text); }
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); transition: background .3s; }
.faq details[open] { background: linear-gradient(90deg, rgba(167,139,250,.06), transparent); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 44px 18px 4px; font-weight: 600; position: relative; transition: color .2s; }
.faq summary:hover { color: var(--lila-luz); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 8px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--naranja-luz); font: 500 1.1rem var(--mono); transition: transform .3s var(--ease), background .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: rgba(217,119,87,.15); }
.faq details p { color: var(--muted); padding: 0 24px 6px 4px; animation: fade-up .4s var(--ease); }
.slips { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.slip { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; color: var(--text); background: var(--glass); transition: border-color .25s, transform .35s var(--ease); }
.slip:hover { border-color: var(--lila); transform: translateY(-3px); color: var(--text); }
.slip .ico { color: var(--naranja-luz); margin-top: 2px; }
.slip strong { display: block; font-weight: 600; }
.slip small { display: block; color: var(--muted); font-size: .88rem; line-height: 1.4; margin-top: 2px; }

/* ---------- Paso 2: espacio de trabajo ---------- */
.workspace { margin-top: 34px; }
.loading-sheet { position: relative; overflow: hidden; padding: 56px 24px; border: 1px dashed var(--line-2); border-radius: var(--r); text-align: center; color: var(--muted); background: var(--glass); }
.loading-sheet p { margin: 0; font-family: var(--mono); font-size: .9rem; }
.scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--naranja-luz), var(--lila-luz), transparent); box-shadow: 0 0 16px 3px rgba(217,119,87,.5); animation: loop-sweep 1.6s ease-in-out infinite alternate; }
@keyframes loop-sweep { to { top: calc(100% - 2px); } }
.ws { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; align-items: start; animation: fade-up .5s var(--ease); }
@media (max-width: 920px) { .ws { grid-template-columns: 1fr; } }
.panel { padding: 22px; }
.panel h3 { margin-bottom: 14px; }
.panel + .panel { margin-top: 16px; }
.side { position: sticky; top: 92px; display: grid; gap: 16px; }
.side .panel + .panel { margin-top: 0; }
.side .btn { width: 100%; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field > span, .field > label, .field-title { font-weight: 600; font-size: .95rem; }
.field-title { margin: 6px 0 10px; }
.field small { color: var(--muted); font-size: .84rem; }
select, input[type="text"], input[type="number"], textarea {
  font: 400 1rem var(--body); color: var(--text); background: rgba(0,0,0,.3); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; width: 100%; transition: border-color .2s, box-shadow .2s;
}
select option { background: var(--bg-2); }
select:focus, input:focus, textarea:focus { border-color: var(--lila); outline: none; box-shadow: 0 0 0 3px rgba(167,139,250,.25); }
input[type="color"] { width: 100%; height: 38px; padding: 3px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0,0,0,.3); cursor: pointer; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-block; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .9rem; font-weight: 500; transition: all .2s; }
.seg label:hover span { border-color: var(--lila); }
.seg input:checked + span { border-color: transparent; background: var(--grad); color: #fff; box-shadow: 0 6px 20px -8px rgba(217,119,87,.8); }
.seg input:focus-visible + span { outline: 2px solid var(--naranja-luz); outline-offset: 2px; }
.seg.compact { margin: 6px 0 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; margin-bottom: 12px; cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--naranja); width: 18px; height: 18px; flex: none; }
.mode-desc { margin: 8px 0 0; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; }
.thumb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; padding: 0; color: var(--muted); font: 500 .8rem var(--mono); cursor: pointer; }
.thumb .pg { width: 100%; aspect-ratio: 210/297; display: grid; place-items: center; background: rgba(255,255,255,.04); border-radius: 6px; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .15s, transform .3s var(--ease); }
.thumb:hover .pg { transform: translateY(-3px); }
.thumb canvas, .thumb img { max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 10px 22px -10px rgba(0,0,0,.8); transition: transform .25s; border-radius: 2px; }
.thumb.sel .pg { outline-color: var(--naranja); }
.thumb.sel::after { content: '✓'; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 8px; background: var(--grad); color: #fff; display: grid; place-items: center; font: 700 .85rem var(--body); }
.thumb .rot-tools { display: flex; gap: 6px; }

.progress { height: 8px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden; border: 1px solid var(--line); }
.progress i { display: block; height: 100%; width: 0; background: var(--grad); background-size: 200% 100%; animation: shimmer 2s linear infinite; transition: width .3s var(--ease); box-shadow: 0 0 12px rgba(217,119,87,.6); }
.progress-label { font: 500 .82rem var(--mono); color: var(--muted); margin: 8px 0 0; }
.ocr-text { min-height: 360px; font: 400 1rem/1.55 var(--body); background: #FBF9FF; color: #1D1530; border-color: transparent; }

/* Conversores */
.conv-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; margin-bottom: 14px; }
.conv-thumb { margin: 0; display: grid; gap: 6px; justify-items: center; animation: fade-up .5s var(--ease) both; }
.conv-thumb canvas { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 14px 30px -14px #000; }
.conv-thumb figcaption { font: 500 .76rem var(--mono); color: var(--dim); }
.conv-more { display: grid; place-items: center; border-radius: 8px; border: 1px dashed var(--line-2); color: var(--muted); font: 600 1.1rem var(--mono); min-height: 120px; }

/* ---------- Editor de PDF ---------- */
.editor-ws { grid-template-columns: minmax(0, 1fr) 290px; }
.editor-panel { padding: 0; overflow: clip; }
.editor-toolbar { position: sticky; top: 70px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px; background: rgba(17,11,31,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.tool-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); color: var(--text); font: 500 .9rem var(--body); cursor: pointer; transition: all .2s; }
.tool-btn:hover { border-color: var(--lila); }
.tool-btn[aria-pressed="true"] { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 8px 22px -10px rgba(217,119,87,.9); }
.tool-btn.icon { width: 38px; justify-content: center; padding: 8px 0; font-size: 1.1rem; }
.tb-ico { font: 700 .95rem var(--mono); width: 18px; text-align: center; }
.tb-sep { flex: 1; }
.editor-hint { margin: 0; padding: 10px 16px; font-size: .88rem; color: var(--muted); border-bottom: 1px solid var(--line); background: rgba(167,139,250,.05); }
.editor-pages { display: grid; justify-items: center; gap: 26px; padding: 26px 12px 40px; max-height: 78vh; overflow: auto; background: radial-gradient(circle at 50% 0%, rgba(124,58,237,.12), transparent 60%), rgba(0,0,0,.25); }
.epage-wrap { display: grid; gap: 8px; justify-items: center; }
.epage-num { font: 500 .75rem var(--mono); color: var(--dim); }
.epage { position: relative; background: #fff; box-shadow: 0 30px 60px -25px #000, 0 0 0 1px rgba(255,255,255,.1); border-radius: 2px; animation: fade-up .5s var(--ease) both; }
.epage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.epage-wait { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; color: #6B6385; font: 500 .85rem var(--mono); background: #F6F3FC; }
.elayer { position: absolute; inset: 0; }
.editor-pages[data-mode="add"] .epage, .editor-pages[data-mode="cover"] .epage { cursor: crosshair; }
.editor-pages[data-mode="add"] .tline, .editor-pages[data-mode="cover"] .tline { pointer-events: none; }
.tline { position: absolute; z-index: 2; white-space: pre; color: transparent; border-radius: 2px; cursor: text; outline: 1px solid transparent; transition: outline-color .15s, background-color .15s; padding: 0; margin: 0; transform-origin: 0 0; -webkit-font-smoothing: antialiased; }
.tline:hover { outline: 1.5px dashed var(--lila-hondo); background-color: rgba(124,58,237,.08); }
.tline.selected { outline: 2px solid var(--lila-hondo); }
/* El texto editado se ve con su color (o degradado) real; detrás va el parche del fondo original */
.tline.edited, .tline.editing { color: var(--ink); background-color: transparent; outline: 1px dashed rgba(217,119,87,.75); }
.tline.grad.edited, .tline.grad.editing { background-image: var(--ink-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tline.editing { outline: 1.5px solid var(--naranja-hondo); box-shadow: 0 0 0 3px rgba(217,119,87,.22); z-index: 3; caret-color: var(--naranja-hondo); }
.tline.deleted { min-height: 4px; outline: 1.5px dashed rgba(255,107,107,.9); }
.line-grip { position: absolute; z-index: 4; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 12px; line-height: 1; cursor: move; box-shadow: 0 4px 12px rgba(0,0,0,.35); border: 2px solid #fff; touch-action: none; user-select: none; }
.line-grip.dragging { cursor: grabbing; transform: scale(1.15); }
.tpatch { position: absolute; z-index: 1; pointer-events: none; display: block; }
.eitem { position: absolute; z-index: 3; }
.eitem.selected { outline: 2px solid var(--naranja-hondo); outline-offset: 2px; }
.etext { white-space: pre; min-width: 20px; padding: 0 2px; outline: 1.5px dashed rgba(124,58,237,.8); cursor: text; }
.eimage img { width: 100%; height: 100%; display: block; pointer-events: none; }
.eimage, .ecover { outline: 1.5px dashed rgba(124,58,237,.8); }
/* Imágenes que ya venían en el PDF: debajo del texto para no estorbar al editarlo */
.pdfimg { z-index: 1; outline: 1px solid transparent; cursor: move; touch-action: none; transition: outline-color .15s, background-color .15s; }
.pdfimg:hover { outline: 1.5px dashed var(--naranja-hondo); background-color: rgba(217,119,87,.08); }
.pdfimg.selected { z-index: 3; outline: 2px solid var(--naranja-hondo); }
.pdfimg:focus-visible { outline: 2px solid var(--naranja-hondo); outline-offset: 2px; }
.pimg-view { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.pdfimg.touched .pimg-view { display: block; }
.pdfimg img { position: absolute; inset: 0; }
.pdfimg.deleted { background: repeating-linear-gradient(135deg, rgba(255,107,107,.12) 0 8px, transparent 8px 16px); outline: 1.5px dashed rgba(255,107,107,.9); }
.pdfimg.deleted .pimg-view, .pdfimg.deleted img { display: none; }
.editor-pages[data-mode="add"] .pdfimg, .editor-pages[data-mode="cover"] .pdfimg { pointer-events: none; }
.ipatch { z-index: 0; }
.grip, .resize { position: absolute; width: 16px; height: 16px; border-radius: 5px; background: var(--grad); border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; touch-action: none; }
.grip { left: -10px; top: -10px; cursor: move; }
.resize { right: -9px; bottom: -9px; cursor: nwse-resize; }
.eitem:hover .grip, .eitem.selected .grip, .eitem:hover .resize, .eitem.selected .resize { opacity: 1; }
.scan-banner { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: rgba(17,11,31,.9); color: var(--text); font-size: .85rem; box-shadow: 0 10px 30px -10px #000; }
.props .prop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini { display: grid; gap: 4px; font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.mini.block { display: grid; }
.prop-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.prop-actions .btn { width: auto; flex: 1; }
.changes-count { font: 500 .88rem var(--mono); color: var(--lila-luz); margin: 0 0 12px; }

/* ---------- Escáner ---------- */
.scan-stage { position: relative; background: #07040E; border-radius: var(--r-sm); border: 1px solid var(--line); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.scan-stage canvas { display: block; width: 100%; height: auto; }
.handle { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 0; background: transparent; cursor: grab; padding: 0; touch-action: none; }
.handle::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; border: 3px solid var(--naranja); background: rgba(217,119,87,.3); box-shadow: 0 0 0 2px rgba(7,4,14,.6), 0 0 16px rgba(217,119,87,.7); }
.handle:active, .handle.dragging { cursor: grabbing; }
.handle:focus-visible { outline: none; }
.handle:focus-visible::before { border-color: var(--lila); }
.loupe { position: absolute; width: 128px; height: 128px; border-radius: 50%; border: 3px solid var(--naranja); pointer-events: none; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 30px rgba(217,119,87,.5); background: #000; display: none; }
.loupe canvas { width: 100%; height: 100%; }
.loupe::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid var(--lila); border-radius: 50%; }
.scan-levels { display: grid; gap: 8px; margin-top: 12px; }
.scan-levels input[type=range] { width: 100%; accent-color: var(--naranja); }
.scan-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.scan-status { font: 500 .82rem var(--mono); color: var(--muted); margin: 10px 0 0; }
.pages-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; margin-bottom: 14px; }
.pages-strip button { flex: none; width: 64px; height: 80px; padding: 0; border-radius: 8px; border: 2px solid var(--line-2); background: #07040E; cursor: pointer; overflow: hidden; position: relative; transition: border-color .2s; }
.pages-strip button[aria-current="true"] { border-color: var(--naranja); box-shadow: var(--glow-n); }
.pages-strip img { width: 100%; height: 100%; object-fit: cover; }
.pages-strip .num { position: absolute; bottom: 2px; left: 4px; font: 600 .7rem var(--mono); color: #fff; text-shadow: 0 1px 3px #000; }
.pages-strip label.add { flex: none; width: 64px; height: 80px; border: 2px dashed var(--line-2); border-radius: 8px; display: grid; place-items: center; color: var(--muted); cursor: pointer; font-size: 1.6rem; }
.result-preview { background: rgba(0,0,0,.3); border-radius: var(--r-sm); display: grid; place-items: center; padding: 12px; min-height: 160px; }
.result-preview canvas { max-height: 360px; width: auto; background: #fff; box-shadow: 0 14px 30px -12px #000; border-radius: 2px; }

/* ---------- Paso 3: descarga ---------- */
.downloads { margin-top: 34px; }
.dl-wrap { display: grid; gap: 18px; }
.dl-card { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 26px 28px; animation: fade-up .6s var(--ease) both; }
.dl-card .file-ico { width: 54px; height: 66px; background: var(--grad); color: #fff; border-radius: 6px; display: grid; place-items: center; font: 600 .74rem var(--mono); clip-path: polygon(0 0, 70% 0, 100% 22%, 100% 100%, 0 100%); box-shadow: 0 10px 30px -10px rgba(217,119,87,.8); }
.dl-card .info strong { display: block; font-weight: 600; word-break: break-all; }
.dl-card .info span { font: 500 .84rem var(--mono); color: var(--dim); }
@media (max-width: 600px) { .dl-card { grid-template-columns: auto 1fr; } .dl-card .btn { grid-column: 1 / -1; } }
.fuse { display: grid; gap: 10px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); }
.fuse-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; color: var(--muted); }
.fuse-time { font: 500 2.2rem var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.fuse-time.low { color: var(--alerta); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.fuse-bar { height: 5px; background: rgba(0,0,0,.35); border-radius: 5px; overflow: hidden; }
.fuse-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--alerta), var(--naranja), var(--lila)); transform-origin: left; }
.fuse p { margin: 0; color: var(--muted); font-size: .95rem; }
.dl-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.empty-state { text-align: center; padding: 52px 24px; }
.empty-state h2 { margin-bottom: .4em; }
.empty-state p { color: var(--muted); }

/* Trituradora: el momento memorable del paso 3 */
.shred-host { position: relative; }
.shred-strip { position: absolute; inset: 0; pointer-events: none; animation: shred 1.1s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes shred { to { transform: translateY(140%) rotate(var(--rot)); opacity: 0; filter: hue-rotate(60deg); } }

/* ---------- Sugerencias ---------- */
.suggest { padding: 36px 32px; display: grid; gap: 10px; margin-top: 28px; }
.suggest fieldset { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.suggest legend, .suggest > label { font-weight: 600; margin-bottom: 8px; }
.suggest fieldset label { display: flex; gap: 6px; align-items: center; }
.suggest input[type="radio"] { accent-color: var(--naranja); }
.suggest .counter { font: 500 .8rem var(--mono); color: var(--dim); text-align: right; margin: 0; }
.suggest .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thanks { padding: 36px 32px; margin-top: 28px; }

/* ---------- Pie ---------- */
.site-footer { position: relative; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(17,11,31,.4), rgba(10,7,19,.95)); }
.site-footer::before { content: ''; position: absolute; top: -1px; left: 10%; right: 10%; height: 1px; background: var(--grad); opacity: .6; }
.foot { max-width: 1140px; margin: 0 auto; padding: 56px 24px 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.foot p { color: var(--muted); font-size: .95rem; max-width: 46ch; margin-top: 10px; }
.foot strong { font: 700 1.15rem var(--display); }
.foot-logo { display: inline-block; --logo-bg: #0C0916; }
.foot-logo .logo { height: 30px; }
.fine .made { display: block; margin-bottom: 6px; color: var(--muted); }
.fine .made strong { color: var(--naranja-luz); font: inherit; font-weight: 600; }
.foot nav { display: grid; gap: 8px; align-content: start; }
.foot nav a { color: var(--muted); text-decoration: none; font-size: .95rem; transition: color .2s, transform .2s; }
.foot nav a:hover { color: var(--naranja-luz); transform: translateX(3px); }
.fine { max-width: 1140px; margin: 0 auto; padding: 16px 24px 34px; color: var(--dim); font: 500 .76rem var(--mono); }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr; } }

/* ---------- Avisos ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: rgba(17,11,31,.95); color: var(--text); padding: 12px 18px; border-radius: 12px; border: 1px solid var(--line-2); box-shadow: 0 12px 30px rgba(0,0,0,.45); font-weight: 500; z-index: 90; max-width: calc(100% - 32px); animation: fade-up .3s var(--ease); }

/* ---------- Transiciones entre páginas ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .laser, .scanline { display: none; }
  .fx .reveal { opacity: 1; transform: none; }
  .doc-card .ln.edit .typed { max-width: 22ch; border: 0; }
  @view-transition { navigation: none; }
}