/* ============ Transfer — sistema de diseño v0.3 "ciruela" ============ */
:root {
  --bg: #2d232e;
  --bg-soft: #392f3a;
  --panel: #413642;
  --panel-2: #4b404c;
  --panel-3: #594d5a;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.15);
  --tx: #f6f2f6;
  --tx-2: #b7b0b7;
  --tx-3: #b7b0b7;
  --acc: #f5f2ea;
  --acc-2: #ded8ce;
  --acc-soft: rgba(245, 242, 234, 0.12);
  --acc-ink: #2d232e;   /* tinta sobre el acento crema */
  --danger: #ff7676;
  --danger-soft: rgba(255, 118, 118, 0.12);
  --ok: #58e392;
  --warn: #ffc46b;
  --vio: #cdc6ba;
  --r: 20px;
  --r-sm: 13px;
  --font-d: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-b: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-m: 'Plus Jakarta Sans', system-ui, sans-serif; /* legado: mono eliminada por regla de estilo */
  --shadow: 0 24px 70px rgba(18, 12, 19, 0.55), 0 4px 18px rgba(18, 12, 19, 0.35);
  --shadow-lg: 0 2px 6px rgba(18, 12, 19, 0.3), 0 18px 40px -14px rgba(18, 12, 19, 0.5), 0 46px 90px -30px rgba(52, 30, 78, 0.30);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

h1, h2, h3 { text-wrap: balance; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--tx);
  min-height: 100vh;
  line-height: 1.55;
  /* candado: aunque algún elemento se pase de ancho en un navegador raro,
     la página NO se puede arrastrar de lado. clip (a diferencia de hidden)
     no convierte al body en scroller: el scroll vertical y las anclas
     siguen siendo de la ventana. Jamás usar clip en html: congela todo. */
  overflow-x: clip;
}

/* ---------- fondo: tintes + grid técnico + grano ---------- */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(1200px 560px at 82% -12%, rgba(245, 242, 234, 0.07), transparent 62%),
    radial-gradient(1000px 560px at -12% 108%, rgba(222, 216, 206, 0.045), transparent 62%),
    radial-gradient(800px 500px at 108% 62%, rgba(205, 198, 186, 0.05), transparent 60%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(1100px 720px at 50% -5%, black 30%, transparent 78%);
  mask-image: radial-gradient(1100px 720px at 50% -5%, black 30%, transparent 78%);
}
/* Capa decorativa. Ojo con el recorte: los orbes se animan con translate3d,
   así que Safari los sube a capa compuesta y esas se saltan el overflow:hidden
   de un ancestro fixed (provocaba scroll horizontal en iPhone). clip-path sí
   se respeta. Y width:100% en lugar de inset:0 evita heredar el px de más
   que trae innerWidth cuando hay barra de scroll. */
.bgfx {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
  overflow: hidden; clip-path: inset(0); contain: paint;
}
.bgfx .orb {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5;
  animation: orbFloat 26s var(--ease) infinite alternate;
}
.bgfx .orb.a { width: 480px; height: 480px; top: -220px; right: -120px; background: rgba(245, 242, 234, 0.10); }
.bgfx .orb.b { width: 420px; height: 420px; bottom: -200px; left: -140px; background: rgba(222, 216, 206, 0.07); animation-delay: -9s; animation-duration: 32s; }
.bgfx .orb.c { width: 340px; height: 340px; top: 42%; right: -180px; background: rgba(205, 198, 186, 0.06); animation-delay: -17s; animation-duration: 38s; }
.bgfx .grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05; mix-blend-mode: overlay;
}
@keyframes orbFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-60px, 50px, 0) scale(1.12); }
}

::selection { background: var(--acc); color: var(--acc-ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
.ic { flex: 0 0 auto; vertical-align: -3px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--panel-3); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ---------- header ---------- */
header.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(45, 35, 46, 0.78);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px max(28px, calc((100vw - 1180px) / 2 + 28px));
  transition: box-shadow 0.3s;
}
header.top.scrolled { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 35px; height: 35px; border-radius: 11px;
  background: linear-gradient(155deg, #ffffff, #cdc6ba);
  color: var(--acc-ink);
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 22px rgba(245, 242, 234, 0.32);
  transition: transform 0.35s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-7deg) scale(1.06); }
.brand-name { font-family: var(--font-d); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.beta {
  font-family: var(--font-m); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--acc); border: 1px solid rgba(245, 242, 234, 0.38);
  border-radius: 99px; padding: 2.5px 8px; margin-left: 9px; vertical-align: 3px;
  background: rgba(245, 242, 234, 0.06);
}
header.top nav { display: flex; align-items: center; gap: 8px; }
.navlink {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--tx-2); font-size: 14px; font-weight: 500;
  padding: 8px 13px; border-radius: 11px; transition: 0.18s;
  border: 1px solid transparent;
}
.navlink:hover, .navlink.on { color: var(--tx); background: var(--panel-2); border-color: var(--line); }

/* ---------- botones ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; background: var(--panel-2);
  color: var(--tx);
  border-radius: 14px; padding: 12px 19px; font-size: 14.5px; font-weight: 600;
  transition: transform 0.18s var(--ease), background 0.18s, box-shadow 0.18s;
  /* nowrap solo mientras quepa: si el texto es más ancho que el contenedor
     (botones largos en celular), parte en líneas en vez de desbordar */
  white-space: nowrap;
  max-width: 100%;
  box-shadow: 0 2px 10px rgba(16, 10, 17, 0.5);
}
.btn:hover { border-color: rgba(255, 255, 255, 0.28); transform: translateY(-1.5px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 22px rgba(0, 0, 0, 0.35); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--acc);
  color: var(--acc-ink);
  box-shadow: 0 6px 22px rgba(16, 10, 17, 0.55);
  text-shadow: none;
}

.btn-primary:hover { filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 14px 40px rgba(245, 242, 234, 0.36); }
.btn-primary:hover::after { left: 130%; }
.btn-danger { background: linear-gradient(180deg, rgba(255, 118, 118, 0.16), rgba(255, 118, 118, 0.09)); border-color: rgba(255, 118, 118, 0.35); color: var(--danger); }
.btn-danger:hover { border-color: rgba(255, 118, 118, 0.6); box-shadow: 0 8px 26px rgba(255, 90, 90, 0.15); }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
.btn-lg { padding: 16px 28px; font-size: 16px; border-radius: 15px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn-icon { padding: 9px; border-radius: 10px; }

/* ---------- inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--tx-2); letter-spacing: 0.02em; }
.field label .opt { color: var(--tx-3); font-weight: 400; }
.field input, .field select, .field textarea {
  background: rgba(16, 10, 17, 0.6);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11.5px 14px; font-size: 14.5px; outline: none; width: 100%;
  color: var(--tx);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}
.field input::placeholder, .field textarea::placeholder { color: var(--tx-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: rgba(245, 242, 234, 0.6);
  background: rgba(16, 10, 17, 0.8);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 3.5px rgba(245, 242, 234, 0.13);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tx-3) 50%), linear-gradient(135deg, var(--tx-3) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field textarea { resize: vertical; min-height: 68px; }

/* checkbox custom */
.ck { position: relative; display: inline-grid; place-items: center; width: 21px; height: 21px; cursor: pointer; }
.ck input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ck .box {
  width: 20px; height: 20px; border-radius: 6.5px; border: 1.5px solid var(--line-2);
  background: rgba(16, 10, 17, 0.5); display: grid; place-items: center;
  transition: 0.16s var(--ease); color: transparent;
}
.ck:hover .box { border-color: rgba(245, 242, 234, 0.5); }
.ck input:checked + .box {
  background: linear-gradient(180deg, #ffffff, #ded8ce); border-color: var(--acc); color: var(--acc-ink);
  box-shadow: 0 3px 12px rgba(245, 242, 234, 0.3);
  transform: scale(1.04);
}
.ck input:focus-visible + .box { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ---------- paneles con borde iluminado ---------- */
.panel, .fcard, .step, .lockbox, .modal-box {
  position: relative;
  background: var(--panel);
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.panel::before, .fcard::before, .step::before, .lockbox::before, .modal-box::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035) 38%, rgba(245, 242, 234, 0.10));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* glow que sigue al mouse (vars --mx/--my las setea common.js) */
.uploader::after, .fcard::after, .dlcard::after, .portalcard::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(245, 242, 234, 0.055), transparent 70%);
  opacity: 0; transition: opacity 0.3s;
}
.uploader:hover::after, .fcard:hover::after, .dlcard:hover::after, .portalcard:hover::after { opacity: 1; }

/* ---------- reveal (gateado con .has-js: sin JS todo queda visible) ---------- */
.has-js [data-reveal] { opacity: 0; transform: translateY(22px); filter: blur(5px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), filter 0.6s var(--ease); }
.has-js [data-reveal].revealed { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .has-js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .bgfx .orb { animation: none; }
  .btn-primary::after { display: none; }
}

/* ---------- home / landing ---------- */
.home {
  max-width: 1180px; margin: 0 auto; padding: 52px 28px 30px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
/* Los items de grid nacen con min-width:auto y NO encogen por debajo de su
   contenido: un nombre de archivo largo inflaba la columna y toda la página
   se podía arrastrar de lado en el celular. Guardia general. */
.home > *, .done-grid > *, .opts > *, .perks > *, .pickrow > *,
.cmprow > *, .bigfoot .cols > *, .fgrid > * { min-width: 0; }
.hero { padding-top: 0; }
.hero .kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-m); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--acc);
  background: rgba(245, 242, 234, 0.07);
  border: 1px solid rgba(245, 242, 234, 0.28);
  padding: 7px 14px; border-radius: 99px; margin-bottom: 20px;
  box-shadow: 0 0 24px rgba(245, 242, 234, 0.09);
}
.hero .kicker .ic { animation: sparkPulse 2.6s ease infinite; }
@keyframes sparkPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.7; } }
.hero h1 {
  font-family: var(--font-d); font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 700;
  color: #ddd7cd;   /* algo por debajo del blanco para que el resalte se lea */
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(94deg, #ffffff, #ffffff 45%, #ded8ce);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* el recorte del degradado deja aire tras la última letra: lo compensamos
     para que el punto final quede pegado a la palabra */
  margin-right: -0.09em;
}
.hero .sub { color: var(--tx-2); font-size: 17px; margin-top: 20px; max-width: 46ch; }
.perks { list-style: none; margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; max-width: 540px; }
.perks li {
  display: flex; align-items: center; gap: 10px;
  color: var(--tx-2); font-size: 13.5px; font-weight: 500;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 11px 14px; border-radius: 13px;
  transition: 0.2s var(--ease);
}
.perks li:hover { border-color: rgba(245, 242, 234, 0.35); color: var(--tx); transform: translateY(-1px); }
.perks li .ic { color: var(--acc); filter: drop-shadow(0 0 6px rgba(245, 242, 234, 0.4)); }
.hero .microproof { margin-top: 24px; color: var(--tx-3); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.hero .microproof .ic { color: var(--acc-2); }

/* secciones landing */
.section { max-width: 1180px; margin: 0 auto; padding: 84px 28px 10px; }
.section > .shead { max-width: 660px; margin-bottom: 42px; }
.shead .kicker2 {
  font-family: var(--font-m); color: var(--acc); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.shead .kicker2::before { content: ''; width: 22px; height: 1.5px; background: linear-gradient(90deg, var(--acc), transparent); }
.shead h2 { font-family: var(--font-d); font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.03em; line-height: 1.08; margin-top: 12px; }
.shead p { color: var(--tx-2); margin-top: 13px; font-size: 15.5px; }

.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fcard { padding: 26px 24px; transition: transform 0.28s var(--ease), box-shadow 0.28s; }
.fcard:hover { transform: translateY(-5px); box-shadow: var(--shadow), 0 18px 50px rgba(245, 242, 234, 0.06); }
.fcard .fico {
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(245, 242, 234, 0.16), rgba(245, 242, 234, 0.05));
  border: 1px solid rgba(245, 242, 234, 0.22);
  color: var(--acc);
  display: grid; place-items: center; margin-bottom: 18px;
  transition: 0.28s var(--ease);
}
.fcard:hover .fico { transform: scale(1.08) rotate(-4deg); }
.fcard h3 { font-family: var(--font-d); font-size: 17.5px; letter-spacing: -0.01em; }
.fcard p { color: var(--tx-2); font-size: 14px; margin-top: 8px; }
.fcard .tag {
  display: inline-block; margin-top: 14px;
  font-family: var(--font-m); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--acc-ink); background: linear-gradient(90deg, #ffffff, #ded8ce);
  padding: 3px 9px; border-radius: 99px;
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: paso; }
.step { padding: 28px 26px; }
.step::after {
  counter-increment: paso; content: counter(paso, decimal-leading-zero);
  position: absolute; top: 18px; right: 22px;
  font-family: var(--font-m); font-weight: 700; font-size: 42px; line-height: 1;
  background: linear-gradient(180deg, rgba(245, 242, 234, 0.3), rgba(245, 242, 234, 0.03));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none;
}
.step .sic {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #ded8ce); color: var(--acc-ink);
  display: grid; place-items: center; margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.step h3 { font-family: var(--font-d); font-size: 17px; }
.step p { color: var(--tx-2); font-size: 14px; margin-top: 8px; }

.cmp .yes { color: var(--ok); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.cmp .yes .ic { background: rgba(88, 227, 146, 0.14); border-radius: 99px; padding: 2.5px; width: 17px; height: 17px; }
.cmp .no { color: var(--tx-3); display: inline-flex; align-items: center; gap: 8px; }

.cmp .col-us { background: rgba(245, 242, 234, 0.045); border-left: 1px solid rgba(245, 242, 234, 0.14); }

.faq { max-width: 780px; }
.faq details {
  border: 1px solid var(--line); border-radius: 15px;
  background: var(--panel);
  margin-bottom: 10px; overflow: hidden;
  transition: border-color 0.2s;
}
.faq details:hover { border-color: var(--line-2); }
.faq details[open] { border-color: rgba(245, 242, 234, 0.3); }
.faq summary {
  list-style: none; cursor: pointer; padding: 17px 20px;
  font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--tx-3); transition: 0.25s var(--ease); flex: 0 0 auto; }
.faq details[open] summary .ic { transform: rotate(180deg); color: var(--acc); }
.faq .ans { padding: 0 20px 18px; color: var(--tx-2); font-size: 14.5px; max-width: 64ch; }
.faq details[open] .ans { animation: ansIn 0.3s var(--ease); }
@keyframes ansIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.cta-final { text-align: center; padding: 90px 28px 70px; position: relative; }
.cta-final::before {
  content: ''; position: absolute; left: 50%; top: 40px; transform: translateX(-50%);
  width: min(640px, 90vw); height: 260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 242, 234, 0.09), transparent);
  pointer-events: none;
}
.cta-final h2 { font-family: var(--font-d); font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -0.03em; position: relative; }
.cta-final p { color: var(--tx-2); margin: 14px 0 28px; position: relative; }

/* footer grande */
footer.bigfoot { border-top: 1px solid var(--line); margin-top: 50px; position: relative; }
footer.bigfoot::before {
  content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: min(520px, 70vw); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 242, 234, 0.5), transparent);
}
.bigfoot .cols {
  max-width: 1180px; margin: 0 auto; padding: 48px 28px 30px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px;
}
.bigfoot h4 { font-family: var(--font-m); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; color: var(--tx-3); }
.bigfoot ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.bigfoot a { color: var(--tx-2); font-size: 13.5px; transition: 0.15s; }
.bigfoot a:hover { color: var(--acc); }
.bigfoot .blurb { color: var(--tx-3); font-size: 13.5px; max-width: 34ch; margin-top: 14px; }
.bigfoot .base {
  max-width: 1180px; margin: 0 auto; padding: 18px 28px 32px;
  border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--tx-3); font-size: 12.5px;
}

/* ---------- uploader ---------- */
.uploader { padding: 24px; position: sticky; top: 86px; }
.drop {
  position: relative;
  border: 1.5px dashed rgba(255, 255, 255, 0.17); border-radius: 16px;
  padding: 42px 20px; text-align: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.014);
  transition: border-color 0.22s, background 0.22s, transform 0.22s var(--ease);
}
.drop::before {
  content: ''; position: absolute; inset: 10px; pointer-events: none; opacity: 0.55;
  --c: rgba(245, 242, 234, 0.55);
  background:
    linear-gradient(var(--c), var(--c)) left 0 top 0 / 16px 2px,
    linear-gradient(var(--c), var(--c)) left 0 top 0 / 2px 16px,
    linear-gradient(var(--c), var(--c)) right 0 top 0 / 16px 2px,
    linear-gradient(var(--c), var(--c)) right 0 top 0 / 2px 16px,
    linear-gradient(var(--c), var(--c)) left 0 bottom 0 / 16px 2px,
    linear-gradient(var(--c), var(--c)) left 0 bottom 0 / 2px 16px,
    linear-gradient(var(--c), var(--c)) right 0 bottom 0 / 16px 2px,
    linear-gradient(var(--c), var(--c)) right 0 bottom 0 / 2px 16px;
  background-repeat: no-repeat;
  transition: opacity 0.22s, inset 0.22s var(--ease);
}
.drop::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 242, 234, 0.10), transparent 68%);
  opacity: 0; transition: opacity 0.25s;
}
.drop:hover, .drop.over { border-color: rgba(245, 242, 234, 0.65); background: rgba(245, 242, 234, 0.045); }
.drop:hover::before, .drop.over::before { opacity: 1; inset: 7px; }
.drop:hover::after, .drop.over::after { opacity: 1; }
.drop.over { transform: scale(1.012); }
.drop .ic { color: var(--acc); filter: drop-shadow(0 4px 14px rgba(245, 242, 234, 0.35)); transition: transform 0.25s var(--ease); }
.drop:hover .ic { transform: translateY(-3px); }
.drop h3 { font-family: var(--font-d); font-size: 18px; margin-top: 13px; letter-spacing: -0.01em; }
.drop p { color: var(--tx-3); font-size: 13px; margin-top: 5px; }
.pickrow { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 11px; }
.pickrow .btn { font-size: 13px; }
.hint-paste { text-align: center; color: var(--tx-3); font-size: 12px; margin-top: 11px; }
kbd {
  font-family: var(--font-m); font-size: 10.5px; color: var(--tx-2);
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5.5px;
  background: var(--panel-3);
}

.flist { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 14px 0; max-height: 250px; overflow-y: auto; padding-right: 2px; }
.flist li {
  display: flex; align-items: center; gap: 11px;
  background: rgba(16, 10, 17, 0.45); border: 0;
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 14px;
  animation: rowIn 0.3s var(--ease);
  transition: border-color 0.16s;
}
.flist li:hover { border-color: var(--line-2); }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.flist .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.flist .fpath { display: block; color: var(--tx-3); font-size: 11px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.flist .fsize { font-family: var(--font-m); color: var(--tx-3); font-size: 11.5px; }
.flist .fdel { background: none; border: none; color: var(--tx-3); padding: 5px; border-radius: 8px; display: grid; place-items: center; transition: 0.15s; }
.flist .fdel:hover { color: var(--danger); background: var(--danger-soft); transform: scale(1.08); }

/* iconos de archivo con color por tipo */
.fic {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  background: var(--panel-3); color: var(--tx-2);
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.fic.t-image { background: rgba(159, 201, 240, 0.12); color: #9fc9f0; border-color: rgba(159, 201, 240, 0.2); }
.fic.t-video { background: rgba(244, 114, 182, 0.12); color: #f7a4ce; border-color: rgba(244, 114, 182, 0.2); }
.fic.t-audio { background: rgba(94, 234, 212, 0.11); color: #83e9d8; border-color: rgba(94, 234, 212, 0.2); }
.fic.t-doc { background: rgba(251, 191, 36, 0.11); color: #fcd377; border-color: rgba(251, 191, 36, 0.2); }
.fic.t-archive { background: rgba(167, 205, 150, 0.11); color: #b6d3a8; border-color: rgba(167, 205, 150, 0.2); }

.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.opts .span2 { grid-column: span 2; }
.sumline { display: flex; justify-content: space-between; align-items: center; color: var(--tx-3); font-size: 13px; margin: 6px 2px 12px; }
.sumline strong { font-family: var(--font-m); color: var(--tx-2); font-weight: 600; font-size: 12.5px; }

/* banner de subida pendiente */
.pending-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(255, 196, 107, 0.1), rgba(255, 196, 107, 0.05));
  border: 1px solid rgba(255, 196, 107, 0.3);
  border-radius: var(--r-sm); padding: 13px 15px; margin-bottom: 14px; font-size: 13.5px; color: var(--warn);
}
.pending-banner .grow { flex: 1; min-width: 180px; }
.pending-banner b { color: var(--tx); }

/* ---------- progreso ---------- */
.prog { padding: 8px 4px; }
.prog h3 { font-family: var(--font-d); font-size: 19px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.prog h3 .grow { flex: 1; }
.ptrack {
  height: 12px; border-radius: 99px; overflow: hidden; margin: 18px 0 10px;
  background: rgba(16, 10, 17, 0.7);
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}
.pfill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #bdb5aa, #f5f2ea 60%, #ffffff);
  border-radius: 99px;
  transition: width 0.3s var(--ease);
  position: relative;
  box-shadow: 0 0 18px rgba(245, 242, 234, 0.45);
}
.pfill::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(-55deg, transparent 0 10px, rgba(255, 255, 255, 0.16) 10px 20px);
  animation: barberpole 1.1s linear infinite;
  border-radius: inherit;
}
@keyframes barberpole { to { transform: translateX(28px); } }
.pmeta { display: flex; justify-content: space-between; gap: 10px; color: var(--tx-2); font-size: 13px; font-family: var(--font-m); flex-wrap: wrap; }
.pmeta b { color: var(--tx); font-size: 15px; }
.pfiles { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 6px; max-height: 170px; overflow-y: auto; }
.pfiles li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--tx-3); }
.pfiles li.doing { color: var(--tx-2); }
.pfiles li.doing .ic { color: var(--acc); }
.pfiles li.done { color: var(--tx-2); }
.pfiles li.done .st { color: var(--ok); }
.pfiles .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfiles .st { margin-left: auto; font-family: var(--font-m); font-size: 12px; }
.pwarn { margin-top: 16px; font-size: 12.5px; color: var(--tx-3); display: flex; gap: 8px; align-items: center; }
.perror {
  margin-top: 14px; background: var(--danger-soft); border: 1px solid rgba(255, 118, 118, 0.3);
  color: var(--danger); border-radius: var(--r-sm); padding: 12px 14px; font-size: 13.5px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.perror .btn { margin-left: auto; }

/* ---------- resultado ---------- */
.done-head { display: flex; align-items: center; gap: 13px; margin-bottom: 4px; }
.done-head .ok-badge {
  width: 42px; height: 42px; border-radius: 13px;
  background: linear-gradient(160deg, rgba(88, 227, 146, 0.2), rgba(88, 227, 146, 0.08));
  border: 1px solid rgba(88, 227, 146, 0.35);
  color: var(--ok); display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(88, 227, 146, 0.15);
  animation: popIn 0.45s var(--ease);
}
@keyframes popIn { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.done-head h3 { font-family: var(--font-d); font-size: 20px; letter-spacing: -0.01em; }
.done-head p { color: var(--tx-3); font-size: 13px; }
.linkbox {
  display: flex; align-items: center; gap: 8px;
  background: rgba(16, 10, 17, 0.65); border: 1px solid rgba(245, 242, 234, 0.28); border-radius: 14px;
  padding: 8px 8px 8px 15px; margin: 16px 0 10px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 26px rgba(245, 242, 234, 0.07);
}
.linkbox input { flex: 1; background: none; border: none; outline: none; font-family: var(--font-m); font-size: 13px; color: var(--acc); font-weight: 600; min-width: 0; }
.done-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.qrbig { text-align: center; padding: 6px 0 2px; }
.qrbig img { width: 214px; height: 214px; border-radius: 16px; border: 7px solid #fff; background: #fff; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5); }
.qrbig p { color: var(--tx-3); font-size: 12.5px; margin-top: 12px; }
.done-exp { margin-top: 14px; text-align: center; color: var(--tx-3); font-size: 12.5px; }
.done-exp b { color: var(--tx-2); }
.done-exp a { color: var(--acc); }




.dl-hint { font-size: 12.5px; color: var(--tx-3); margin: 12px 0 0; }
.dl-meta { opacity: .65; font-weight: 500; margin-left: 2px; }
@media (max-width: 560px) {
  /* el botón de descarga no debe recortarse nunca: manda el ancho completo */
  .dl-actions { flex-direction: column; align-items: stretch; }
  .dl-actions .btn { width: 100%; justify-content: center; }
}
.frow .fdl { opacity: .75; transition: opacity .18s, transform .18s var(--ease); }
.frow:hover .fdl { opacity: 1; transform: translateY(-1px); }

/* ---------- elegir modo: rápido vs con detalles ---------- */
.modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 4px;
  perspective: 900px;
}
.mode {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 15px; cursor: pointer; text-align: left;
  font: inherit; color: var(--tx-2);
  transition: transform .35s var(--ease), border-color .2s, background .2s, box-shadow .35s var(--ease);
  transform-style: preserve-3d;
}
.mode .ic { color: var(--tx-3); transition: color .2s, transform .35s var(--ease); }
.mode b { color: var(--tx); font-size: 14px; font-weight: 600; }
.mode span { font-size: 11.5px; color: var(--tx-3); line-height: 1.35; }
.mode:hover { border-color: var(--line-2); transform: translateY(-2px) rotateX(3deg); }
.mode:hover .ic { color: var(--acc); transform: translateZ(10px); }
.mode:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.mode.on {
  border-color: var(--acc);
  background: linear-gradient(180deg, var(--acc-soft), var(--panel-2));
  box-shadow: 0 8px 24px -12px rgba(245, 242, 234, 0.25);
}
.mode.on .ic { color: var(--acc); }
.mode.on b { color: var(--acc); }
.mode-note {
  font-size: 12px; color: var(--tx-3); margin: 12px 2px 16px;
  display: flex; align-items: center; gap: 7px;
  animation: modeIn .3s var(--ease) both;
}
.opts { animation: modeIn .32s var(--ease) both; }
@keyframes modeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 520px) {
  .modes { gap: 8px; }
  .mode { padding: 12px 12px; }
  .mode span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .mode, .mode .ic, .opts, .mode-note { transition: none; animation: none; }
  .mode:hover { transform: none; }
}

/* ---------- wordmark ---------- */
.wordmark { height: 24px; width: auto; display: block; color: var(--tx); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand:hover .wordmark { color: var(--acc); transition: color .2s var(--ease); }
.foot .wordmark { height: 21px; }
@media (max-width: 640px) { .wordmark { height: 21px; } }

/* ---------- avisos por WhatsApp ---------- */
.field-notify label .ic { color: var(--acc); vertical-align: -2px; margin-right: 3px; }
.field-hint { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--tx-3); }
.done-notify {
  margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--tx-2);
  background: var(--acc-soft); border: 1px solid rgba(245, 242, 234, 0.3);
  border-radius: 12px; padding: 9px 12px;
}
.done-notify .ic { color: var(--acc); vertical-align: -2px; margin-right: 4px; }
.done-notify b { font-variant-numeric: tabular-nums; }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-m); font-size: 11.5px; font-weight: 600; color: var(--tx-2);
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 6.5px 12px; border-radius: 99px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.chip .ic { color: var(--acc); }
.chip.warn { color: var(--warn); border-color: rgba(255, 196, 107, 0.32); }
.chip.warn .ic { color: var(--warn); }
.chip.bad { color: var(--danger); border-color: rgba(255, 118, 118, 0.32); }
.chip.bad .ic { color: var(--danger); }
.chip.okc { color: var(--ok); border-color: rgba(88, 227, 146, 0.32); }
.chip.okc .ic { color: var(--ok); }

/* ---------- página de descarga ---------- */
.dlwrap { max-width: 880px; margin: 0 auto; padding: 38px 28px 96px; }
.dlcard { padding: 32px; }
.dl-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
/* título y mensaje los escribe el remitente: pueden venir sin un solo espacio
   y no deben poder ensanchar la página */
.dl-head h1, .dl-sub, .dl-msg { overflow-wrap: anywhere; min-width: 0; }
.dl-head h1 { font-family: var(--font-d); font-size: clamp(25px, 3.5vw, 36px); letter-spacing: -0.025em; line-height: 1.12; }
.dl-sub { color: var(--tx-3); font-size: 14px; margin-top: 8px; }
.dl-sub .sender { color: var(--tx-2); font-weight: 600; }
.dl-msg {
  margin: 20px 0 4px;
  background: rgba(16, 10, 17, 0.4); border: 1px solid var(--line);
  border-left: 3px solid var(--acc); border-radius: 11px; padding: 14px 17px;
  color: var(--tx-2); font-size: 14.5px; white-space: pre-wrap;
}
.dl-actions { display: flex; gap: 10px; margin: 24px 0 6px; flex-wrap: wrap; align-items: center; }
.dl-files { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.dl-files li {
  display: flex; align-items: center; gap: 12px;
  background: rgba(16, 10, 17, 0.4); border: 0;
  border-radius: 14px; padding: 12px 15px;
  transition: border-color 0.18s, transform 0.18s var(--ease), background 0.18s;
}
.dl-files li:hover { border-color: var(--line-2); transform: translateX(3px); background: rgba(255, 255, 255, 0.018); }
.dl-files li.selected { border-color: rgba(245, 242, 234, 0.5); background: rgba(245, 242, 234, 0.05); }
.dl-files .fic { width: 42px; height: 42px; border-radius: 12px; }
.dl-files .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14.5px; }
.dl-files .fsize { font-family: var(--font-m); color: var(--tx-3); font-size: 11.5px; font-weight: 400; margin-top: 2px; }
.dl-files .facts { display: flex; gap: 6px; }

/* barra flotante de selección */
.selbar {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 100px);
  display: flex; align-items: center; gap: 14px;
  background: rgba(65, 54, 66, 0.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 0; border-radius: 17px;
  padding: 12px 12px 12px 20px; box-shadow: 0 14px 40px rgba(16, 10, 17, 0.6);
  z-index: 50;
  transition: transform 0.35s var(--ease); font-size: 14px; max-width: min(92vw, 560px);
}
.selbar.show { transform: translate(-50%, 0); }
.selbar b { font-family: var(--font-m); }
.selbar .muted { color: var(--tx-3); font-size: 12.5px; font-family: var(--font-m); }

.lockbox { max-width: 440px; margin: 64px auto; padding: 36px; text-align: center; }
.lockbox .lockic {
  width: 56px; height: 56px; border-radius: 17px;
  background: linear-gradient(160deg, rgba(245, 242, 234, 0.18), rgba(245, 242, 234, 0.06));
  border: 1px solid rgba(245, 242, 234, 0.3);
  color: var(--acc); display: grid; place-items: center; margin: 0 auto 18px;
}
.lockbox h2 { font-family: var(--font-d); font-size: 22px; letter-spacing: -0.01em; }
.lockbox p { color: var(--tx-3); font-size: 14px; margin: 8px 0 20px; }
.lockbox form { display: flex; gap: 9px; }
.lockbox input {
  flex: 1; background: rgba(16, 10, 17, 0.6); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 14px; outline: none; color: var(--tx);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.lockbox input:focus { border-color: rgba(245, 242, 234, 0.6); box-shadow: 0 0 0 3.5px rgba(245, 242, 234, 0.13); }
.lockerr { color: var(--danger); font-size: 13px; margin-top: 12px; min-height: 18px; }

.bigstate { max-width: 480px; margin: 84px auto; text-align: center; padding: 0 24px; }
.bigstate .bic {
  width: 68px; height: 68px; border-radius: 20px;
  background: var(--panel-2);
  border: 1px solid var(--line-2); color: var(--tx-3);
  display: grid; place-items: center; margin: 0 auto 22px;
  box-shadow: var(--shadow);
}
.bigstate h2 { font-family: var(--font-d); font-size: 25px; letter-spacing: -0.02em; }
.bigstate p { color: var(--tx-3); margin: 10px 0 26px; font-size: 14.5px; }

/* skeleton */
.skel { border-radius: var(--r); overflow: hidden; position: relative; background: var(--panel); border: 1px solid var(--line); height: 180px; }
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- modal / preview ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(4, 5, 8, 0.78);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  display: grid; place-items: center; z-index: 70; padding: 22px;
  opacity: 0; transition: opacity 0.2s ease;
}
.modal-overlay.show { opacity: 1; }
.modal-box {
  width: min(440px, 94vw);
  border-radius: var(--r); padding: 21px 23px;
  transform: translateY(12px) scale(0.98); transition: transform 0.22s var(--ease);
}
.modal-overlay.show .modal-box { transform: none; }
.modal-box.wide { width: min(620px, 94vw); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.modal-head h3 { font-family: var(--font-d); font-size: 18px; letter-spacing: -0.01em; }
.modal-msg { color: var(--tx-2); font-size: 14.5px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.modal-body .field { margin-top: 12px; }

.pvmodal {
  position: fixed; inset: 0; background: rgba(3, 4, 7, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: none; align-items: center; justify-content: center; z-index: 60; padding: 26px;
}
.pvmodal.show { display: flex; }
.pvmodal .pvbox { max-width: min(1020px, 94vw); max-height: 90vh; display: flex; flex-direction: column; gap: 12px; width: 100%; align-items: center; animation: fadeIn 0.25s var(--ease); }
.pvhead { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--tx-2); font-size: 14px; }
.pvhead .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--tx); }
.pvhead .count { font-family: var(--font-m); color: var(--tx-3); font-size: 12px; }
.pvbody { width: 100%; display: grid; place-items: center; min-height: 0; position: relative; }
.pvbody img, .pvbody video { max-width: 100%; max-height: 72vh; border-radius: 14px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
.pvbody audio { width: min(520px, 90vw); }
.pvbody iframe { width: min(920px, 92vw); height: 72vh; border: none; border-radius: 14px; background: #fff; }
.pvnav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(22, 13, 34, 0.9); border: 1px solid var(--line-2); color: var(--tx);
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  transition: 0.18s var(--ease);
  backdrop-filter: blur(8px);
}
.pvnav:hover { background: var(--panel-3); border-color: rgba(245, 242, 234, 0.4); transform: translateY(-50%) scale(1.06); }
.pvnav.prev { left: 10px; }
.pvnav.next { right: 10px; }

/* ---------- panel (envíos + portales) ---------- */
.sentwrap { max-width: 980px; margin: 0 auto; padding: 38px 28px 96px; }
.sentwrap > h1 { font-family: var(--font-d); font-size: 32px; letter-spacing: -0.03em; margin-bottom: 6px; }
.sentwrap > .sub { color: var(--tx-3); font-size: 14.5px; margin-bottom: 24px; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 24px; align-items: center; }
.tab {
  background: none; border: none; color: var(--tx-3); font-weight: 600; font-size: 14.5px;
  padding: 11px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; gap: 8px; align-items: center;
  transition: color 0.18s;
}
.tab:hover { color: var(--tx-2); }
.tab.on { color: var(--acc); border-bottom-color: var(--acc); filter: drop-shadow(0 4px 12px rgba(245, 242, 234, 0.25)); }
.tab .n { font-family: var(--font-m); background: var(--panel-3); color: var(--tx-2); font-size: 11px; border-radius: 99px; padding: 1px 8px; border: 1px solid var(--line); }
.tab.on .n { background: var(--acc-soft); color: var(--acc); border-color: rgba(245, 242, 234, 0.3); }
.tabbar-right { margin-left: auto; display: flex; align-items: center; }

.scards { display: flex; flex-direction: column; gap: 15px; }
.scard { padding: 21px 23px; transition: transform 0.22s var(--ease); }
.scard:hover { transform: translateY(-2px); }
.scard .shead { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.scard h3 { font-family: var(--font-d); font-size: 17.5px; letter-spacing: -0.01em; flex: 1; min-width: 200px; }
.scard h3 .sm { display: block; font-family: var(--font-b); font-weight: 500; color: var(--tx-3); font-size: 12.5px; margin-top: 3px; }
.sstats { display: flex; gap: 26px; margin: 16px 0; flex-wrap: wrap; }
.sstat b { font-family: var(--font-m); font-size: 22px; font-weight: 700; display: block; line-height: 1.1; }
.sstat span { color: var(--tx-3); font-size: 12px; font-weight: 500; }
.sacts { display: flex; gap: 8px; flex-wrap: wrap; }
.sempty { text-align: center; padding: 70px 20px; }
.sempty .bic {
  position: relative;
  width: 64px; height: 64px; border-radius: 19px;
  background: var(--panel-2);
  border: 1px solid var(--line-2); color: var(--acc);
  display: grid; place-items: center; margin: 0 auto 20px;
}
.sempty .bic::before, .sempty .bic::after {
  content: ''; position: absolute; inset: -14px; border-radius: 26px;
  border: 1px solid rgba(245, 242, 234, 0.22);
  animation: ping 2.6s var(--ease) infinite;
}
.sempty .bic::after { animation-delay: 1.3s; }
@keyframes ping { 0% { transform: scale(0.82); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1.28); opacity: 0; } }
.sempty h3 { font-family: var(--font-d); font-size: 20px; }
.sempty p { color: var(--tx-3); margin: 8px 0 24px; max-width: 44ch; margin-inline: auto; }

.subprog { margin-top: 14px; }
.subprog .ptrack { margin: 8px 0 6px; height: 9px; }
.subprog .pmeta { font-size: 12px; }

.actlist { list-style: none; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 230px; overflow-y: auto; }
.actlist li { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--tx-2); }
.actlist .when { margin-left: auto; font-family: var(--font-m); color: var(--tx-3); font-size: 11px; white-space: nowrap; }
.actlist .aic { width: 27px; height: 27px; border-radius: 8px; background: var(--panel-3); border: 1px solid var(--line); display: grid; place-items: center; color: var(--tx-3); flex: 0 0 auto; }

.filelist-mini { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.filelist-mini li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--tx-2); background: rgba(16, 10, 17, 0.4); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; }
.filelist-mini .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist-mini .dls { font-family: var(--font-m); color: var(--tx-3); font-size: 11px; white-space: nowrap; }
.filelist-mini .fdel { background: none; border: none; color: var(--tx-3); padding: 4px; border-radius: 7px; display: grid; place-items: center; }
.filelist-mini .fdel:hover { color: var(--danger); background: var(--danger-soft); }

/* recibidos en portal */
.rlist { list-style: none; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.rlist li {
  display: flex; align-items: center; gap: 12px;
  background: rgba(16, 10, 17, 0.4); border: 1px solid var(--line); border-radius: 13px; padding: 11px 14px; flex-wrap: wrap;
  transition: border-color 0.16s, transform 0.16s var(--ease);
}
.rlist li:hover { border-color: var(--line-2); transform: translateX(3px); }
.rlist .ravatar {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(140deg, hsl(var(--h, 80) 75% 62% / 0.24), hsl(var(--h, 80) 75% 45% / 0.1));
  border: 1px solid hsl(var(--h, 80) 75% 60% / 0.3);
  color: hsl(var(--h, 80) 85% 72%);
  display: grid; place-items: center;
  font-family: var(--font-d); font-weight: 700; font-size: 15px;
}
.rlist .rinfo { flex: 1; min-width: 170px; }
.rlist .rname { font-weight: 600; font-size: 14px; }
.rlist .rmeta { color: var(--tx-3); font-size: 12px; font-family: var(--font-m); }
.rlist .rnote { width: 100%; color: var(--tx-2); font-size: 13px; background: rgba(255, 255, 255, 0.02); border-left: 2px solid var(--acc); padding: 7px 11px; border-radius: 8px; }

/* ---------- portal público ---------- */
.portalwrap { max-width: 640px; margin: 0 auto; padding: 44px 24px 96px; }
.portalcard { padding: 34px; }
.portalcard .pico {
  position: relative;
  width: 58px; height: 58px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(245, 242, 234, 0.18), rgba(245, 242, 234, 0.06));
  border: 1px solid rgba(245, 242, 234, 0.3);
  color: var(--acc); display: grid; place-items: center; margin-bottom: 20px;
}
.portalcard .pico::before {
  content: ''; position: absolute; inset: -10px; border-radius: 24px;
  border: 1px solid rgba(245, 242, 234, 0.25);
  animation: ping 2.8s var(--ease) infinite;
}
.portalcard h1 { font-family: var(--font-d); font-size: clamp(25px, 4.2vw, 33px); letter-spacing: -0.025em; line-height: 1.12; }
.portalcard .pmsg { color: var(--tx-2); margin-top: 11px; font-size: 15px; white-space: pre-wrap; }
.portalcard form, .portalform { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.portal-note { color: var(--tx-3); font-size: 12.5px; margin-top: 15px; display: flex; align-items: center; gap: 8px; }
.portal-note .ic { color: var(--acc-2); }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 24px) scale(0.97);
  background: rgba(65, 54, 66, 0.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--tx); border: 0;
  padding: 12px 22px; border-radius: 14px; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: 0.3s var(--ease); z-index: 90;
  box-shadow: var(--shadow), 0 0 34px rgba(245, 242, 234, 0.1);
  max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast.err { border-color: rgba(255, 118, 118, 0.5); color: var(--danger); box-shadow: var(--shadow); }

/* ---------- footer simple ---------- */
footer.foot { color: var(--tx-3); font-size: 12.5px; }

.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fade-in { animation: fadeIn 0.35s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* drag overlay global */
.dragveil {
  position: fixed; inset: 0; z-index: 80; display: none; place-items: center;
  background: rgba(8, 9, 13, 0.86); backdrop-filter: blur(10px);
  border: 2.5px dashed rgba(245, 242, 234, 0.75); border-radius: 24px; margin: 14px;
  color: var(--acc); font-family: var(--font-d); font-size: 26px; font-weight: 700; letter-spacing: -0.01em;
  pointer-events: none;
  text-shadow: 0 0 34px rgba(245, 242, 234, 0.5);
}
.dragveil.show { display: grid; animation: fadeIn 0.18s ease; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .fgrid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .home { grid-template-columns: 1fr; gap: 32px; padding-top: 24px; }
  .hero { padding-top: 4px; }
  .uploader { position: static; }
}
@media (max-width: 760px) {
  header.top {
    position: fixed; top: 10px; left: 10px; right: 10px;
    border-radius: 999px;
    padding: 9px 10px 9px 18px;
    background: rgba(58, 46, 60, 0.72);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 10px 34px rgba(6, 2, 12, 0.55);
  }
  header.top.scrolled { box-shadow: 0 14px 40px rgba(6, 2, 12, 0.7); }
  /* el header flotante ya no ocupa sitio en el flujo: se lo devolvemos */
  body { padding-top: 72px; }
  /* sin texto, el botón queda solo con el icono: lo dejamos cuadrado.
     Si no, el min-height de 44px lo estira y se ve angosto. */
  .navcta span, .navlink span { display: none; }
  .navcta, .navlink {
    padding: 9px; gap: 0;
    width: 44px; min-width: 44px; height: 44px;
    justify-content: center;
  }
  .navcta svg, .navlink svg { flex: 0 0 auto; }
  .home, .dlwrap, .sentwrap, .section, .portalwrap { padding-left: 22px; padding-right: 22px; }
  .section { padding-top: 58px; }
  .perks { grid-template-columns: 1fr; }
  .opts { grid-template-columns: 1fr; }
  .opts .span2 { grid-column: span 1; }
  .done-grid { grid-template-columns: 1fr; }
  .dlcard { padding: 21px; }
  .dl-actions .btn { flex: 1; }
  .sstats { gap: 18px; }
  .fgrid { grid-template-columns: 1fr; }
  .bigfoot .cols { grid-template-columns: 1fr; gap: 24px; }
  .pickrow { grid-template-columns: 1fr; }
  /* Envíos, Portales y Crear portal: los tres visibles sin scroll lateral.
     El botón baja a su propia fila a lo ancho cuando no cabe al costado. */
  .tabs { flex-wrap: wrap; row-gap: 10px; overflow: visible; }
  .tabbar-right { flex: 1 0 100%; margin-left: 0; }
  .tabbar-right:empty { display: none; }
  .tabbar-right .btn { flex: 1; }
  /* Nada de posiciones negativas en móvil: si el navegador se salta el
     recorte de .bgfx, igual no hay nada fuera de pantalla que empuje el
     ancho. El desenfoque se sale de la caja pero no cuenta para el scroll. */
  .bgfx .orb { filter: blur(70px); }
  /* el scale de la animación crece desde el origen: anclado al borde para
     que se expanda hacia dentro y no empuje el ancho */
  .bgfx .orb.a { width: 300px; height: 300px; top: 0; right: 0; transform-origin: 100% 0; }
  .bgfx .orb.b { width: 280px; height: 280px; bottom: 0; left: 0; transform-origin: 0 100%; }
  .bgfx .orb.c { width: 240px; height: 240px; top: 45%; right: 0; transform-origin: 100% 50%; }
  /* la animación también empuja: la dejamos moviéndose hacia dentro */
  .bgfx .orb { animation-name: orbFloatMovil; }
}
@keyframes orbFloatMovil {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(0, 30px, 0) scale(1.1); }
}

/* ---------- apoyo / donaciones ---------- */
.apoyawrap { max-width: 880px; margin: 0 auto; padding: 42px 24px 96px; }
.apoyo-hero { padding: 44px 38px; text-align: center; }
.heartic {
  position: relative;
  width: 64px; height: 64px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 143, 163, 0.2), rgba(245, 242, 234, 0.14));
  border: 1px solid rgba(255, 143, 163, 0.35);
  color: #ff8fa3; display: grid; place-items: center; margin: 0 auto 20px;
  box-shadow: 0 12px 36px rgba(255, 143, 163, 0.14);
}
.heartic::before {
  content: ''; position: absolute; inset: -11px; border-radius: 26px;
  border: 1px solid rgba(255, 143, 163, 0.3);
  animation: ping 2.8s var(--ease) infinite;
}
.heartic .ic { animation: heartbeat 1.8s ease infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1); } 36% { transform: scale(1.1); } 48% { transform: scale(1); } }
.apoyo-hero h1 { font-family: var(--font-d); font-size: clamp(28px, 4.4vw, 42px); letter-spacing: -0.03em; line-height: 1.08; }
.apoyo-hero h1 em, .apoyo-band h2 em {
  font-style: normal;
  background: linear-gradient(94deg, #ffffff, var(--acc) 45%, var(--acc-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.apoyo-hero .sub { color: var(--tx-2); font-size: 15.5px; margin: 16px auto 0; max-width: 56ch; }
.apoyo-chips { display: flex; justify-content: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.levels { display: flex; justify-content: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.level {
  min-width: 118px; padding: 14px 18px; border-radius: 14px;
  background: rgba(16, 10, 17, 0.45); border: 1px solid var(--line);
  transition: 0.2s var(--ease);
}
.level:hover { border-color: rgba(245, 242, 234, 0.5); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(245, 242, 234, 0.1); }
.level b { display: block; font-family: var(--font-m); font-size: 19px; }
.level span { color: var(--tx-3); font-size: 12px; font-weight: 500; }
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 0; }
.dcard { padding: 22px; }
.dico {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  background: linear-gradient(160deg, rgba(245, 242, 234, 0.16), rgba(245, 242, 234, 0.05));
  border: 1px solid rgba(245, 242, 234, 0.24);
  color: var(--acc); display: grid; place-items: center;
}
.dcard .dico { margin-bottom: 14px; }
.dcard h3 { font-family: var(--font-d); font-size: 16px; letter-spacing: -0.01em; }
.dcard p { color: var(--tx-2); font-size: 13.5px; margin-top: 7px; }
.dmethods { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dmethod { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.dmethod .dmhead { display: flex; align-items: center; gap: 12px; }
.dmethod .dmhead h3 { font-family: var(--font-d); font-size: 16.5px; letter-spacing: -0.01em; flex: 1; }
.dmethod > p { color: var(--tx-2); font-size: 13.5px; }
.dmethod.soon { opacity: 0.78; }
.dmethod.soon .dico { filter: saturate(0.4); }
.dmethod.share { border-color: rgba(245, 242, 234, 0.2); }
.dbtns { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 6px; }
.daddr {
  display: flex; align-items: center; gap: 10px;
  background: rgba(16, 10, 17, 0.6); border: 1px solid var(--line); border-radius: 11px;
  padding: 8px 8px 8px 13px; margin-top: 6px;
}
.daddr .lbl { font-family: var(--font-m); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-3); }
.daddr code { flex: 1; font-family: var(--font-m); font-size: 12.5px; color: var(--acc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dqr { width: 168px; height: 168px; border-radius: 13px; border: 6px solid #fff; background: #fff; margin: 6px auto; display: block; }
.navheart:hover .ic { color: #ff8fa3; }
.support-line { text-align: center; margin-top: 11px; font-size: 12.5px; color: var(--tx-3); }
.support-line .ic { color: #ff8fa3; vertical-align: -2px; }
.support-line a { color: var(--acc); font-weight: 600; }

/* banda de apoyo en la landing */
.apoyo-band { padding: 38px 40px; display: grid; grid-template-columns: 1.5fr 0.5fr; gap: 26px; align-items: center; overflow: hidden; }
.apoyo-band h2 { font-family: var(--font-d); font-size: clamp(24px, 3.4vw, 36px); letter-spacing: -0.025em; line-height: 1.12; margin-top: 12px; }
.apoyo-band p { color: var(--tx-2); font-size: 15px; margin-top: 12px; max-width: 56ch; }
.apoyo-band-cta { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.apoyo-band-cta .muted { color: var(--tx-3); font-size: 13px; }
.apoyo-band-icon { display: grid; place-items: center; color: rgba(255, 143, 163, 0.9); position: relative; }
.apoyo-band-icon::before {
  content: ''; position: absolute; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 143, 163, 0.13), transparent);
}
.apoyo-band-icon .ic { filter: drop-shadow(0 10px 30px rgba(255, 143, 163, 0.35)); animation: heartbeat 1.8s ease infinite; }
@media (max-width: 860px) {
  .dgrid, .dmethods { grid-template-columns: 1fr; }
  .apoyo-band { grid-template-columns: 1fr; padding: 28px 24px; }
  .apoyo-band-icon { display: none; }
  .apoyo-hero { padding: 32px 22px; }
}

/* ============ Capa David: banda final de color, bento, demo reanudable, refinos ============ */

/* cifras siempre tabulares */
.pmeta, .sstat b, .fsize, .flist .fsize, .linkbox input, .selbar b, .selbar .muted,
.level b, .daddr code, .chip, .tab .n, .actlist .when, .rlist .rmeta, .dl-sub, .done-exp b { font-variant-numeric: tabular-nums; }

/* el hover no muere bajo el reveal (refuerzo de especificidad) */
.has-js .fcard[data-reveal].revealed:hover { transform: translateY(-5px); }
.has-js .dcard[data-reveal].revealed:hover { transform: translateY(-3px); }

/* kickers/eyebrows en Inter con tracking (ya no mono) */
.hero .kicker, .shead .kicker2, .beta, .bigfoot h4 { font-family: var(--font-b); }

/* ---------- BANDA FINAL: el único bloque grande de color (regla premium) ---------- */
.cta-final { padding: 90px 28px 80px; }
.cta-final::before { display: none; }
.cta-band {
  position: relative; overflow: hidden;
  max-width: 1180px; margin: 0 auto;
  background: linear-gradient(135deg, #ded8ce 0%, #f2eee6 52%, #ffffff 100%);
  border-radius: 26px;
  padding: clamp(46px, 7vw, 84px) clamp(24px, 5vw, 60px);
  text-align: center;
  box-shadow: 0 20px 40px -18px rgba(16, 10, 17, 0.6), 0 60px 130px -40px rgba(16, 10, 17, 0.55);
}
.cta-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 300px at 20% -20%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(500px 320px at 90% 120%, rgba(21, 12, 34, 0.07), transparent 60%);
}
.cta-band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.25;
  background-image:
    linear-gradient(rgba(21, 12, 34, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 12, 34, 0.1) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(75% 100% at 50% 0%, black, transparent 85%);
  mask-image: radial-gradient(75% 100% at 50% 0%, black, transparent 85%);
}
.cta-band h2 { color: #1a141a; position: relative; font-size: clamp(30px, 4.4vw, 50px); letter-spacing: -0.03em; }
.cta-band p { color: rgba(26, 20, 26, 0.76); position: relative; margin: 14px auto 30px; max-width: 52ch; }
.cta-band .btn-light {
  position: relative;
  background: #2d232e; border-color: #2d232e; color: #f5f2ea;
  box-shadow: 0 14px 40px rgba(18, 12, 19, 0.3);
  text-shadow: none;
}
.cta-band .btn-light:hover { filter: brightness(1.35); transform: translateY(-2px); }
.cta-band .subnote { position: relative; margin-top: 18px; color: rgba(26, 20, 26, 0.6); font-size: 12.5px; }

/* ---------- bento en features: primera tarjeta protagonista con demo ---------- */
.fcard--star { grid-column: span 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 22px; align-items: center; }
.fcard--star .demo-resume { align-self: center; }
.demo-resume {
  background: rgba(16, 10, 17, 0.55); border: 0;
  border-radius: 14px; padding: 18px 18px 16px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}
.demo-resume .drfile { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--tx-2); font-weight: 600; }
.demo-resume .drfile .ic { color: var(--acc); }
.demo-resume .drtrack {
  height: 9px; border-radius: 99px; margin: 12px 0 9px; overflow: hidden;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
}
.demo-resume .drfill {
  height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, #cdc6ba, #f5f2ea);
  animation: drCycle 6.5s var(--ease) infinite;
}
.demo-resume .drstate { font-size: 11.5px; color: var(--tx-3); display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.demo-resume .drstate .cut { color: var(--warn); opacity: 0; animation: drCut 6.5s linear infinite; font-weight: 600; }
@keyframes drCycle {
  0% { width: 0%; opacity: 1; }
  34% { width: 64%; opacity: 1; }
  40% { width: 64%; opacity: 0.35; }
  46% { width: 64%; opacity: 1; }
  52% { width: 64%; opacity: 0.35; }
  56% { width: 64%; opacity: 1; }
  88% { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 1; }
}
@keyframes drCut {
  0%, 33% { opacity: 0; }
  38%, 54% { opacity: 1; }
  60%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-resume .drfill { animation: none; width: 100%; }
  .demo-resume .drstate .cut { animation: none; opacity: 0; }
  .heartic .ic, .apoyo-band-icon .ic, .hero .kicker .ic { animation: none; }
}

/* ---------- apoya: cierre y refinos ---------- */
.apoyo-cierre { margin-top: 44px; }
.apoyo-cierre .cta-band { padding: clamp(38px, 5vw, 60px) clamp(22px, 4vw, 48px); }
.dmethod .dmhead h3, .dcard h3, .level b { letter-spacing: -0.01em; }
.dmethod.share { box-shadow: var(--shadow), 0 0 0 1px rgba(245, 242, 234, 0.16), 0 18px 60px -18px rgba(245, 242, 234, 0.2); }

@media (max-width: 860px) {
  .fcard--star { grid-column: span 1; grid-template-columns: 1fr; }
}
@media (min-width: 861px) and (max-width: 980px) {
  .fcard--star { grid-column: span 2; }
}

/* ---------- acabado macizo: superficies sólidas, sombra real, cero brillos ---------- */
.panel, .fcard, .step, .scard, .sempty, .cmp, .faq details, .w, .drop {
  background: var(--panel);
  border: 0;
  box-shadow: 0 2px 14px rgba(16, 10, 17, 0.45);
}
.fcard, .step { border-radius: 20px; }
.panel { border-radius: 24px; }
.btn:hover { background: var(--panel-3); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16, 10, 17, 0.6); }
.btn-primary:hover { background: #ffffff; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(16, 10, 17, 0.6); }
.btn:active, .btn-primary:active { transform: translateY(0); }
.perks li, .field input, .field select, .field textarea, .chip {
  background: var(--panel-2);
  border: 0;
  box-shadow: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--acc); outline-offset: 1px;
}
.mode { background: var(--panel-2); border: 0; box-shadow: 0 2px 10px rgba(16, 10, 17, 0.4); }
.mode.on { background: var(--panel-3); box-shadow: 0 4px 16px rgba(16, 10, 17, 0.6); }

.kicker { background: var(--panel-2); border: 0; box-shadow: 0 2px 10px rgba(16, 10, 17, 0.4); }
.kicker2 { color: var(--tx-3); }
.tag { background: var(--acc); color: var(--acc-ink); border: 0; }
.drop { background: var(--panel-2); }
.sumline { border: 0; }


/* ============================================================
   PULIDO MÓVIL — detalles que solo se notan con el dedo
   ============================================================ */

/* el flash azul de iOS al tocar arruina cualquier acabado */
* { -webkit-tap-highlight-color: transparent; }

/* la selección de texto, con la marca */
::selection { background: var(--acc); color: var(--acc-ink); }

@media (max-width: 760px) {
  /* 1. Zona segura: el notch arriba y la barra de gestos abajo.
        Sin esto el header flotante se mete bajo el reloj. */
  header.top {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
  }
  body {
    padding-top: calc(env(safe-area-inset-top, 0px) + 74px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 2. Todo lo que se toca, al menos 44px de alto (guía de Apple) */
  .btn, .mode, .navlink, .fdel, .chip, .tab { min-height: 44px; }
  /* botones con texto largo: mejor dos líneas que salirse de la tarjeta */
  .btn { white-space: normal; text-wrap: balance; }
  .btn-icon { min-width: 44px; }
  .fdel { min-width: 44px; display: grid; place-items: center; }

  /* 3. Feedback al tocar: en móvil no hay hover, hay presión */
  .btn:active { transform: scale(0.975); }
  .mode:active { transform: scale(0.985); }
  .fcard:active, .step:active { transform: none; }

  /* 4. Ritmo vertical más apretado: en una pantalla estrecha,
        el aire de escritorio se convierte en scroll vacío */
  .section { padding: 54px 0; }
  .shead { margin-bottom: 22px; }
  .hero { padding-top: 6px; }
  .hero h1 { font-size: clamp(34px, 9.5vw, 46px); letter-spacing: -0.03em; }
  .hero .sub { font-size: 15.5px; margin-top: 14px; }
  .perks { gap: 8px; margin-top: 22px; }
  .perks li { padding: 12px 14px; font-size: 13.5px; }

  /* 5. El recorte horizontal vive en html{overflow-x:clip}: aquí nada,
        porque overflow-x en body lo convertiría en el contenedor de scroll */

  /* 6. Los títulos largos no deben partirse en una sola palabra */
  h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }

  /* 7. La banda de cierre, con el mismo aire que el resto */
  .cta-band { border-radius: 22px; padding: 40px 22px; }
  .cta-band h2 { font-size: clamp(26px, 8vw, 34px); }
}

/* 8. Scroll suave para los anclas, salvo si molesta al usuario */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* 9. Barra de scroll acorde en escritorio */
@media (min-width: 761px) {
  * { scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: var(--panel-3); border-radius: 99px;
    border: 3px solid var(--bg);
  }
  *::-webkit-scrollbar-thumb:hover { background: var(--tx-3); }
}

/* 10. Foco visible y coherente en todo lo interactivo */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 6px;
}

/* el kicker, macizo como el resto del sistema */
.hero .kicker, .kicker {
  background: var(--panel-2) !important;
  border: 0 !important;
  color: var(--tx-2);
  box-shadow: 0 2px 10px rgba(16, 10, 17, 0.35);
}

/* las teclas van sobre la superficie más clara: necesitan tinta fuerte */
kbd { color: var(--tx); background: var(--panel-3); border: 0; }

/* la página de descarga es corta: el contenido debe quedar arriba y el pie
   pegado abajo, sin un vacío enorme en medio */
body.pg-dl { display: flex; flex-direction: column; }
/* width:100% es crucial: el margin auto de .dlwrap, al ser item flex, anula
   el estirado y el main se dimensiona por su contenido — con nombres de
   archivo largos (nowrap) la página se abría a 880px y el móvil hacía
   zoom-out. Con ancho explícito, el truncado con … vuelve a funcionar. */
body.pg-dl .dwrap, body.pg-dl main { flex: 1 0 auto; width: 100%; }
body.pg-dl .foot { flex: none; margin-top: auto; }
@media (max-width: 760px) {
  body.pg-dl .foot {
    flex-direction: column; gap: 10px; text-align: center;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
    border-top: 1px solid var(--line); padding-top: 20px; margin-top: 32px;
  }
}

.dlfoot {
  max-width: 880px; margin: 0 auto; padding: 0 28px 40px;
  color: var(--tx-3); font-size: 12.5px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.dlfoot a { color: var(--acc); }
@media (max-width: 760px) {
  .dlfoot {
    flex-direction: column; align-items: center; gap: 10px; text-align: center;
    border-top: 1px solid var(--line); margin-top: 36px; padding-top: 22px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
  }
}

/* ---------- comparativa: filas macizas, legible sin girar el pulgar ---------- */
.cmp { background: transparent !important; box-shadow: none !important;
  display: flex; flex-direction: column; gap: 10px; }
.cmphead {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px;
  padding: 0 20px 4px; font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tx-3); font-weight: 600;
}
.cmphead .us { color: var(--tx); }
.cmprow {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; align-items: center;
  background: var(--panel); border-radius: 16px; padding: 15px 20px;
  box-shadow: 0 2px 14px rgba(16, 10, 17, 0.4);
}
.cmpk { font-weight: 600; font-size: 14px; }
.cmpv { color: var(--tx-2); font-size: 13.5px; }
.cmpv .who { display: none; }
.cmpv.us { font-weight: 600; color: var(--tx); }
@media (max-width: 760px) {
  .cmphead { display: none; }
  .cmprow { grid-template-columns: 1fr 1fr; gap: 10px 8px; padding: 13px 14px; }
  .cmpk { grid-column: 1 / -1; font-size: 13.5px; }
  .cmpv {
    background: var(--panel-2); border-radius: 11px; padding: 9px 11px;
    font-size: 12.5px; min-height: 58px;
  }
  .cmpv .who {
    display: block; font-style: normal; font-size: 9.5px; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--tx-3); margin-bottom: 4px; font-weight: 600;
  }
  .cmpv.us .who { color: var(--tx); }
}

/* ---------- botón del header: solo aparece cuando el cargador no está a la vista ---------- */
.navcta { transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), background 0.18s; }
.navcta.oculto { opacity: 0; pointer-events: none; transform: scale(0.92); }

/* ---------- escritorio: la zona de soltar con más cuerpo ---------- */
@media (min-width: 900px) {
  .uploader .drop { min-height: 250px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
}