/* ==========================================================================
   Xcelll — estilos
   Concepto: "la hoja de cálculo viva". Cuadrícula de celdas de fondo, formas
   verdes que flotan y una herramienta que brilla. La decoración nunca tapa
   la herramienta: está siempre visible y usable nada más entrar.

   1. Fuentes y variables   2. Base   3. Fondo animado   4. Cabecera
   5. Hero   6. Herramienta   7. Vista previa   8. Secciones   9. Anuncios
   10. Pie   11. Aparición al hacer scroll   12. Responsive   13. Movimiento reducido
   ========================================================================== */

/* 1. Fuentes (alojadas en la propia web: sin peticiones a terceros) -------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Verdes: del esmeralda profundo a la lima */
  --g-900: #053321;
  --g-800: #07492f;
  --g-700: #0a6b44;
  --g-600: #0e8a57;
  --g-500: #16a96a;
  --g-400: #3ccf8e;
  --lime: #b6f36a;
  --mint: #d9f8e8;

  --accent: var(--g-600);
  --accent-dark: var(--g-700);
  --accent-soft: #e6f7ee;
  --ink: #0d1f17;
  --ink-2: #3d5248;
  --muted: #6a7d74;
  --line: #d8e6de;
  --bg: #f6fbf8;
  --bg-alt: #edf6f1;
  --card: #ffffff;
  --glass: rgba(255, 255, 255, .72);
  --num: #0a7a4b;
  --date: #1d5fbf;
  --warn-bg: #fff7e6;
  --warn-line: #f2c46b;
  --error: #b42318;
  --grid-line: rgba(14, 138, 87, .07);
  --blob-a: rgba(60, 207, 142, .45);
  --blob-b: rgba(182, 243, 106, .45);
  --blob-c: rgba(14, 138, 87, .30);

  --grad: linear-gradient(135deg, var(--g-600) 0%, var(--g-500) 45%, var(--g-400) 100%);
  --grad-text: linear-gradient(100deg, var(--g-700) 0%, var(--g-500) 50%, #7ed957 100%);
  --radius: 22px;
  --shadow: 0 1px 2px rgba(5, 51, 33, .06), 0 24px 60px -24px rgba(5, 51, 33, .28);
  --shadow-sm: 0 1px 2px rgba(5, 51, 33, .06), 0 8px 24px -12px rgba(5, 51, 33, .22);
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: var(--g-400);
    --accent-dark: #6fe0aa;
    --accent-soft: rgba(60, 207, 142, .12);
    --ink: #e9f5ef;
    --ink-2: #bcd0c6;
    --muted: #8ea49a;
    --line: #22362d;
    --bg: #07130e;
    --bg-alt: #0b1b14;
    --card: #0f2119;
    --glass: rgba(15, 33, 25, .72);
    --num: #5fe0a0;
    --date: #8db8ff;
    --warn-bg: #2a2212;
    --warn-line: #7a5a1c;
    --error: #ff8a80;
    --grid-line: rgba(60, 207, 142, .06);
    --blob-a: rgba(22, 169, 106, .35);
    --blob-b: rgba(182, 243, 106, .16);
    --blob-c: rgba(14, 138, 87, .30);
    --grad-text: linear-gradient(100deg, #5fe0a0 0%, #b6f36a 100%);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 60px -24px rgba(0, 0, 0, .7);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 750; }
h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--accent); }
strong { font-weight: 750; }
code { font-size: .9em; background: var(--accent-soft); color: var(--ink); border-radius: 6px; padding: .1em .4em; }
.wrap { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.narrow { max-width: 800px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 100; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--g-400); outline-offset: 2px; }
::selection { background: var(--lime); color: var(--g-900); }

/* Botones */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font: inherit; font-weight: 750; line-height: 1;
  padding: .9em 1.45em; border-radius: 14px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
}
.btn-primary {
  color: #fff; background: var(--grad);
  box-shadow: 0 10px 24px -10px rgba(14, 138, 87, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
}
/* destello que recorre el botón */
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(14, 138, 87, .85), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--g-400); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-small { padding: .55em 1em; font-size: .9rem; border-radius: 10px; background: var(--ink); color: var(--bg); }
.btn-big { font-size: 1.12rem; padding: 1.05em 1.7em; border-radius: 16px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); transition: text-decoration-color .2s; }
.link-btn:hover { text-decoration-color: var(--accent); }

/* 3. Fondo animado -------------------------------------------------------- */
.bg-deco { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* Cuadrícula de hoja de cálculo que se desvanece hacia abajo */
.bg-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 96px 32px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 10%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 10%, #000 30%, transparent 75%);
  animation: grid-pan 40s linear infinite;
}
@keyframes grid-pan { to { background-position: 96px 32px, 96px 32px; } }

.blob { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.b1 { width: 520px; height: 520px; background: var(--blob-a); top: -160px; left: -120px; animation: float-a 22s var(--ease) infinite alternate; }
.b2 { width: 460px; height: 460px; background: var(--blob-b); top: 60px; right: -160px; animation: float-b 26s var(--ease) infinite alternate; }
.b3 { width: 380px; height: 380px; background: var(--blob-c); top: 620px; left: 35%; animation: float-a 30s var(--ease) infinite alternate-reverse; }
@keyframes float-a { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes float-b { to { transform: translate(-100px, 120px) scale(.9); } }

/* "Celdas" sueltas que flotan */
.shape { position: absolute; border: 2px solid color-mix(in srgb, var(--g-500) 45%, transparent); border-radius: 10px; opacity: .55; animation: drift 18s ease-in-out infinite; }
.s1 { width: 54px; height: 22px; top: 18%; left: 7%; }
.s2 { width: 34px; height: 34px; top: 62%; left: 4%; border-radius: 50%; animation-duration: 22s; animation-delay: -4s; }
.s3 { width: 70px; height: 26px; top: 12%; right: 9%; background: color-mix(in srgb, var(--lime) 35%, transparent); border-color: transparent; animation-delay: -8s; }
.s4 { width: 22px; height: 22px; top: 48%; right: 5%; animation-duration: 25s; }
.s5 { width: 46px; height: 18px; top: 82%; right: 18%; background: color-mix(in srgb, var(--g-400) 25%, transparent); border-color: transparent; animation-delay: -12s; }
.s6 { width: 28px; height: 28px; top: 34%; left: 14%; border-radius: 8px; border-style: dashed; animation-duration: 28s; animation-delay: -6s; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(18px, -26px) rotate(8deg); }
  66% { transform: translate(-14px, 16px) rotate(-6deg); }
}

/* 4. Cabecera (fija, efecto cristal) -------------------------------------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--glass); }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.logo { display: flex; align-items: center; gap: .55em; color: var(--accent); text-decoration: none; font-family: var(--display); font-size: 1.45rem; }
.logo svg { transition: transform .5s var(--ease); }
.logo:hover svg { transform: rotate(90deg) scale(1.06); }
.logo span { color: var(--ink); font-weight: 800; letter-spacing: -.03em; }
.logo strong { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 1.6em; }
.nav a { position: relative; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:not(.nav-cta):hover { color: var(--ink); }
.nav a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta { padding: .5em 1em; border-radius: 999px; background: var(--ink); color: var(--bg) !important; transition: transform .25s var(--ease), background .2s; }
.nav-cta:hover { transform: translateY(-1px); background: var(--g-700); color: #fff !important; }

/* 5. Hero ----------------------------------------------------------------- */
.hero { padding: 40px 0 20px; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em; margin: 0 auto 18px;
  padding: .4em 1em .4em .8em; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  font-size: .86rem; font-weight: 650; color: var(--ink-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: rise .8s var(--ease) both;
}
.pulse { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--g-500); }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--g-500); animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.hero h1 { text-wrap: wrap; max-width: 21ch; margin: 0 auto .35em; animation: rise .8s .08s var(--ease) both; }
/* "Excel" con degradado y subrayado que se dibuja */
.hl { position: relative; z-index: 0; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.hl::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: .04em; height: .14em; border-radius: 99px;
  background: var(--lime); z-index: -1; opacity: .85;
  transform: scaleX(0); transform-origin: left; animation: underline .9s .7s var(--ease) forwards;
}
@keyframes underline { to { transform: scaleX(1); } }
.subtitle { max-width: 640px; margin: 0 auto 28px; color: var(--ink-2); font-size: 1.08rem; animation: rise .8s .16s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 6. Herramienta ---------------------------------------------------------- */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.tool-card {
  --mx: 50%; --my: 0%;
  position: relative; z-index: 0; max-width: 940px; margin: 0 auto; padding: 22px; text-align: left;
  background:
    radial-gradient(600px circle at var(--mx) var(--my), color-mix(in srgb, var(--g-400) 10%, transparent), transparent 45%),
    var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow);
  animation: rise .9s .24s var(--ease) both;
}
/* Borde luminoso que gira */
.tool-card::before {
  content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--spin), var(--line) 0deg, var(--g-400) 60deg, var(--lime) 100deg, var(--line) 160deg, var(--line) 360deg);
  /* la máscara deja visible solo el anillo del borde */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite;
}
@keyframes spin { to { --spin: 360deg; } }

.tool-card .st { display: none; }
.tool-card[data-state="idle"] .st-idle,
.tool-card[data-state="working"] .st-working,
.tool-card[data-state="password"] .st-password,
.tool-card[data-state="scanned"] .st-scanned,
.tool-card[data-state="done"] .st-done,
.tool-card[data-state="error"] .st-error { display: block; animation: fade-in .45s var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 40px 16px 34px; border-radius: 16px; cursor: pointer; text-align: center; color: var(--accent);
  border: 2px dashed var(--line); background: var(--card);
  transition: background-color .25s, border-color .25s, transform .3s var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--g-400); background: color-mix(in srgb, var(--g-400) 7%, var(--card)); }
.dropzone.is-over { transform: scale(1.01); }
.dz-icon { animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(14, 138, 87, .25)); }
.dropzone:hover .dz-icon, .dropzone.is-over .dz-icon { animation-duration: 1s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.dz-title { font-family: var(--display); font-size: 1.45rem; font-weight: 750; color: var(--ink); letter-spacing: -.01em; }
.dz-or { color: var(--muted); font-size: .9rem; }
.dz-hint { color: var(--muted); font-size: .85rem; margin-top: 6px; }

.st-working { padding: 34px 8px; text-align: center; }
.work-title { font-family: var(--display); font-weight: 750; font-size: 1.25rem; }
.progress { height: 12px; background: var(--bg-alt); border-radius: 99px; overflow: hidden; max-width: 540px; margin: 0 auto 12px; }
.progress span {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: repeating-linear-gradient(-45deg, var(--g-500) 0 12px, var(--g-400) 12px 24px);
  background-size: 34px 34px; animation: stripes .8s linear infinite;
  box-shadow: 0 0 16px color-mix(in srgb, var(--g-400) 60%, transparent);
  transition: width .3s var(--ease);
}
@keyframes stripes { to { background-position: 34px 0; } }
.work-detail { color: var(--muted); font-size: .9rem; }

.state-title { font-family: var(--display); font-weight: 750; font-size: 1.25rem; }
.st-password, .st-scanned, .st-error { padding: 14px 6px; }
.row-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.row-inline input {
  flex: 1 1 220px; min-width: 0; font: inherit; padding: .85em 1em; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.row-inline input:focus { outline: none; border-color: var(--g-400); box-shadow: 0 0 0 4px var(--accent-soft); }
.warn-list { margin: 0 0 16px; padding-left: 1.2em; color: var(--ink-2); }
.st-error .state-title { color: var(--error); }
.noscript { text-align: center; color: var(--error); }

.trust {
  list-style: none; padding: 0; margin: 22px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  animation: rise .8s .4s var(--ease) both;
}
.trust li {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .45em .95em; border-radius: 999px; font-size: .88rem; font-weight: 650; color: var(--ink-2);
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .25s var(--ease), border-color .25s;
}
.trust li:hover { transform: translateY(-2px); border-color: var(--g-400); }
.trust svg { color: var(--g-500); }
.privacy-badge {
  display: flex; gap: 8px; align-items: flex-start; justify-content: center;
  max-width: 860px; margin: 14px auto 0; color: var(--accent); font-size: .92rem;
}
.privacy-badge span { color: var(--ink-2); text-align: left; }
.privacy-badge svg { flex: none; margin-top: 3px; }

/* Logo animado de carga ---------------------------------------------------- */
.loader-logo { position: relative; width: 132px; height: 132px; margin: 0 auto 18px; display: grid; place-items: center; }
.ll-mark { position: relative; z-index: 1; filter: drop-shadow(0 14px 22px rgba(14, 138, 87, .45)); }
.ll-x { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* Anillo de luz que gira */
.ll-ring {
  position: absolute; inset: 4px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--g-400) 75%, var(--lime) 90%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
/* Celdas que orbitan */
.ll-cell { position: absolute; top: 50%; left: 50%; width: 16px; height: 9px; margin: -4.5px 0 0 -8px; border-radius: 3px; background: var(--g-400); }
.ll-c2 { background: var(--lime); }
.ll-c3 { background: var(--g-600); width: 10px; height: 10px; margin: -5px 0 0 -5px; }

/* Solo se anima mientras la herramienta está trabajando */
.tool-card[data-state="working"] .ll-mark  { animation: ll-flip 2.4s var(--ease) infinite; }
.tool-card[data-state="working"] .ll-x1    { animation: ll-draw 2.4s ease-in-out infinite; }
.tool-card[data-state="working"] .ll-x2    { animation: ll-draw 2.4s ease-in-out .3s infinite; }
.tool-card[data-state="working"] .ll-ring  { animation: ll-spin 1.4s linear infinite; }
.tool-card[data-state="working"] .ll-c1    { animation: ll-orbit 2.8s linear infinite; }
.tool-card[data-state="working"] .ll-c2    { animation: ll-orbit 2.8s linear -.93s infinite; }
.tool-card[data-state="working"] .ll-c3    { animation: ll-orbit 2.8s linear -1.86s infinite; }
@keyframes ll-draw {               /* la X se dibuja, se queda y se borra */
  0% { stroke-dashoffset: 1; }
  35%, 65% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1; }
}
@keyframes ll-flip {               /* giro con rebote en cada vuelta */
  0%, 55% { transform: rotate(0) scale(1); }
  70% { transform: rotate(100deg) scale(.9); }
  82%, 100% { transform: rotate(90deg) scale(1); }
}
@keyframes ll-spin { to { transform: rotate(360deg); } }
@keyframes ll-orbit {
  from { transform: rotate(0deg) translateX(62px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(62px) rotate(-360deg); }
}
/* Sin animación (reducir movimiento): logo quieto con la X completa */
@media (prefers-reduced-motion: reduce) { .ll-x { stroke-dashoffset: 0; } .ll-cell { display: none; } }

/* El logo de la cabecera también trabaja mientras se convierte */
.busy .logo svg { animation: logo-busy 1.2s var(--ease) infinite; }
@keyframes logo-busy { 0% { transform: rotate(0); } 60%, 100% { transform: rotate(180deg); } }

/* 7. Vista previa --------------------------------------------------------- */
.done-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.file-name { font-family: var(--display); font-weight: 750; font-size: 1.15rem; margin: 0; word-break: break-all; }
.notice {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 14px; font-size: .92rem;
}
.notice[hidden] { display: none; }
.pages-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.pages-bar .label { font-weight: 700; font-size: .92rem; }
.pages { display: flex; flex-wrap: wrap; gap: 6px; }
.pages-actions { font-size: .9rem; color: var(--muted); }
.page-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px;
  border: 1.5px solid var(--line); border-radius: 99px; font-size: .88rem; font-weight: 600; background: var(--card);
  cursor: pointer; user-select: none; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.page-chip:hover { transform: translateY(-1px); }
.page-chip input { margin: 0; accent-color: var(--g-600); }
.page-chip.is-active { border-color: var(--g-500); box-shadow: 0 0 0 3px var(--accent-soft); }
.page-chip .tag { font-size: .72rem; color: var(--muted); }

.preview-wrap { border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
.preview-scroll { max-height: 380px; overflow: auto; }
.preview-scroll table { border-collapse: separate; border-spacing: 0; font-size: .86rem; min-width: 100%; font-variant-numeric: tabular-nums; }
.preview-scroll th, .preview-scroll td {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 6px 10px; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.preview-scroll thead th { position: sticky; top: 0; background: var(--bg-alt); color: var(--muted); font-weight: 700; font-size: .78rem; z-index: 1; }
.preview-scroll tbody th { background: var(--bg-alt); color: var(--muted); font-weight: 600; text-align: right; position: sticky; left: 0; font-size: .78rem; }
.preview-scroll tbody tr { animation: row-in .5s var(--ease) both; }
.preview-scroll tbody tr:nth-child(2) { animation-delay: .03s; } .preview-scroll tbody tr:nth-child(3) { animation-delay: .06s; }
.preview-scroll tbody tr:nth-child(4) { animation-delay: .09s; } .preview-scroll tbody tr:nth-child(5) { animation-delay: .12s; }
.preview-scroll tbody tr:nth-child(6) { animation-delay: .15s; } .preview-scroll tbody tr:nth-child(n+7) { animation-delay: .18s; }
@keyframes row-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.preview-scroll tbody tr:hover td { background: var(--accent-soft); }
.preview-scroll td.num { color: var(--num); text-align: right; font-weight: 650; }
.preview-scroll td.date { color: var(--date); }
.preview-scroll tr.head td { font-weight: 800; background: color-mix(in srgb, var(--g-400) 12%, var(--card)); color: var(--ink); }
.preview-empty { padding: 26px; text-align: center; color: var(--muted); }
.legend { margin: 0; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg-alt); color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lg { padding: 0 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); font-size: .8rem; font-weight: 650; }
.lg-num { color: var(--num); } .lg-date { color: var(--date); } .lg-txt { color: var(--ink); }
.legend .lg:not(:first-child) { margin-left: 10px; }

.options { margin: 16px 0 4px; display: grid; gap: 10px; }
.options fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.options fieldset[hidden] { display: none; }
.options legend { font-weight: 750; font-size: .92rem; float: left; margin-right: 6px; min-width: 104px; }
/* Opciones como "píldoras" seleccionables */
.options label {
  display: inline-flex; gap: 7px; align-items: center; cursor: pointer;
  padding: .45em .9em; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card);
  font-size: .92rem; font-weight: 600; transition: border-color .2s, background .2s;
}
.options label:hover { border-color: var(--g-400); }
.options label:has(input:checked) { border-color: var(--g-500); background: var(--accent-soft); }
.options input { accent-color: var(--g-600); margin: 0; }

.downloads { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.csv-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.csv-box select { font: inherit; font-size: .88rem; padding: .7em .8em; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); }

/* 8. Secciones ------------------------------------------------------------ */
.section { position: relative; padding: 84px 0; }
.section.alt { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-alt) 85%, transparent) 15%, color-mix(in srgb, var(--bg-alt) 85%, transparent) 85%, transparent); }
.section h2 { text-align: center; max-width: 22ch; margin-left: auto; margin-right: auto; }
.lead { color: var(--ink-2); max-width: 680px; margin: 0 auto; text-align: center; font-size: 1.05rem; }

/* Pasos conectados por una línea */
.steps { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }
.steps::before {
  content: ""; position: absolute; top: 49px; left: 16%; right: 16%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--g-400) 0 8px, transparent 8px 16px); opacity: .6;
}
.steps li {
  position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, opacity .7s var(--ease);
}
.steps li:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--g-400) 60%, var(--line)); }
.step-n {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--grad); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.3rem; margin-bottom: 14px;
  box-shadow: 0 10px 20px -8px rgba(14, 138, 87, .7);
}
.steps p, .card p { color: var(--ink-2); margin: 0; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.card {
  position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, opacity .7s var(--ease);
}
.card::after {
  content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -70px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--g-400) 22%, transparent), transparent 70%);
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--g-400) 60%, var(--line)); }
.card:hover::after { opacity: 1; }
.card-ic {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 14px;
  color: var(--g-700); background: linear-gradient(135deg, var(--mint), color-mix(in srgb, var(--lime) 45%, var(--mint)));
  transition: transform .4s var(--ease);
}
.card:hover .card-ic { transform: rotate(-8deg) scale(1.08); }
.cards .card:first-child { border-color: color-mix(in srgb, var(--g-400) 55%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--g-400) 9%, var(--card)), var(--card) 60%); }

.two-col { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; }
.two-col > * { min-width: 0; }
.two-col h2 { text-align: left; margin-left: 0; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px 14px 52px;
  transition: transform .3s var(--ease), border-color .3s;
}
.checks li:hover { transform: translateX(4px); border-color: var(--g-400); }
.checks li::before {
  content: "✓"; position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; font-size: .85rem;
}
#consejos p { color: var(--ink-2); }

.faq { margin-top: 32px; }
.faq details {
  border: 1px solid var(--line); border-radius: 16px; background: var(--card); margin-bottom: 10px;
  transition: border-color .25s, box-shadow .25s;
}
.faq details[open] { border-color: color-mix(in srgb, var(--g-400) 60%, var(--line)); box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; padding: 16px 52px 16px 18px; font-weight: 700; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 7px;
  background:
    linear-gradient(#fff, #fff) center / 10px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 10px no-repeat,
    var(--grad);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { padding: 0 18px 16px; margin: 0; color: var(--ink-2); animation: fade-in .35s var(--ease); }

/* 9. Anuncios (huecos para AdSense) --------------------------------------- */
.ad-slot {
  display: grid; place-items: center; border: 1.5px dashed var(--line); border-radius: 16px;
  color: var(--muted); font-weight: 700; letter-spacing: .25em; font-size: .75rem;
  background: color-mix(in srgb, var(--card) 60%, transparent);
}
.ad-leaderboard[hidden] { display: none; }
.ad-leaderboard { min-height: 100px; max-width: 970px; margin: 36px auto 0; }
.ad-incontent { min-height: 250px; max-width: 728px; margin: 24px auto; }

/* Anuncios que aparecen tras convertir y tras descargar (dentro de la página) */
.ad-wrap { display: grid; gap: 6px; }
.ad-wrap[hidden] { display: none; }
.ad-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.ad-result-wrap { max-width: 940px; margin: 34px auto 0; animation: fade-in .6s var(--ease); }
.ad-result { min-height: 120px; }
.dl-success {
  margin: -4px 0 22px; padding: 16px; border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--g-400) 14%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--g-400) 50%, var(--line));
  animation: fade-in .5s var(--ease);
}
.dl-success[hidden] { display: none; }
.dl-msg { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 700; }
.dl-check { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--grad); color: #fff; font-weight: 800; flex: none; }
.ad-download { min-height: 100px; }

/* Páginas de contenido (guías, sobre, contacto, legales) ---------------- */
.page { padding: 36px 0 72px; }
.page-card {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  padding-top: 36px; padding-bottom: 40px; box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: rise .7s var(--ease) both;
}
.page-card .eyebrow { margin: 0 0 14px; }
.page-card h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); margin-bottom: .45em; }
.page-card h2 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); margin-top: 1.8em; text-align: left; max-width: none; }
.page-card p, .page-card li { color: var(--ink-2); }
.page-card a { font-weight: 650; }
.lead-left { font-size: 1.12rem; color: var(--ink) !important; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--accent); }
.ticks { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 34px; }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; background: var(--grad); color: #fff; font-size: .75rem; font-weight: 800;
}
.steps-list { counter-reset: st; list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 12px; }
.steps-list li { counter-increment: st; position: relative; padding: 14px 16px 14px 58px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.steps-list li::before {
  content: counter(st); position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; background: var(--grad); color: #fff; font-family: var(--display); font-weight: 800;
}
.cta-box {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 36px; padding: 22px; border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--g-400) 16%, var(--card)), color-mix(in srgb, var(--lime) 18%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--g-400) 45%, var(--line));
}
.cta-box p { margin: 0; }
.cta-title { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--ink) !important; }
.contact-card { margin: 22px 0 8px; padding: 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.contact-label { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) !important; }
.contact-mail { margin: 4px 0 6px; font-family: var(--display); font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 800; word-break: break-all; }
.contact-mail a { text-decoration: none; }
/* Tarjetas de guías en la portada */
.guide-card { display: block; text-decoration: none; color: inherit; }
.guide-tag { display: inline-block; margin-bottom: 12px; padding: .2em .7em; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--g-700); background: var(--accent-soft); }
.guide-card h3 { color: var(--ink); }
.guide-more { display: inline-block; margin-top: 14px; font-weight: 750; color: var(--accent); transition: transform .3s var(--ease); }
.guide-card:hover .guide-more { transform: translateX(4px); }
.footer-inner nav[aria-label="Guías"] a { font-weight: 500; color: #b9dccb; }

/* Modo revisión de AdSense: los huecos de anuncio no se muestran hasta que
   Google apruebe el sitio. Para mostrarlos, borra este bloque. */
.ad-slot, .ad-label, .ad-result-wrap { display: none !important; }

/* 10. Pie ----------------------------------------------------------------- */
.site-footer {
  position: relative; overflow: hidden; margin-top: 40px; padding: 52px 0 40px; color: #cfe9dc;
  background: radial-gradient(800px 300px at 15% 0%, rgba(60, 207, 142, .25), transparent 60%), linear-gradient(160deg, var(--g-900), #031a11);
}
.footer-inner { display: grid; gap: 8px; text-align: center; }
.footer-inner p { margin: 0; }
.foot-brand { font-family: var(--display); font-weight: 800; font-size: 2rem; letter-spacing: -.03em; color: #fff; }
.foot-brand strong { color: var(--lime); }
.footer-inner nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.footer-inner nav a { color: #e9f7f0; font-weight: 600; text-decoration: none; }
.footer-inner nav a:hover { color: var(--lime); }
.site-footer .muted { color: #8fb8a5; }

/* Páginas legales */
.legal { padding: 48px 0 64px; }
.legal .wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding-top: 32px; padding-bottom: 32px; box-shadow: var(--shadow-sm); }
.legal h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.legal h2 { font-size: 1.25rem; margin-top: 1.6em; }
.todo { background: var(--warn-bg); border: 1px dashed var(--warn-line); padding: 0 .3em; border-radius: 4px; }

/* 11. Aparición al hacer scroll: solo si main.js arrancó (clase .fx); si no, todo visible */
.fx .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.fx .reveal.in { opacity: 1; transform: none; }
.fx .reveal-stagger > * { opacity: 0; transform: translateY(22px); }
.fx .reveal-stagger.in > * { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.fx .reveal-stagger.in > *:nth-child(2) { transition-delay: .08s, .08s, 0s, 0s; }
.fx .reveal-stagger.in > *:nth-child(3) { transition-delay: .16s, .16s, 0s, 0s; }
.fx .reveal-stagger.in > *:nth-child(4) { transition-delay: .24s, .24s, 0s, 0s; }
.fx .reveal-stagger.in > *:nth-child(5) { transition-delay: .32s, .32s, 0s, 0s; }
.fx .reveal-stagger.in > *:nth-child(6) { transition-delay: .40s, .40s, 0s, 0s; }
.fx .reveal-stagger.in > *:hover { transition-delay: 0s; }

/* 12. Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .steps, .cards { grid-template-columns: 1fr 1fr; }
  .steps::before { display: none; }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav a:not(.nav-cta) { display: none; }
  .header-inner { height: 58px; }
  .hero { padding-top: 22px; }
  .eyebrow { font-size: .78rem; margin-bottom: 12px; }
  .subtitle { font-size: .98rem; margin-bottom: 20px; }
  .tool-card { padding: 14px; border-radius: 18px; }
  .dropzone { padding: 26px 12px 22px; }
  .dz-title { font-size: 1.2rem; }
  .steps, .cards { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .done-head { flex-direction: column; }
  .downloads { flex-direction: column; align-items: stretch; }
  .downloads .btn-big { width: 100%; }
  .csv-box { justify-content: space-between; }
  .ad-leaderboard { min-height: 60px; }
  .blob { filter: blur(50px); }
  .b1 { width: 320px; height: 320px; } .b2 { width: 280px; height: 280px; } .b3 { display: none; }
  .s1, .s4, .s6 { display: none; }
  .options legend { min-width: 0; width: 100%; }
}

/* 13. Movimiento reducido: sin animaciones, todo visible ------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fx .reveal, .fx .reveal-stagger > * { opacity: 1; transform: none; }
  .hl::after { transform: scaleX(1); }
}