/* ===========================================================================
   SHEETLAB · TIENDA
   Paleta tomada de la guia de marca (4 DOCUMENTACION/GUIA_DE_MARCA).
   Todo color pasa por una variable. La paleta clara vive en :root, la oscura
   se repite dos veces: bajo prefers-color-scheme (el aparato manda) y bajo
   [data-tema="oscuro"] (el boton manda). Asi el boton gana en los dos sentidos.
   =========================================================================== */

:root{
  /* --- marca: identica en los dos modos --- */
  --indigo:#6366F1;
  --indigo-dk:#4F46E5;
  --violet:#8B5CF6;
  --cyan:#22D3EE;
  --ok:#10B981;
  --amber:#F59E0B;
  --rose:#EF4444;

  /* --- las seis series de grafico, en su orden --- */
  --s1:#6366F1; --s2:#0EA5A0; --s3:#D97706;
  --s4:#DB2777; --s5:#0284C7; --s6:#65A30D;

  /* --- modo claro --- */
  --bg:#F7F8FC;
  --bg-2:#EDEFF7;
  --surface:#FFFFFF;
  --surface-2:#F4F6FC;
  --glass:rgba(255,255,255,.74);
  --ink:#14141F;
  --ink-2:#3D3D52;
  --muted:#5F5F7A;
  --line:rgba(20,20,31,.10);
  --line-2:rgba(20,20,31,.20);
  --top-bg:rgba(247,248,252,.88);
  --scrim:rgba(20,20,31,.42);
  --scrim-2:rgba(20,20,31,.54);
  --chip-bg:rgba(20,20,31,.07);
  --rejilla:rgba(20,20,31,.05);
  --enlace:#4F46E5;
  --violet-ink:#6D28D9;
  --halo-1:rgba(99,102,241,.11);
  --halo-2:rgba(139,92,246,.09);
  --halo-3:rgba(34,211,238,.05);
  --aviso-bg:rgba(245,158,11,.13);
  --aviso-bd:rgba(245,158,11,.42);
  --aviso-ink:#7A4A05;
  --sh-1:0 4px 20px -8px rgba(20,20,31,.22);
  --sh-2:0 20px 52px -22px rgba(20,20,31,.30);
  --tinte-tarjeta:16%;

  --grad:linear-gradient(135deg,var(--indigo),var(--violet));
  --grad-txt:linear-gradient(120deg,var(--indigo),var(--violet));
  --r:18px;
  --r-sm:11px;
  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- modo oscuro: lo que sigue al aparato --- */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --bg:#0A0A11;
    --bg-2:#0E0E18;
    --surface:#14141F;
    --surface-2:#191926;
    --glass:rgba(25,25,38,.64);
    --ink:#F2F2F7;
    --ink-2:#A9A9C2;
    --muted:#7B7B99;
    --line:#25253A;
    --line-2:#32324D;
    --top-bg:rgba(10,10,17,.80);
    --scrim:rgba(4,4,10,.72);
    --scrim-2:rgba(4,4,10,.82);
    --chip-bg:rgba(255,255,255,.08);
    --rejilla:rgba(255,255,255,.045);
    --enlace:#22D3EE;
    --violet-ink:#A78BFA;
    --halo-1:rgba(99,102,241,.20);
    --halo-2:rgba(139,92,246,.14);
    --halo-3:rgba(34,211,238,.06);
    --aviso-bg:rgba(245,158,11,.11);
    --aviso-bd:rgba(245,158,11,.34);
    --aviso-ink:#FCD9A0;
    --sh-1:0 4px 24px -8px rgba(0,0,0,.6);
    --sh-2:0 20px 60px -20px rgba(0,0,0,.9);
    --tinte-tarjeta:26%;
  }
}

/* --- modo oscuro: lo que elige la persona --- */
:root[data-tema="oscuro"]{
  --bg:#0A0A11;
  --bg-2:#0E0E18;
  --surface:#14141F;
  --surface-2:#191926;
  --glass:rgba(25,25,38,.64);
  --ink:#F2F2F7;
  --ink-2:#A9A9C2;
  --muted:#7B7B99;
  --line:#25253A;
  --line-2:#32324D;
  --top-bg:rgba(10,10,17,.80);
  --scrim:rgba(4,4,10,.72);
  --scrim-2:rgba(4,4,10,.82);
  --chip-bg:rgba(255,255,255,.08);
  --rejilla:rgba(255,255,255,.045);
  --enlace:#22D3EE;
  --violet-ink:#A78BFA;
  --halo-1:rgba(99,102,241,.20);
  --halo-2:rgba(139,92,246,.14);
  --halo-3:rgba(34,211,238,.06);
  --aviso-bg:rgba(245,158,11,.11);
  --aviso-bd:rgba(245,158,11,.34);
  --aviso-ink:#FCD9A0;
  --sh-1:0 4px 24px -8px rgba(0,0,0,.6);
  --sh-2:0 20px 60px -20px rgba(0,0,0,.9);
  --tinte-tarjeta:26%;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);color:var(--ink);line-height:1.6;font-size:15.5px;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  background-image:
    radial-gradient(900px 560px at 82% -8%, var(--halo-1), transparent 60%),
    radial-gradient(760px 520px at 8% 104%, var(--halo-2), transparent 62%),
    radial-gradient(600px 400px at 50% 40%, var(--halo-3), transparent 70%);
  background-attachment:fixed;
  transition:background-color .25s ease, color .25s ease;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
::selection{background:var(--indigo);color:#fff}

.wrap{max-width:1220px;margin:0 auto;padding:0 24px}
.narrow{max-width:840px;margin:0 auto;padding:0 24px}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{letter-spacing:-.03em;line-height:1.1;font-weight:800}
h1{font-size:clamp(34px,5.2vw,56px)}
h2{font-size:clamp(27px,3.6vw,40px)}
h3{font-size:19px;letter-spacing:-.02em}
.lead{font-size:17.5px;color:var(--ink-2);font-weight:400;line-height:1.72}
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--violet-ink);margin-bottom:15px;
}
.kicker::before{content:'';width:7px;height:7px;border-radius:99px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:14.5px;font-weight:650;
  padding:11px 21px;border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;transition:.2s cubic-bezier(.4,0,.2,1);white-space:nowrap;
}
.btn-pri{
  background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;
  box-shadow:0 4px 18px -6px rgba(99,102,241,.8);
}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(99,102,241,1)}
.btn-sec{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-sec:hover{background:var(--surface-2);border-color:var(--indigo);color:var(--ink)}
.btn-lg{padding:14px 28px;font-size:15.5px}
.btn-blk{width:100%}

/* ---------- cabecera ---------- */
.top{
  position:sticky;top:0;z-index:70;
  background:var(--top-bg);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;gap:28px;height:72px}
.marca{display:flex;align-items:center;gap:12px;font-weight:850;font-size:17.5px;letter-spacing:-.035em}
.marca-ic{
  width:36px;height:36px;border-radius:11px;flex:none;
  background:linear-gradient(140deg,var(--cyan),var(--indigo) 55%,var(--violet));
  display:grid;place-items:center;color:#fff;font-size:16px;font-weight:900;
  box-shadow:0 0 22px -4px rgba(99,102,241,.9);
}
.marca small{display:block;font-size:9.5px;letter-spacing:.2em;color:var(--muted);font-weight:700;margin-top:-2px}
.menu{display:none;gap:3px;margin-left:10px}
.menu a{font-size:14px;font-weight:550;color:var(--muted);padding:8px 14px;border-radius:9px;transition:.18s}
.menu a:hover{background:var(--surface);color:var(--ink)}
.menu a.act{background:rgba(99,102,241,.16);color:var(--violet-ink);font-weight:700;box-shadow:inset 0 0 0 1px rgba(99,102,241,.32)}
.top-der{margin-left:auto;display:flex;align-items:center;gap:10px}
@media(min-width:1020px){ .menu{display:flex} }

.btn-carrito{position:relative}
.cuenta{
  position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 6px;
  border-radius:99px;background:var(--cyan);color:#04202a;
  font-size:11px;font-weight:850;display:grid;place-items:center;
  border:2px solid var(--bg);transition:.22s;box-shadow:0 0 14px -2px var(--cyan);
}
.cuenta.vacio{opacity:0;transform:scale(.5)}

.menu-movil{display:flex;gap:7px;overflow-x:auto;padding:11px 24px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.menu-movil::-webkit-scrollbar{display:none}
.menu-movil a{
  flex:none;font-size:13px;font-weight:650;color:var(--ink-2);
  padding:7px 15px;border-radius:99px;border:1px solid var(--line-2);background:var(--surface);
}
.menu-movil a.act{background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;border-color:transparent}
@media(min-width:1020px){ .menu-movil{display:none} }

/* ---------- portada ---------- */
.portada{position:relative;overflow:hidden;padding:80px 0 70px}
.portada::after{
  content:'';position:absolute;inset:0;z-index:0;opacity:.4;pointer-events:none;
  background-image:linear-gradient(var(--rejilla) 1px,transparent 1px),linear-gradient(90deg,var(--rejilla) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 70%);
}
.portada-in{position:relative;z-index:1;display:grid;gap:46px;align-items:center}
@media(min-width:1000px){ .portada-in{grid-template-columns:1.02fr .98fr;gap:58px} }

.sello{
  display:inline-flex;align-items:center;gap:10px;background:var(--glass);backdrop-filter:blur(10px);
  border:1px solid var(--line-2);border-radius:99px;padding:6px 16px 6px 7px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:24px;
}
.sello b{background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;border-radius:99px;padding:3px 11px;font-size:11px;font-weight:800}
.portada h1{margin-bottom:20px}
.portada h1 em{
  font-style:normal;
  background:var(--grad-txt);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.portada .lead{max-width:510px;margin-bottom:30px}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.avales{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13.5px;color:var(--muted)}
.avales span{display:flex;align-items:center;gap:8px}
.avales b{color:var(--ok);font-weight:800}

/* ---------- pantalla simulada ---------- */
.pantalla{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--sh-2), 0 0 0 1px rgba(99,102,241,.14), 0 0 70px -20px rgba(99,102,241,.5);
  overflow:hidden;
}
.pantalla-barra{
  height:42px;background:var(--bg-2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:7px;padding:0 16px;
}
.pt{width:9px;height:9px;border-radius:99px;background:var(--line-2)}
.pt:nth-child(1){background:var(--rose)} .pt:nth-child(2){background:var(--amber)} .pt:nth-child(3){background:var(--ok)}
.pantalla-tit{margin-left:12px;font-size:12px;font-weight:600;color:var(--muted);font-family:ui-monospace,monospace}
.pantalla-vivo{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;color:var(--ok);text-transform:uppercase;letter-spacing:.1em}
.pantalla-vivo i{width:7px;height:7px;border-radius:99px;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:latir 1.8s ease-in-out infinite}
@keyframes latir{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.75)}}
.pantalla-cuerpo{padding:18px}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:16px}
.cifra{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:13px 14px;position:relative;overflow:hidden}
.cifra::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--indigo)}
.cifra:nth-child(2)::before{background:var(--amber)}
.cifra:nth-child(3)::before{background:var(--cyan)}
.cifra-l{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cifra-v{font-size:21px;font-weight:850;letter-spacing:-.035em;margin-top:3px}
.cifra-d{font-size:11px;font-weight:750;color:var(--ok)}
.cifra-d.baja{color:var(--amber)}
.grafico{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:16px}
.grafico-t{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:13px}
.columnas{display:flex;align-items:flex-end;gap:8px;height:106px}
.col{
  flex:1;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--cyan),var(--indigo));
  box-shadow:0 0 18px -6px rgba(99,102,241,.9);
  animation:crecer .9s cubic-bezier(.2,.9,.3,1) backwards;
}
.col.tenue{background:var(--surface-2);box-shadow:none}
@keyframes crecer{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1)}}
.ejes{display:flex;justify-content:space-between;margin-top:11px;font-size:10px;font-weight:700;color:var(--muted)}

/* ---------- franja de cifras ---------- */
.franja{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.franja-in{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){ .franja-in{grid-template-columns:repeat(4,1fr)} }
.franja-c{padding:30px 20px;text-align:center;border-right:1px solid var(--line)}
.franja-c:last-child{border-right:0}
@media(max-width:759px){ .franja-c:nth-child(2n){border-right:0} .franja-c:nth-child(-n+2){border-bottom:1px solid var(--line)} }
.franja-n{
  font-size:33px;font-weight:850;letter-spacing:-.045em;
  background:var(--grad-txt);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.franja-l{font-size:12.5px;color:var(--muted);margin-top:3px}

/* ---------- secciones ---------- */
.seccion{padding:78px 0}
.seccion.suave{background:var(--bg-2)}
.seccion-h{max-width:640px;margin-bottom:46px}
.seccion-h.centro{margin-left:auto;margin-right:auto;text-align:center}
.seccion-h.centro .kicker{justify-content:center}
.seccion-h p{color:var(--ink-2);font-size:16.5px;margin-top:14px}

/* ---------- accesos: rejilla bento ---------- */
.accesos{display:grid;gap:16px}
@media(min-width:700px){ .accesos{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1040px){
  .accesos{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(210px,auto)}
  .accesos > :nth-child(1){grid-column:span 4}
  .accesos > :nth-child(2){grid-column:span 2}
  .accesos > :nth-child(3){grid-column:span 2}
  .accesos > :nth-child(4){grid-column:span 4}
}
.acceso{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px 24px;overflow:hidden;display:flex;flex-direction:column;
  transition:.25s cubic-bezier(.4,0,.2,1);
}
.acceso::before{
  content:'';position:absolute;inset:0;border-radius:var(--r);padding:1px;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:.3s;pointer-events:none;
}
.acceso::after{
  content:'';position:absolute;width:220px;height:220px;right:-70px;top:-70px;border-radius:99px;
  background:radial-gradient(circle, rgba(99,102,241,.32), transparent 66%);
  opacity:0;transition:.35s;pointer-events:none;
}
.acceso:hover{transform:translateY(-4px);background:var(--surface-2);box-shadow:var(--sh-2)}
.acceso:hover::before{opacity:1}
.acceso:hover::after{opacity:1}
.acceso-ic{
  width:48px;height:48px;border-radius:13px;
  background:linear-gradient(140deg,rgba(34,211,238,.2),rgba(167,139,250,.2));
  border:1px solid var(--line-2);
  display:grid;place-items:center;font-size:23px;margin-bottom:16px;transition:.25s;position:relative;
}
.acceso:hover .acceso-ic{transform:scale(1.08) rotate(-5deg);box-shadow:0 0 24px -6px rgba(99,102,241,.9)}
.acceso h3{margin-bottom:8px;position:relative}
.acceso p{font-size:14px;color:var(--muted);margin-bottom:16px;flex:1;position:relative}
.acceso-ir{font-size:13.5px;font-weight:750;color:var(--violet-ink);display:flex;align-items:center;gap:7px;position:relative;transition:.25s}
.acceso:hover .acceso-ir{gap:12px;color:var(--enlace)}

/* ---------- pasos ---------- */
.pasos{display:grid;gap:18px}
@media(min-width:860px){ .pasos{grid-template-columns:repeat(3,1fr)} }
.paso{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 26px 28px;position:relative;transition:.25s;overflow:hidden;
}
.paso::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));opacity:.5;
}
.paso:hover{transform:translateY(-3px);background:var(--surface-2);box-shadow:var(--sh-1)}
.paso-n{
  position:absolute;top:20px;right:24px;width:34px;height:34px;border-radius:11px;
  background:rgba(99,102,241,.18);border:1px solid rgba(99,102,241,.4);color:var(--violet-ink);
  display:grid;place-items:center;font-size:14px;font-weight:850;
}
.paso-ic{font-size:32px;display:block;margin-bottom:16px}
.paso h3{margin-bottom:10px}
.paso p{font-size:14.5px;color:var(--ink-2)}

/* ---------- listas de detalle ---------- */
.detalle{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.detalle-f{display:grid;gap:9px;padding:26px;border-bottom:1px solid var(--line);transition:.2s}
@media(min-width:760px){ .detalle-f{grid-template-columns:250px 1fr;gap:34px;align-items:start} }
.detalle-f:last-child{border-bottom:0}
.detalle-f:hover{background:var(--surface-2)}
.detalle-f h4{font-size:16px;font-weight:750;display:flex;align-items:center;gap:10px;color:var(--violet-ink)}
.detalle-f p{font-size:14.5px;color:var(--ink-2)}

/* ---------- catálogo ---------- */
.catalogo-barra{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:24px}
.buscador{position:relative;flex:1;min-width:230px;max-width:400px}
.buscador input{
  width:100%;padding:12px 15px 12px 42px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-family:inherit;font-size:14.5px;background:var(--surface);color:var(--ink);transition:.2s;
}
.buscador input::placeholder{color:var(--muted)}
.buscador input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(99,102,241,.22)}
.buscador::before{content:'🔍';position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.6}
.n-resultados{font-size:13.5px;color:var(--muted);font-weight:600}

.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.pill{
  display:inline-flex;align-items:center;gap:9px;font-family:inherit;
  background:var(--surface);border:1px solid var(--line-2);border-radius:99px;
  padding:8px 9px 8px 17px;font-size:13.5px;font-weight:650;color:var(--ink-2);
  cursor:pointer;transition:.18s;
}
.pill:hover{border-color:var(--indigo);color:var(--ink)}
.pill.on{background:linear-gradient(135deg,var(--indigo),var(--violet));border-color:transparent;color:#fff;box-shadow:0 4px 18px -6px rgba(99,102,241,.9)}
.pill-n{background:var(--chip-bg);border-radius:99px;padding:1px 8px;font-size:11px;font-weight:800;color:var(--muted)}
.pill.on .pill-n{background:rgba(255,255,255,.25);color:#fff}

.grid{display:grid;gap:18px}
@media(min-width:640px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1020px){ .grid{grid-template-columns:repeat(3,1fr)} }
.sin-resultados{grid-column:1/-1;text-align:center;padding:58px 20px;color:var(--muted)}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:.26s cubic-bezier(.4,0,.2,1);position:relative;
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:var(--r);padding:1px;z-index:2;pointer-events:none;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.3s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);background:var(--surface-2)}
.card:hover::before{opacity:1}
.card-vis{
  height:164px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:var(--surface-2);
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--c1) var(--tinte-tarjeta), var(--surface)),
    color-mix(in srgb, var(--c2) calc(var(--tinte-tarjeta) / 2), var(--surface)));
}
.card-img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;transition:transform .4s cubic-bezier(0.16, 1, 0.3, 1), filter .4s ease;
  filter:brightness(0.92) contrast(1.05);
}
.card:hover .card-img{
  transform:scale(1.06);filter:brightness(1.02) contrast(1.08);
}
.card-ico{
  position:absolute;bottom:12px;left:14px;font-size:18px;width:34px;height:34px;
  border-radius:9px;background:rgba(10,10,17,0.78);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.14);display:grid;place-items:center;z-index:2;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.card-sku{
  position:absolute;top:12px;right:14px;background:rgba(10,10,17,0.78);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.14);border-radius:6px;padding:3px 9px;font-size:10px;
  font-weight:800;letter-spacing:.06em;color:var(--ink);font-family:ui-monospace,monospace;z-index:2;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.mini{display:none}
.card-b{padding:19px;display:flex;flex-direction:column;flex:1}
.card-cat{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--enlace);margin-bottom:9px}
.card h3{font-size:16.5px;margin-bottom:9px}
.card p{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.card-t{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:17px;flex:1;align-content:flex-start}
.card-t li{font-size:11px;font-weight:650;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:3px 9px;color:var(--ink-2)}
.card-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.card-pr{font-size:26px;font-weight:850;letter-spacing:-.045em}
.card-pr sup{font-size:14px;vertical-align:super;color:var(--muted);font-weight:700}

/* ---------- pagos ---------- */
.pago-grid{display:grid;gap:26px;align-items:start}
@media(min-width:960px){ .pago-grid{grid-template-columns:1fr 400px;gap:34px} }

.pedido{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;position:sticky;top:94px;box-shadow:var(--sh-1)}
.pedido-h{padding:19px 22px;border-bottom:1px solid var(--line);background:var(--bg-2);display:flex;justify-content:space-between;align-items:center}
.pedido-h h3{font-size:16px}
.pedido-b{padding:8px 22px;max-height:290px;overflow-y:auto}
.linea{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.linea:last-child{border-bottom:0}
.linea-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;flex:none;border:1px solid var(--line)}
.linea-ic{background:linear-gradient(150deg,
  color-mix(in srgb, var(--c1) var(--tinte-tarjeta), var(--surface)),
  color-mix(in srgb, var(--c2) calc(var(--tinte-tarjeta) / 2), var(--surface)))}
.linea-n{flex:1;min-width:0;font-size:14px;font-weight:650;line-height:1.3}
.linea-n small{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:2px;font-family:ui-monospace,monospace}
.linea-p{font-weight:800;font-size:14.5px}
.linea-x{background:none;border:0;color:var(--muted);font-size:19px;cursor:pointer;line-height:1;padding:2px 5px;border-radius:6px}
.linea-x:hover{background:rgba(239,68,68,.14);color:var(--rose)}
.pedido-vacio{text-align:center;padding:42px 16px}
.pedido-vacio span{font-size:36px;opacity:.3;display:block;margin-bottom:10px}
.pedido-vacio p{font-size:14px;color:var(--muted);margin-bottom:16px}
.pedido-f{padding:19px 22px;border-top:1px solid var(--line);background:var(--bg-2)}
.pf-l{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-2);margin-bottom:9px}
.pf-l.total{font-size:22px;font-weight:850;color:var(--ink);padding-top:14px;border-top:1px solid var(--line-2);margin-top:14px;letter-spacing:-.04em}
.pf-l.total b{background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-bs{font-size:12.5px;color:var(--muted);text-align:right;margin-top:6px}

.metodos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.metodo{
  font-family:inherit;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  padding:18px 16px;cursor:pointer;text-align:left;transition:.2s;color:var(--ink);position:relative;overflow:hidden;
}
.metodo:hover{border-color:var(--indigo);background:var(--surface-2)}
.metodo.on{border-color:var(--indigo);background:rgba(99,102,241,.14);box-shadow:0 0 0 3px rgba(99,102,241,.16)}
.metodo-t{font-size:15px;font-weight:750;display:flex;align-items:center;gap:10px;margin-bottom:4px}
.metodo-s{font-size:12.5px;color:var(--muted)}
.metodo-logo{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:14px;flex:none}
.metodo-logo.pm{background:rgba(99,102,241,.22);color:var(--violet-ink)}
.metodo-logo.bn{background:#f0b90b;color:#1e2026;font-weight:900}

.panel{display:none;animation:aparecer .32s ease}
.panel.on{display:block}
@keyframes aparecer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.datos{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;margin-bottom:22px}
.datos-h{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px;font-weight:750;font-size:15px}
.datos-h.pm{background:linear-gradient(100deg,rgba(99,102,241,.24),rgba(167,139,250,.14))}
.datos-h.bn{background:linear-gradient(100deg,#1e2026,#2b3139);color:#fff}
.datos-h.bn b{color:#f0b90b}
.dato{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.dato:last-child{border-bottom:0}
.dato-l{font-size:12.5px;color:var(--muted);width:96px;flex:none;font-weight:600}
.dato-v{flex:1;font-size:15px;font-weight:750;font-family:ui-monospace,'SF Mono',monospace;letter-spacing:.02em;word-break:break-all}
.copiar{
  font-family:inherit;background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;
  padding:5px 12px;font-size:12px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:.18s;flex:none;
}
.copiar:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}
.copiar.copiado{background:var(--ok);border-color:var(--ok);color:#04211A}

.aviso{
  display:flex;gap:12px;background:var(--aviso-bg);border:1px solid var(--aviso-bd);
  border-radius:var(--r-sm);padding:15px 17px;font-size:13.5px;color:var(--aviso-ink);margin-bottom:22px;
}
.aviso b{font-weight:800;color:var(--ink)}

.instrucciones{list-style:none;counter-reset:paso;margin-bottom:24px}
.instrucciones li{counter-increment:paso;position:relative;padding:0 0 19px 44px;font-size:14.5px;color:var(--ink-2)}
.instrucciones li::before{
  content:counter(paso);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:99px;
  background:rgba(99,102,241,.18);border:1px solid rgba(99,102,241,.4);color:var(--violet-ink);
  display:grid;place-items:center;font-size:12.5px;font-weight:850;
}
.instrucciones li::after{content:'';position:absolute;left:13.5px;top:30px;bottom:4px;width:1.5px;background:var(--line-2)}
.instrucciones li:last-child{padding-bottom:0}
.instrucciones li:last-child::after{display:none}
.instrucciones b{color:var(--ink);font-weight:750}

/* ---------- formularios ---------- */
.campo{margin-bottom:17px}
.campo label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}
.campo label span{color:var(--muted);font-weight:500}
.campo input,.campo select,.campo textarea{
  width:100%;padding:12px 15px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-family:inherit;font-size:14.5px;background:var(--bg-2);color:var(--ink);transition:.2s;
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--muted)}
.campo textarea{min-height:118px;resize:vertical;line-height:1.65}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(99,102,241,.22)}
.campo select option{background:var(--surface);color:var(--ink)}
.campo-2{display:grid;gap:0 16px}
@media(min-width:620px){ .campo-2{grid-template-columns:1fr 1fr} }
.pista{font-size:12.5px;color:var(--muted);margin-top:7px}

.opciones{display:grid;gap:14px;margin-bottom:20px}
@media(min-width:700px){ .opciones{grid-template-columns:repeat(3,1fr)} }
.opcion{border:1px solid var(--line-2);border-radius:var(--r);padding:20px 18px;cursor:pointer;background:var(--surface);transition:.2s;display:block;position:relative}
.opcion:hover{border-color:var(--indigo);background:var(--surface-2)}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion:has(input:checked){border-color:var(--indigo);background:rgba(99,102,241,.14);box-shadow:0 0 0 3px rgba(99,102,241,.16)}
.opcion-ic{font-size:26px;display:block;margin-bottom:12px}
.opcion h4{font-size:15.5px;font-weight:750;margin-bottom:6px}
.opcion p{font-size:13px;color:var(--muted);margin-bottom:12px}
.opcion-pr{font-size:20px;font-weight:850;letter-spacing:-.035em;background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
.opcion-pr small{font-size:12px;color:var(--muted);font-weight:600;-webkit-text-fill-color:var(--muted)}

/* ---------- tabla ---------- */
.tabla{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.tabla th{background:var(--bg-2);padding:14px 18px;text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.tabla td{padding:15px 18px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top;color:var(--ink-2)}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--surface-2)}
.tabla td b{color:var(--ink)}
.tabla .pr{font-weight:850;color:var(--enlace);white-space:nowrap}
.tabla-scroll{overflow-x:auto;border-radius:var(--r)}

/* ---------- preguntas ---------- */
.faq{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:19px 22px;cursor:pointer;font-weight:700;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:.18s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--surface-2)}
.faq summary::after{content:'+';font-size:23px;font-weight:300;color:var(--violet-ink);flex:none;transition:.24s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{background:rgba(99,102,241,.14);color:var(--violet-ink)}
.faq-r{padding:4px 22px 21px;font-size:14.5px;color:var(--ink-2)}
.faq-r a{color:var(--enlace) !important}

/* ---------- llamada final ---------- */
.cierre{
  background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(167,139,250,.14));
  border:1px solid var(--line-2);border-radius:var(--r);padding:52px 40px;text-align:center;
  position:relative;overflow:hidden;
}
.cierre::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(600px 320px at 50% -20%, rgba(34,211,238,.2), transparent 62%);
}
.cierre > *{position:relative}
.cierre h2{margin-bottom:13px}
.cierre p{font-size:16.5px;color:var(--ink-2);max-width:540px;margin:0 auto 28px}

/* ---------- pie ---------- */
.pie{background:var(--bg-2);border-top:1px solid var(--line);padding:46px 0 30px}
.pie-in{display:grid;gap:28px;margin-bottom:28px}
@media(min-width:760px){ .pie-in{grid-template-columns:1.4fr 1fr 1fr} }
.pie h4{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.pie ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.pie a,.pie li{font-size:14px;color:var(--ink-2)}
.pie a:hover{color:var(--violet-ink)}
.pie-txt{font-size:14px;color:var(--muted);max-width:310px;margin-top:13px}
.pie-fin{border-top:1px solid var(--line);padding-top:21px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px;color:var(--muted)}

/* ---------- panel lateral ---------- */
.sl-scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:.3s;z-index:95}
.sl-scrim.on{opacity:1;pointer-events:auto}
.sl-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--bg-2);
  border-left:1px solid var(--line-2);z-index:100;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .36s cubic-bezier(.22,1,.36,1);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,1);
}
.sl-drawer.on{transform:none}
.sl-dr-h{padding:21px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:var(--surface)}
.sl-dr-h h3{font-size:18px}
.sl-x{background:var(--surface-2);border:1px solid var(--line-2);border-radius:9px;width:33px;height:33px;font-size:19px;color:var(--ink-2);cursor:pointer;line-height:1}
.sl-x:hover{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.sl-dr-b{flex:1;overflow-y:auto;padding:8px 24px}
.sl-item{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center}
.sl-item-ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font-size:21px;flex:none;border:1px solid var(--line)}
.sl-item-ic{background:linear-gradient(150deg,
  color-mix(in srgb, var(--c1) var(--tinte-tarjeta), var(--surface)),
  color-mix(in srgb, var(--c2) calc(var(--tinte-tarjeta) / 2), var(--surface)))}
.sl-item-m{flex:1;min-width:0}
.sl-item-m h4{font-size:14.5px;font-weight:700;line-height:1.3}
.sl-item-m span{font-size:12px;color:var(--muted);font-family:ui-monospace,monospace}
.sl-quitar{display:block;background:none;border:0;color:var(--muted);font-size:12.5px;font-weight:650;cursor:pointer;padding:0;margin-top:5px;text-decoration:underline;text-underline-offset:3px;font-family:inherit}
.sl-quitar:hover{color:var(--rose)}
.sl-item-p{font-weight:850;font-size:15px}
.sl-vacio{text-align:center;padding:58px 18px}
.sl-vacio span{font-size:42px;opacity:.28;display:block;margin-bottom:14px}
.sl-vacio p{font-size:14.5px;color:var(--muted);margin-bottom:18px}
.sl-dr-f{border-top:1px solid var(--line);padding:21px 24px;background:var(--surface)}
.sl-row{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-2);margin-bottom:9px}
.sl-ok{color:var(--ok);font-weight:700}
.sl-tot{font-size:22px;font-weight:850;color:var(--ink);padding-top:14px;border-top:1px solid var(--line-2);margin-top:14px;letter-spacing:-.04em}
.sl-tot b{background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
.sl-cta{
  display:block;text-align:center;margin-top:17px;
  background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;
  padding:14px;border-radius:var(--r-sm);font-weight:700;font-size:15px;transition:.2s;
  box-shadow:0 4px 20px -6px rgba(99,102,241,.9);
}
.sl-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(99,102,241,1)}

/* ---------- efectos ---------- */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1)}
[data-reveal].visto{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  [data-reveal]{opacity:1;transform:none}
}


/* ---------------------------------------------------------------------------
   En pantallas estrechas el boton de descarga no cabe junto al carrito y
   empujaba la pagina hacia la derecha. Se retira de la cabecera: la misma
   accion vuelve a aparecer dentro de la pagina y en el menu desplegable.
   --------------------------------------------------------------------------- */
@media (max-width: 860px){
  .top .btn-pri{ display:none }
}

/* ===========================================================================
   PAGO EN TRES PASOS
   Los datos de cobro no se ensenan hasta que la persona ha dejado los suyos.
   Cada paso sustituye al anterior dentro de la misma pagina.
   =========================================================================== */

/* ---- indicador de pasos ---- */
.pasos-barra{
  list-style:none; display:flex; align-items:center; gap:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:6px; margin-bottom:26px; overflow-x:auto;
}
.pasos-barra::-webkit-scrollbar{ display:none }
.pb-item{
  flex:1; min-width:132px; display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:12px; transition:.28s; color:var(--muted);
  font-size:13.5px; font-weight:650; white-space:nowrap;
}
.pb-n{
  width:26px; height:26px; border-radius:99px; flex:none;
  background:var(--bg-2); border:1px solid var(--line-2); color:var(--muted);
  display:grid; place-items:center; font-size:12.5px; font-weight:850; transition:.28s;
}
.pb-item.on{ background:rgba(99,102,241,.14); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(99,102,241,.3) }
.pb-item.on .pb-n{ background:linear-gradient(135deg,var(--indigo),var(--violet)); border-color:transparent; color:#fff; box-shadow:0 0 16px -3px rgba(99,102,241,.9) }
.pb-item.hecho{ color:var(--ink-2) }
.pb-item.hecho .pb-n{ background:rgba(16,185,129,.16); border-color:rgba(16,185,129,.48); color:var(--ok); font-size:13px }
.pb-item.hecho .pb-n .n-txt{ display:none }
.pb-item.hecho .pb-n::before{ content:'✓' }

/* ---- cajas de paso ---- */
.paso-caja{ display:none }
.paso-caja.activa{ display:block; animation:pasoEntra .38s cubic-bezier(.22,1,.36,1) }
@keyframes pasoEntra{ from{opacity:0; transform:translateY(16px) scale(.99)} to{opacity:1; transform:none} }
.paso-cab{ margin-bottom:24px }
.paso-cab h3{ font-size:23px; margin-bottom:8px }
.paso-cab p{ font-size:15px; color:var(--ink-2) }
.paso-cab b{ color:var(--ink) }
.volver{
  background:none; border:0; color:var(--muted); font-family:inherit; font-size:13px;
  font-weight:650; cursor:pointer; padding:0; margin-bottom:14px; transition:.18s;
}
.volver:hover{ color:var(--violet-ink) }

/* ---- paso 1: las dos tarjetas ---- */
.opciones-pago{ display:grid; gap:18px }
@media(min-width:820px){ .opciones-pago{ grid-template-columns:1fr 1fr } }
.op-pago{
  font-family:inherit; text-align:left; cursor:pointer; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  padding:26px 24px 22px; display:flex; flex-direction:column; gap:18px;
  transition:.26s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden;
}
.op-pago::before{
  content:''; position:absolute; inset:0; border-radius:var(--r); padding:1px; pointer-events:none;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:.3s;
}
.op-pago.bn::before{ background:linear-gradient(135deg,#f0b90b,#f8d33a) }
.op-pago:hover{ transform:translateY(-4px); background:var(--surface-2); box-shadow:var(--sh-2) }
.op-pago:hover::before{ opacity:1 }
.op-pago:disabled{ opacity:.42; cursor:not-allowed; transform:none; box-shadow:none }
.op-pago:disabled::before{ opacity:0 }
.op-cab{ display:flex; align-items:center; gap:14px }
.op-logo{
  width:52px; height:52px; border-radius:14px; flex:none;
  display:grid; place-items:center; font-size:24px;
}
.op-logo.pm{ background:linear-gradient(140deg,rgba(99,102,241,.25),rgba(167,139,250,.18)); border:1px solid var(--line-2) }
.op-logo.bn{ background:#f0b90b; color:#1e2026; font-weight:900 }
.op-cab h4{ font-size:19px; font-weight:800; letter-spacing:-.02em }
.op-sub{ font-size:13px; color:var(--muted); font-weight:500 }
.op-lista{ list-style:none; display:flex; flex-direction:column; gap:9px; flex:1 }
.op-lista li{ font-size:13.5px; color:var(--ink-2); padding-left:20px; position:relative; line-height:1.6 }
.op-lista li::before{ content:'▸'; position:absolute; left:0; color:var(--enlace); font-weight:700 }
.op-pago.bn .op-lista li::before{ color:#f0b90b }
.op-lista b{ color:var(--ink); font-weight:700 }
.op-pie{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid var(--line) }
.op-tiempo{
  font-size:11.5px; font-weight:750; color:var(--ok);
  background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.34);
  border-radius:99px; padding:4px 11px;
}
.op-ir{ font-size:13.5px; font-weight:750; color:var(--violet-ink); display:flex; align-items:center; gap:7px; transition:.26s }
.op-pago:hover .op-ir{ gap:12px }
.op-pago.bn .op-ir{ color:#f0b90b }

/* ---- paso 2 ---- */
.elegido{
  display:flex; align-items:center; gap:12px; margin-bottom:24px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:13px 16px; font-size:14px; color:var(--ink-2);
}
.elegido .eg-ic{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:15px; flex:none }
.elegido .eg-ic.pm{ background:rgba(99,102,241,.22); color:var(--violet-ink) }
.elegido .eg-ic.bn{ background:#f0b90b; color:#1e2026; font-weight:900 }
.elegido b{ color:var(--ink); font-weight:750 }
.elegido .eg-cambiar{
  margin-left:auto; background:none; border:0; color:var(--muted); font-family:inherit;
  font-size:12.5px; font-weight:650; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.elegido .eg-cambiar:hover{ color:var(--violet-ink) }

.siguiente-info{
  background:var(--bg-2); border:1px solid var(--line); border-left:2px solid var(--indigo);
  border-radius:var(--r-sm); padding:18px 20px 6px; margin:24px 0;
}
.siguiente-info h4{
  font-size:11.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--violet-ink); margin-bottom:14px;
}
.instrucciones.compacta li{ padding-bottom:14px; font-size:14px }
.instrucciones.compacta li::before{ width:24px; height:24px; font-size:11.5px }
.instrucciones.compacta li::after{ left:11.5px; top:26px }

/* ---- paso 3: los datos, ya revelados ---- */
.revelado{ display:none }
.revelado.activo{ display:block; animation:revelarDatos .5s cubic-bezier(.22,1,.36,1) }
@keyframes revelarDatos{
  from{ opacity:0; transform:translateY(18px); filter:blur(7px) }
  to{ opacity:1; transform:none; filter:none }
}
.dato.destacado{ background:rgba(99,102,241,.13) }
.dato.destacado .dato-v{ color:var(--enlace); font-size:17px }
.dato.destacado.bn{ background:rgba(240,185,11,.11) }
.dato.destacado.bn .dato-v{ color:#f0b90b }
.dato-v.grande{ font-size:19px; letter-spacing:.07em }
.bn-marca{ color:#f0b90b; font-size:19px }
.aviso.bn{ background:#1e2026; border-color:#2b3139; color:#eaecef }
.aviso.bn b{ color:#f0b90b }

/* ---- errores de formulario ---- */
.error{ font-size:12.5px; color:var(--rose); margin-top:6px; display:none; font-weight:600 }
.error.on{ display:block }
.campo input.malo, .campo select.malo{ border-color:var(--rose); box-shadow:0 0 0 3px rgba(239,68,68,.18) }

/* ---- ventana de confirmacion ---- */
.modal-conf{
  position:fixed; inset:0; z-index:120; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:var(--scrim-2); backdrop-filter:blur(6px);
}
.modal-conf.on{ display:flex; animation:fondoEntra .25s ease }
@keyframes fondoEntra{ from{opacity:0} to{opacity:1} }
.mc-caja{
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r);
  width:min(520px,100%); max-height:92vh; overflow-y:auto;
  box-shadow:0 40px 100px -30px rgba(0,0,0,1), 0 0 0 1px rgba(99,102,241,.2);
  animation:cajaEntra .34s cubic-bezier(.22,1,.36,1);
}
@keyframes cajaEntra{ from{opacity:0; transform:translateY(26px) scale(.97)} to{opacity:1; transform:none} }
.mc-h{
  padding:20px 24px; border-bottom:1px solid var(--line); background:var(--surface);
  display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:2;
}
.mc-h h3{ font-size:19px }
.mc-b{ padding:24px }
.mc-intro{ font-size:14.5px; color:var(--ink-2); margin-bottom:22px }
.mc-intro b{ color:var(--ink) }
.mc-resumen{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:15px 18px; margin:22px 0;
}
.mc-l{ display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:14.5px; color:var(--ink-2) }
.mc-l b{ font-size:19px; font-weight:850; letter-spacing:-.03em;
  background:var(--grad-txt);
  -webkit-background-clip:text; background-clip:text; color:transparent }
.mc-l.chico{ margin-top:8px; padding-top:9px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted) }

/* ---- pantalla de listo ---- */
.mc-exito{ display:none; text-align:center }
.mc-exito.on{ display:block; animation:pasoEntra .4s cubic-bezier(.22,1,.36,1) }
.exito-ic{
  width:64px; height:64px; border-radius:99px; margin:8px auto 20px;
  background:rgba(16,185,129,.14); border:1px solid rgba(16,185,129,.48); color:var(--ok);
  display:grid; place-items:center; font-size:30px; font-weight:800;
  box-shadow:0 0 34px -8px rgba(16,185,129,.7);
}
.mc-exito h3{ font-size:23px; margin-bottom:11px }
.mc-exito > p{ font-size:15px; color:var(--ink-2); margin-bottom:22px }
.exito-ficha{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:16px 18px; margin-bottom:20px; text-align:left;
}
.exito-ficha .mc-l{ padding:6px 0; font-size:13.5px }
.exito-ficha .mc-l b{
  font-size:14px; font-weight:750; font-family:ui-monospace,monospace; letter-spacing:.02em;
  background:none; -webkit-text-fill-color:var(--ink); color:var(--ink);
}
.mc-exito .pista{ margin-bottom:18px }

/* ---- movil ---- */
@media (max-width:640px){
  .pb-item{ min-width:auto; padding:10px 11px; font-size:12.5px; gap:8px }
  .pb-t{ display:none }
  .pb-item.on .pb-t{ display:inline }
  .op-pago{ padding:22px 20px 18px }
}

/* ===========================================================================
   ADJUNTAR LA CAPTURA DEL PAGO
   Funciona igual en telefono y en ordenador. En el movil el sistema ofrece
   camara o galeria; en el escritorio se puede arrastrar el archivo encima.
   =========================================================================== */

.soltar{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; text-align:center; cursor:pointer;
  padding:26px 20px; border-radius:var(--r-sm);
  border:1.5px dashed var(--line-2); background:var(--bg-2);
  transition:.22s cubic-bezier(.4,0,.2,1);
}
.soltar:hover{ border-color:var(--indigo); background:rgba(99,102,241,.08) }
.soltar.encima{
  border-color:var(--cyan); background:rgba(34,211,238,.12);
  box-shadow:0 0 0 3px rgba(34,211,238,.16); transform:scale(1.01);
}
.soltar.oculta{ display:none }
.soltar-ic{ font-size:27px; line-height:1; margin-bottom:3px }
.soltar-t{ font-size:14.5px; color:var(--ink-2) }
.soltar-t b{ color:var(--ink); font-weight:750 }
.soltar-s{ font-size:12.5px; color:var(--muted) }
.soltar-f{ font-size:11.5px; color:var(--muted); opacity:.7; margin-top:4px }

/* ---- el archivo ya elegido ---- */
.adjunto{
  display:none; align-items:center; gap:14px;
  padding:12px 14px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--surface);
}
.adjunto.on{ display:flex; animation:adjEntra .3s cubic-bezier(.22,1,.36,1) }
@keyframes adjEntra{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.adj-vista{
  width:62px; height:62px; border-radius:9px; flex:none; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line);
  display:grid; place-items:center; font-size:24px; color:var(--muted);
}
.adj-vista img{ width:100%; height:100%; object-fit:cover; display:block }
.adj-info{ flex:1; min-width:0 }
.adj-info b{
  display:block; font-size:14px; font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.adj-info span{ font-size:12.5px; color:var(--muted) }
.adj-info span .aligerado{ color:var(--ok); font-weight:700 }
.adj-quitar{
  flex:none; width:30px; height:30px; border-radius:8px; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line-2); color:var(--muted);
  font-size:19px; line-height:1; transition:.18s;
}
.adj-quitar:hover{ background:rgba(239,68,68,.14); border-color:var(--rose); color:var(--rose) }

/* mientras comprime */
.soltar.trabajando{ pointer-events:none; opacity:.7 }
.soltar.trabajando .soltar-ic{ animation:pulso 1s ease-in-out infinite }
@keyframes pulso{ 0%,100%{opacity:1} 50%{opacity:.35} }


/* ===========================================================================
   NAVEGACION DENTRO DE LA MISMA PAGINA
   Cada seccion es una vista. Sin esto las cinco se pintan a la vez, apiladas.
   =========================================================================== */
.vista{ display:none }
.vista.activa{ display:block; animation:entrar .34s cubic-bezier(.22,1,.36,1) }
@keyframes entrar{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .vista.activa{ animation:none } }


/* ===========================================================================
   NADA DE BARRA HORIZONTAL
   Se arregla el ancho de cada pieza, no se tapa con overflow en la raiz:
   probado, `overflow-x` en <html> deja la pagina en blanco al bajar en Chrome
   y ademas rompe la cabecera pegajosa. El unico que se recorta es el bloque
   que de verdad puede sobresalir, la cinta de la portada, y ya lo hace.
   =========================================================================== */
.wrap,.narrow{ width:100%; }
.portada{ max-width:100vw }


/* ===========================================================================
   BOTON DE TEMA Y MENU DE MOVIL
   =========================================================================== */
.btn-icono{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line-2); border-radius:11px;
  color:var(--ink); font-size:17px; cursor:pointer; transition:.2s; font-family:inherit;
}
.btn-icono:hover{ border-color:var(--indigo); background:var(--surface-2) }
.btn-icono:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px }
.tema-sol{ display:none }
.tema-luna{ display:block }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .tema-sol{ display:block }
  :root:not([data-tema="claro"]) .tema-luna{ display:none }
}
:root[data-tema="oscuro"] .tema-sol{ display:block }
:root[data-tema="oscuro"] .tema-luna{ display:none }
:root[data-tema="claro"] .tema-sol{ display:none }
:root[data-tema="claro"] .tema-luna{ display:block }

.btn-menu{ display:grid }
@media(min-width:1020px){ .btn-menu{ display:none } }

/* el desplegable */
.menu-movil{
  display:block; position:absolute; left:0; right:0; top:100%; z-index:69;
  background:var(--surface); border-bottom:1px solid var(--line-2);
  box-shadow:var(--sh-2); padding:10px 16px 16px; overflow:hidden;
  max-height:0; opacity:0; pointer-events:none; visibility:hidden;
  transition:max-height .3s cubic-bezier(.22,1,.36,1), opacity .22s ease, visibility .3s;
}
.menu-movil.abierto{ max-height:min(78vh,600px); opacity:1; pointer-events:auto; visibility:visible; overflow-y:auto }
.menu-movil a{
  display:block; width:100%; flex:none; font-size:15.5px; font-weight:650; color:var(--ink-2);
  padding:13px 14px; border-radius:11px; border:0; background:none;
  border-bottom:1px solid var(--line);
}
.menu-movil a:last-child{ border-bottom:0 }
.menu-movil a.act{ background:rgba(99,102,241,.14); color:var(--violet-ink); border-bottom-color:transparent }
@media(min-width:1020px){ .menu-movil{ display:none } }


/* ===========================================================================
   LA CINTA DE VISTAS PREVIAS DE LA PORTADA (FANTASMA MULTI-FOTOS)
   =========================================================================== */
.cinta{
  position: relative;
  overflow: hidden;
  padding: 18px 0 24px;
  margin-top: 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.cinta-pista{
  display: flex;
  gap: 18px;
  width: max-content;
  animation: deslizar 60s linear infinite;
}
.cinta:hover .cinta-pista,
.cinta:focus-within .cinta-pista{ animation-play-state: paused }
@keyframes deslizar{
  from{ transform: translate3d(0, 0, 0) }
  to{ transform: translate3d(-50%, 0, 0) }
}
@media (prefers-reduced-motion: reduce){
  .cinta-pista{ animation: none; transform: none }
}

.mini-p{
  flex: none;
  width: 270px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-2);
  opacity: 0.58;
  filter: saturate(0.75) brightness(0.88);
  transition: opacity .35s ease, transform .35s cubic-bezier(0.16, 1, 0.3, 1), filter .35s ease, box-shadow .35s ease, border-color .35s;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}
.mini-p:hover{
  opacity: 1;
  filter: none;
  transform: translateY(-8px) scale(1.03);
  border-color: var(--indigo);
  box-shadow: 0 22px 45px rgba(0,0,0,0.7), 0 0 24px color-mix(in srgb, var(--c1) 40%, transparent);
  z-index: 5;
}
.mini-img-wrap{
  position: relative;
  height: 148px;
  overflow: hidden;
  background: #080811;
}
.mini-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .4s ease;
}
.mini-p:hover .mini-img{
  transform: scale(1.05);
}
.mini-fantasma-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 18, 0.82) 100%);
  pointer-events: none;
}
.mini-sku{
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(10, 10, 18, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
}
.mini-pie{
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.mini-ic{
  font-size: 18px;
  line-height: 1;
  flex: none;
}
.mini-textos{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mini-tit{
  font-size: 12.5px;
  font-weight: 750;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-sub{
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.mini-pr{
  color: #10B981;
  font-weight: 800;
}
.mini-ver{
  font-size: 11px;
  font-weight: 750;
  color: var(--violet-ink);
  opacity: 0;
  transform: translateX(-4px);
  transition: all .25s ease;
  white-space: nowrap;
}
.mini-p:hover .mini-ver{
  opacity: 1;
  transform: translateX(0);
}

/* ===========================================================================
   SECCIÓN DESTACADA: IDEAS DE LA COMUNIDAD EN PORTADA
   =========================================================================== */
.ideas-portada-sec {
  padding: 60px 0;
}
.ideas-portada-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--indigo) 14%, var(--surface)), var(--surface));
  border: 1px solid var(--line-2);
  border-radius: 24px;
  padding: 38px 34px;
  box-shadow: var(--sh-2);
}
.ideas-portada-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.ideas-portada-cab h2 {
  font-size: clamp(24px, 4vw, 34px);
  margin-top: 10px;
  margin-bottom: 6px;
}
.ideas-portada-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ideas-portada-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.card-idea-home {
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.card-idea-home:hover {
  border-color: var(--indigo);
  transform: translateY(-4px);
}
.idea-rank-badge {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}


/* ===========================================================================
   PIEZAS NUEVAS DEL CATALOGO Y DE LAS PAGINAS LEGALES
   =========================================================================== */
.pill-punto{
  width:9px; height:9px; border-radius:99px; flex:none;
  background:linear-gradient(135deg,var(--c1),var(--c2));
}
.pill.on .pill-punto{ background:#fff }

.card-etq{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin-bottom:17px; flex:1; align-content:flex-start }
.card-etq li{
  font-size:11px; font-weight:650; background:var(--bg-2); border:1px solid var(--line);
  border-radius:6px; padding:3px 9px; color:var(--ink-2);
}
.card-etq li.dentro{ border-color:rgba(16,185,129,.45); color:var(--ok); background:rgba(16,185,129,.10) }

/* la ficha de la descarga */
.app-caja{
  display:grid; gap:18px; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r); padding:26px 24px; box-shadow:var(--sh-1);
}
@media(min-width:700px){ .app-caja{ grid-template-columns:auto 1fr auto; align-items:center } }
.app-ic{
  width:58px; height:58px; border-radius:17px; flex:none; display:grid; place-items:center;
  font-size:26px; color:#fff; background:linear-gradient(140deg,var(--cyan),var(--indigo) 55%,var(--violet));
  box-shadow:0 0 26px -6px rgba(99,102,241,.8);
}
.app-txt h3{ margin-bottom:5px }
.app-txt p{ font-size:14px; color:var(--muted) }

/* paginas legales */
.legal{ max-width:760px }
.legal h3{ font-size:19px; margin:34px 0 10px }
.legal h3:first-of-type{ margin-top:0 }
.legal p{ color:var(--ink-2); font-size:15.5px; margin-bottom:12px }
.legal ul{ list-style:none; margin:0 0 16px }
.legal li{
  color:var(--ink-2); font-size:15px; padding:9px 0 9px 24px; position:relative;
  border-top:1px solid var(--line);
}
.legal li:first-child{ border-top:0 }
.legal li::before{
  content:''; position:absolute; left:5px; top:18px; width:6px; height:6px; border-radius:2px;
  background:linear-gradient(140deg,var(--indigo),var(--violet));
}
.legal b{ color:var(--ink) }
.legal .fecha-doc{ font-size:13px; color:var(--muted); margin-top:30px; border-top:1px solid var(--line); padding-top:18px }

.pie-legal{ display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13px; color:var(--muted) }
.pie-legal a:hover{ color:var(--violet-ink) }


/* ===========================================================================
   MOVIL DE VERDAD
   Probado a 375 x 812. Nada se sale por el lado derecho.
   =========================================================================== */
@media (max-width:760px){
  body{ font-size:15px }
  .wrap,.narrow{ padding:0 16px }
  .seccion{ padding:48px 0 }
  .seccion-h{ margin-bottom:30px }
  .seccion-h p{ font-size:15px }
  h1{ font-size:clamp(29px,8.4vw,38px) }
  h2{ font-size:clamp(23px,6.4vw,30px) }
  .lead{ font-size:16px }

  .portada{ padding:44px 0 46px }
  .portada-in{ gap:32px }
  .acciones{ gap:10px; margin-bottom:22px }
  .acciones .btn{ flex:1 1 100% }
  .avales{ gap:8px 16px; font-size:12.5px }
  .cinta{ margin-top:26px }
  .cinta-pista{ animation-duration:52s; gap:11px }
  .mini-p{ width:152px }
  .mini-tit{ font-size:10px }

  .franja-c{ padding:22px 12px }
  .franja-n{ font-size:27px }

  .pantalla-cuerpo{ padding:13px }
  .cifras{ gap:8px }
  .cifra{ padding:10px 11px }
  .cifra-v{ font-size:17px }
  .cifra-l{ font-size:9px }

  .card-vis{ height:112px }
  .catalogo-barra{ gap:10px }
  .buscador{ max-width:none }

  .cierre{ padding:34px 20px }
  .cierre p{ font-size:15px }

  .detalle-f{ padding:20px 18px }
  .tabla th,.tabla td{ padding:12px 13px; font-size:13.5px }

  /* el pedido y el carrito, al alcance del pulgar */
  .pedido{ position:static }
  .pedido-b{ max-height:none }
  .pago-grid{ gap:20px }
  .paso-cab h3{ font-size:20px }
  .op-pago{ padding:20px 18px 16px }
  .btn-lg{ padding:14px 20px; font-size:15px }
  .sl-drawer{ width:100% }
  .sl-dr-b,.sl-dr-f,.sl-dr-h{ padding-left:18px; padding-right:18px }
  .sl-cta{ padding:16px }
  .mc-b{ padding:18px }
  .mc-caja{ max-height:94vh }
  .modal-conf{ padding:10px }

  .pie-in{ gap:22px }
  .pie-fin{ gap:8px }
}

/* el boton de accion vuelve a caber: ahora la cabecera lleva menos cosas */
@media (max-width:700px){
  .top-in{ gap:10px; height:62px }
  .marca{ font-size:16px }
  .marca small{ font-size:8.5px }
  .top-der{ gap:7px }
  .btn-carrito{ padding:10px 14px; font-size:13.5px }
}

/* la marca trae su propio fondo: si hereda el degradado del cuadrado se ve doble */
img.marca-ic{background:none;padding:0;object-fit:contain}
img.app-ic{background:none;padding:0;object-fit:contain}

/* ===========================================================================
   PRECIOS Y BOTONES EN TARJETAS DE CATALOGO
   =========================================================================== */
.card-precios {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-pr-usd {
  font-size: 20px;
  font-weight: 850;
  color: var(--ink);
  letter-spacing: -0.03em;
  display: flex;
  align-items: baseline;
  gap: 1px;
}
.card-pr-usd .simbolo {
  font-size: 16px;
  font-weight: 800;
  color: var(--violet-ink);
  margin-right: 1px;
}
.card-pr-usd .centavos {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
}
.card-pr-usd small {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-left: 4px;
}
.card-pr-bs {
  font-size: 12px;
  font-weight: 750;
  color: #10B981;
  letter-spacing: -0.01em;
}
.card-acciones {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-sm {
  padding: 8px 12px;
  font-size: 12.5px;
}
.card-tit-clic:hover {
  color: var(--indigo);
  text-decoration: underline;
}
.card-ver-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 17, 0.6);
  backdrop-filter: blur(3px);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 750;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
  cursor: pointer;
}
.card-vis:hover .card-ver-overlay {
  opacity: 1;
}

/* ===========================================================================
   MODAL DE DETALLE Y VISTA PREVIA DE PLANTILLA
   =========================================================================== */
.modal-detalle {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 17, 0.85);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}
.modal-detalle.on {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.md-caja {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-detalle.on .md-caja {
  transform: scale(1);
}
.md-cerrar {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  transition: 0.15s;
}
.md-cerrar:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #EF4444;
}
.md-grid {
  display: grid;
  gap: 0;
}
@media (min-width: 840px) {
  .md-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.md-vis {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 840px) {
  .md-vis {
    border-bottom: 0;
    border-right: 1px solid var(--line);
    padding: 32px;
  }
}
.md-img-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  background: #000;
}
.md-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.md-img-wrap:hover .md-img {
  transform: scale(1.03);
}
.md-vis-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.md-badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--indigo);
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}
.md-sku {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: ui-monospace, monospace;
}
.md-tag-app {
  font-size: 11.5px;
  font-weight: 700;
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 4px 10px;
  border-radius: 6px;
}
.md-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 840px) {
  .md-info {
    padding: 32px;
  }
}
.md-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.md-ico {
  font-size: 28px;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
}
.md-header h3 {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}
.md-sub {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.md-desc {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 18px;
}
.md-puntos-caja {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.md-puntos-caja h4 {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--ink);
  margin-bottom: 10px;
}
.md-puntos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.md-puntos li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.35;
}
.pt-check {
  color: #10B981;
  font-weight: 800;
  flex: none;
}
.md-compat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
  font-size: 12.5px;
  color: var(--muted);
}
.md-compat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.md-compat-item b {
  color: var(--ink-2);
}
.md-footer {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.md-precios {
  display: flex;
  flex-direction: column;
}
.md-pr-usd {
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 1px;
}
.md-sim {
  color: var(--violet-ink);
  font-size: 20px;
}
.md-dec {
  font-size: 17px;
  color: var(--ink-2);
}
.md-pr-usd small {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  margin-left: 4px;
}
.md-pr-bs {
  font-size: 13px;
  font-weight: 750;
  color: #10B981;
}
.md-acciones {
  display: flex;
  gap: 10px;
}
.sl-bs-row {
  font-size: 13px;
  color: #10B981;
  font-weight: 700;
  margin-top: 4px;
}
.sl-bs-val {
  font-size: 14px;
  font-weight: 800;
}

/* ===========================================================================
   PESTAÑAS DENTRO DEL VISOR DEL MODAL
   =========================================================================== */
.md-vis-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.md-vtab {
  flex: 1;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: .15s ease;
  font-family: inherit;
}
.md-vtab:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.md-vtab.on {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

/* Indicador de zoom */
.md-img-wrap {
  position: relative;
  cursor: zoom-in;
}
.md-zoom-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(10, 10, 17, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  padding: 4px 9px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity .2s;
}
.md-img-wrap:hover .md-zoom-hint {
  opacity: 1;
}

/* Modal Lightbox de Zoom Pantalla Completa */
.modal-zoom {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(5, 5, 10, 0.94);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.modal-zoom.on {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.zoom-cerrar {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .15s;
  z-index: 10;
}
.zoom-cerrar:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #EF4444;
}
.zoom-caja {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.zoom-img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9);
}
.zoom-pie {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

/* ===========================================================================
   INSIGNIAS DE VENTAS EN TARJETAS DEL CATÁLOGO
   =========================================================================== */
.badge-venta {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 3;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.03em;
  padding: 4px 9px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 4px;
}
.badge-mas-vendida {
  background: linear-gradient(135deg, #EF4444, #F59E0B);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.badge-top-ventas {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===========================================================================
   VISTA: IDEAS DE LA COMUNIDAD (CROWDSOURCING)
   =========================================================================== */
.ideas-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--indigo) 12%, var(--surface)), var(--surface));
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 34px 30px;
  margin-bottom: 30px;
}
.ideas-hero h2 {
  font-size: clamp(26px, 4.5vw, 36px);
  margin-top: 12px;
  margin-bottom: 10px;
}
.ideas-cupo-card {
  margin-top: 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.cupo-info {
  flex: 1;
  min-width: 240px;
}
.cupo-tit {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.cupo-conteo {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.cupo-barra {
  height: 7px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--line);
  margin-top: 8px;
  overflow: hidden;
  max-width: 320px;
}
.cupo-progreso {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--indigo), var(--ok));
  transition: width .4s ease;
}
.ideas-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}
.ideas-tabs {
  display: flex;
  gap: 8px;
}
.ideas-contador-txt {
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 600;
}
.ideas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.card-idea {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
  box-shadow: var(--sh-1);
}
.card-idea:hover {
  transform: translateY(-3px);
  border-color: var(--indigo);
  box-shadow: var(--sh-2);
}
.idea-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.idea-cat {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--violet-ink);
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
}
.idea-fecha {
  font-size: 11.5px;
  color: var(--muted);
}
.idea-tit {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
  margin: 4px 0 8px;
}
.idea-desc {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
  flex: 1;
}
.idea-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.idea-autor {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
.idea-autor b {
  color: var(--ink-2);
}
.btn-votar {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: .16s;
  font-family: inherit;
}
.btn-votar:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: var(--indigo);
  color: var(--violet-ink);
}
.btn-votar.votado {
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
  cursor: default;
}
.modal-idea-caja {
  max-width: 580px;
}
.modal-idea-cuerpo {
  padding: 28px;
}

/* ===========================================================================
   FONDO FANTASMA AMBIENTAL EN PORTADA (DOBLE CARRETE RECTO EN DIRECCIONES OPUESTAS)
   =========================================================================== */
.portada {
  position: relative;
  overflow: hidden;
}
.portada-bg-fantasma {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 16px;
  opacity: 0.16;
  filter: blur(2.2px) saturate(0.85);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.85) 25%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0.1) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.85) 25%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0.1) 100%);
}
.bg-fantasma-fila {
  overflow: hidden;
  width: 100%;
}
.bg-fantasma-pista {
  display: flex;
  gap: 22px;
  width: max-content;
}
.pista-der {
  animation: desfile-der 135s linear infinite;
}
.pista-izq {
  animation: desfile-izq 145s linear infinite;
}
@keyframes desfile-der {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes desfile-izq {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.portada-in {
  position: relative;
  z-index: 2;
}
.cinta {
  display: none !important;
}

/* ===========================================================================
   MÉTODOS DE PAGO: ZINLI Y WALLY TECH
   =========================================================================== */
.op-logo.zl, .eg-ic.zl {
  background: linear-gradient(135deg, #7C3AED, #9333EA) !important;
  color: #fff !important;
}
.op-logo.wl, .eg-ic.wl {
  background: linear-gradient(135deg, #EA580C, #F97316) !important;
  color: #fff !important;
}
.datos-h.zl {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(147, 51, 234, 0.08)) !important;
  border-color: rgba(124, 58, 237, 0.35) !important;
  color: #C084FC !important;
}
.datos-h.wl {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.18), rgba(249, 115, 22, 0.08)) !important;
  border-color: rgba(234, 88, 12, 0.35) !important;
  color: #FB923C !important;
}
.dato.destacado.zl {
  background: rgba(124, 58, 237, 0.12) !important;
  border: 1px solid rgba(124, 58, 237, 0.4) !important;
}
.dato.destacado.wl {
  background: rgba(234, 88, 12, 0.12) !important;
  border: 1px solid rgba(234, 88, 12, 0.4) !important;
}
.aviso.zl {
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.28) !important;
}
.aviso.wl {
  background: rgba(234, 88, 12, 0.08) !important;
  border-color: rgba(234, 88, 12, 0.28) !important;
}

/* ===========================================================================
   GARANTÍA DE VISIBILIDAD DE IDEAS DE LA COMUNIDAD
   =========================================================================== */
#gridIdeas, #gridIdeasPortada {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.card-idea {
  opacity: 1 !important;
  visibility: visible !important;
}