/* FINDLEY PLACE · Estilos compartidos por todas las páginas
   Mismo sistema que Findley Go, Hub y Home (Plus Jakarta Sans, logo apilado, animaciones al hacer scroll),
   con paleta propia: noche violeta + naranja fuego (vender) + violeta (marketplace) + verde (ganancia). */
:root {
  --noche: #0d0b14;
  --noche-2: #15121f;
  --noche-3: #1f1a2d;
  --fuego: #ff6b2c;
  --fuego-2: #ff8a52;
  --fuego-osc: #b23f0b;
  --violeta: #8b5cff;
  --verde: #16a34a;
  --verde-claro: #4ade80;
  --tinta: #14111c;
  --gris: #625d70;
  --gris-claro: #aaa3bb;
  --linea: #e8e4ef;
  --linea-osc: rgba(235, 225, 255, .1);
  --fondo: #faf9fc;
  --fondo-2: #f2eff7;
  --wa: #25d366;
  --radio: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--tinta); background: var(--fondo); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: var(--fuego); color: #fff; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.contenedor { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.verde { color: var(--verde); }
.solo-movil { display: none; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; flex-direction: column; line-height: .82; font-weight: 800; letter-spacing: -.045em; font-size: 22px; }
.logo b { color: #fff; font-weight: 800; }
.logo i { color: var(--fuego); font-style: normal; padding-left: .55em; }

/* ---------- Barra ---------- */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, box-shadow .3s; }
.barra.con-fondo, .pag-panel .barra { background: rgba(13, 11, 20, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linea-osc); }
.barra .contenedor { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 20px; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a { color: #d2cbe0; font-size: 14.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px; transition: color .2s, background .2s; }
.menu a:hover, .menu a.activo { color: #fff; background: rgba(235, 225, 255, .08); }
.barra-acciones { display: flex; align-items: center; gap: 10px; }
.btn-menu { display: none; background: none; border: 0; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; color: #fff; }
.btn-menu svg { width: 24px; height: 24px; margin: auto; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; background: none;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-fuego { background: var(--fuego); color: #fff; box-shadow: 0 12px 30px -10px rgba(255, 107, 44, .6); }
.btn-fuego:hover { background: var(--fuego-2); box-shadow: 0 16px 38px -10px rgba(255, 107, 44, .75); }
.btn-wa { background: var(--wa); color: #05301a; }
.btn-borde { border-color: rgba(235, 225, 255, .25); color: #fff; }
.btn-borde:hover { border-color: rgba(235, 225, 255, .55); background: rgba(235, 225, 255, .05); }
.btn-borde-osc { border-color: var(--linea); color: var(--tinta); background: #fff; }
.btn-borde-osc:hover { border-color: var(--tinta); }
.btn-noche { background: var(--noche); color: #fff; }
.btn-chico { padding: 10px 18px; font-size: 14px; }
.btn-ancho { width: 100%; }

/* ---------- Secciones ---------- */
.seccion { padding: 110px 0; position: relative; }
.seccion-gris { background: var(--fondo-2); }
.seccion-noche { background: var(--noche); color: #fff; overflow: hidden; }
.etiqueta { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fuego-osc); }
.etiqueta::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.seccion-noche .etiqueta, .hero .etiqueta, .cta-final .etiqueta { color: var(--fuego); }
h1, h2, h3 { line-height: 1.06; letter-spacing: -.038em; font-weight: 800; }
h2 { font-size: clamp(32px, 4.6vw, 54px); margin: 14px 0 16px; }
h3 { font-size: 21px; letter-spacing: -.02em; line-height: 1.25; }
.intro { font-size: 18px; color: var(--gris); max-width: 660px; }
.seccion-noche .intro { color: var(--gris-claro); }
.cabeza { margin-bottom: 56px; }
.cabeza-centro { text-align: center; }
.cabeza-centro .intro { margin: 0 auto; }
.cabeza-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.degradado { background: linear-gradient(100deg, var(--fuego) 0%, #ff4f8b 50%, var(--violeta) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--noche); color: #fff; overflow: hidden; padding: 148px 0 96px; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(235, 225, 255, .09) 1px, transparent 1px); background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 78%);
}
.brillo { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; animation: flotar 14s ease-in-out infinite alternate; }
.brillo-1 { width: 560px; height: 560px; background: rgba(255, 107, 44, .22); top: -220px; right: -120px; }
.brillo-2 { width: 460px; height: 460px; background: rgba(139, 92, 255, .24); bottom: -220px; left: -140px; animation-delay: -6s; }
@keyframes flotar { to { transform: translate(-40px, 40px) scale(1.08); } }
.hero .contenedor { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(44px, 6.6vw, 84px); margin: 22px 0 24px; }
.hero p.lead { font-size: 19px; color: #cfc8dc; max-width: 560px; }
.hero p.lead strong { color: #fff; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.pildora { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px; background: rgba(235, 225, 255, .06); border: 1px solid var(--linea-osc); font-size: 13.5px; color: #ddd6ea; font-weight: 600; }
.pildora span { background: var(--fuego); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; }
.hero-interno { padding: 150px 0 84px; }
.hero-interno h1 { font-size: clamp(40px, 5.8vw, 68px); }
.hero-centro { text-align: center; }
.hero-centro p.lead { margin: 0 auto; }
.hero-centro .hero-cta { justify-content: center; }
.hero-datos { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 40px; }
.hero-datos div b { display: block; font-size: 30px; letter-spacing: -.04em; line-height: 1.1; }
.hero-datos div > span { font-size: 13.5px; color: var(--gris-claro); }

.ventas-vivo { margin-top: 26px; display: inline-flex; gap: 10px; align-items: center; font-size: 14px; color: #ddd6ea; padding: 10px 16px; border-radius: 14px; background: rgba(235, 225, 255, .05); border: 1px solid var(--linea-osc); max-width: 100%; }
.ventas-vivo .verde { color: var(--verde-claro); }
.ventas-vivo.entra { animation: entrar .5s ease; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }
.pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--verde-claro); flex: none; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: latir 1.8s infinite; }
@keyframes latir { 70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }

/* Visual del hero: el recorrido de una venta */
.flujo { position: relative; max-width: 500px; margin-left: auto; width: 100%; display: grid; gap: 14px; }
.flujo-card {
  border-radius: 24px; padding: 18px; background: rgba(30, 25, 44, .82); border: 1px solid rgba(235, 225, 255, .12);
  backdrop-filter: blur(10px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); display: flex; gap: 16px; align-items: center;
  animation: subir 6s ease-in-out infinite;
}
.flujo-card:nth-child(2) { margin-left: 40px; animation-delay: -2s; }
.flujo-card:nth-child(3) { margin-left: 14px; animation-delay: -4s; }
.flujo-card:nth-child(4) { margin-left: 56px; animation-delay: -1s; }
@keyframes subir { 50% { transform: translateY(-8px); } }
.flujo-card .foto { width: 74px; height: 74px; border-radius: 18px; flex: none; font-size: 36px; }
.flujo-card small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-claro); }
.flujo-card b { font-size: 16px; display: block; line-height: 1.3; }
.flujo-card p { font-size: 13.5px; color: var(--gris-claro); }
.flujo-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; font-size: 22px; background: rgba(235, 225, 255, .07); }
.flujo-gana { background: linear-gradient(120deg, rgba(22, 163, 74, .35), rgba(30, 25, 44, .9)); border-color: rgba(74, 222, 128, .35); }
.flujo-gana .monto { margin-left: auto; font-size: 28px; font-weight: 800; color: var(--verde-claro); letter-spacing: -.04em; }
.flujo-paso { margin-left: auto; font-size: 11.5px; font-weight: 800; padding: 5px 10px; border-radius: 99px; background: var(--fuego); color: #fff; white-space: nowrap; }
.flujo-paso.go { background: #c8ff2e; color: #090d12; }

/* Cinta de datos */
.cinta { background: var(--fuego); color: #fff; overflow: hidden; padding: 16px 0; }
.cinta-pista { display: flex; gap: 48px; width: max-content; animation: correr 32s linear infinite; font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.cinta-pista span { display: flex; align-items: center; gap: 48px; white-space: nowrap; }
.cinta-pista span::after { content: "✦"; opacity: .7; }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- Pasos ---------- */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: paso; }
.paso { padding: 30px 26px; border-radius: var(--radio); background: #fff; border: 1px solid var(--linea); position: relative; }
.paso::before { counter-increment: paso; content: "0" counter(paso); font-size: 13px; font-weight: 800; color: var(--fuego); letter-spacing: .1em; }
.paso .emoji { font-size: 34px; margin: 14px 0 12px; }
.paso h3 { font-size: 19px; margin-bottom: 8px; }
.paso p { color: var(--gris); font-size: 15px; }
.paso .quien { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 99px; background: var(--fondo-2); color: var(--gris); }
.paso .quien.go { background: #c8ff2e; color: #090d12; }
.paso .quien.tu { background: rgba(255, 107, 44, .14); color: var(--fuego-osc); }

/* ---------- Producto (tarjeta) ---------- */
.foto { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .5), transparent 55%), linear-gradient(140deg, var(--a), var(--b)); overflow: hidden; }
.foto span { font-size: clamp(54px, 7vw, 74px); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .25)); transition: transform .4s; }
.productos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.prod { position: relative; border-radius: var(--radio); background: #fff; border: 1px solid var(--linea); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; }
.prod:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(30, 15, 60, .35); }
.prod:hover .foto span { transform: scale(1.08) rotate(-4deg); }
.prod-abrir { border: 0; padding: 0; background: none; cursor: pointer; display: block; width: 100%; }
.prod-tag { position: absolute; top: 12px; left: 12px; background: var(--noche); color: #fff; font-size: 11.5px; font-weight: 800; padding: 5px 10px; border-radius: 99px; pointer-events: none; }
.prod-guardar { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); display: grid; place-items: center; cursor: pointer; color: var(--gris); transition: transform .2s; }
.prod-guardar:hover { transform: scale(1.1); }
.prod-guardar svg { width: 19px; height: 19px; }
.prod-guardar.si { color: #fff; background: var(--fuego); }
.prod-guardar.si svg { fill: currentColor; }
.prod-cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.prod-prov { font-size: 12px; font-weight: 700; color: var(--violeta); }
.prod h3 { font-size: 16.5px; margin: 4px 0 14px; letter-spacing: -.015em; }
.prod-precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; padding: 10px; border-radius: 14px; background: var(--fondo-2); }
.prod-precios small { display: block; font-size: 11px; color: var(--gris); font-weight: 600; }
.prod-precios b { font-size: 15px; letter-spacing: -.02em; }
.prod-precios .gana b { color: var(--verde); }
.prod-stock { height: 5px; border-radius: 9px; background: var(--fondo-2); margin-top: 14px; overflow: hidden; }
.prod-stock span { display: block; height: 100%; background: linear-gradient(90deg, var(--fuego), var(--violeta)); border-radius: 9px; }
.prod-pie { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--gris); margin-top: 8px; flex-wrap: wrap; }

/* Ficha (ventana del producto) */
.ficha { border: 0; padding: 0; background: none; max-width: 980px; width: calc(100% - 32px); margin: auto; max-height: calc(100vh - 32px); }
.ficha::backdrop { background: rgba(13, 11, 20, .7); backdrop-filter: blur(4px); }
.ficha-caja { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; background: #fff; border-radius: 28px; overflow: hidden; }
.ficha-cerrar { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fondo-2); font-size: 24px; cursor: pointer; line-height: 1; }
.ficha-izq { background: var(--fondo-2); }
.foto-grande { border-radius: 0; }
.foto-grande span { font-size: 130px; }
.ficha-material { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px; font-size: 13px; }
.ficha-material b { width: 100%; font-size: 14px; }
.ficha-material span { padding: 6px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--linea); font-weight: 600; }
.ficha-der { padding: 34px; overflow-y: auto; max-height: calc(100vh - 32px); }
.ficha-der h2 { font-size: clamp(26px, 3vw, 34px); margin: 6px 0 10px; }
.ficha-der > p { color: var(--gris); }
.ficha-precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 18px; }
.ficha-precios div { padding: 12px 14px; border-radius: 14px; background: var(--fondo-2); }
.ficha-precios small { display: block; font-size: 12px; color: var(--gris); font-weight: 600; }
.ficha-precios b { font-size: 20px; letter-spacing: -.03em; }
.ficha-calc { display: block; padding: 18px; border-radius: 18px; border: 1px solid var(--linea); }
.ficha-calc > span { font-weight: 700; font-size: 14.5px; }
.ficha-calc input { width: 100%; accent-color: var(--fuego); margin: 14px 0 8px; }
.ficha-res { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.ficha-res b { font-size: 20px; letter-spacing: -.03em; }
.nota { display: block; font-size: 12.5px; color: var(--gris); margin-top: 8px; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.ficha-acciones .btn { padding: 12px 18px; font-size: 14px; }
.ficha-datos { list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--gris); }
.ficha-datos b { color: var(--tinta); }

/* ---------- Calculadora ---------- */
.calculadora { display: grid; grid-template-columns: 1.05fr .95fr; border-radius: 28px; overflow: hidden; border: 1px solid var(--linea); background: #fff; }
.calc-izq { padding: 40px; display: grid; gap: 26px; }
.calc-der { padding: 40px; background: var(--noche); color: #fff; display: flex; flex-direction: column; }
.calc-der small { font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; color: var(--gris-claro); }
.calc-der .grande { font-size: clamp(50px, 6vw, 72px); font-weight: 800; letter-spacing: -.05em; line-height: 1; margin: 8px 0 6px; color: var(--verde-claro); font-variant-numeric: tabular-nums; }
.calc-der .por-pedido { color: var(--gris-claro); }
.calc-der .por-pedido b { color: #fff; }
.desglose { list-style: none; margin: 26px 0; display: grid; gap: 10px; font-size: 15px; }
.desglose li { display: flex; justify-content: space-between; gap: 12px; color: #cfc8dc; }
.desglose li.total { border-top: 1px dashed rgba(235, 225, 255, .25); padding-top: 12px; color: #fff; font-weight: 700; }
.desglose li.total b { color: var(--verde-claro); }
.calc-nivel { margin-top: auto; padding: 14px 16px; border-radius: 14px; background: rgba(235, 225, 255, .06); font-size: 14px; color: #ddd6ea; }
.calc-nivel b { color: var(--fuego-2); }
.campo > label, .campo-titulo { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; }
.campo-titulo b { color: var(--tinta); font-size: 15px; letter-spacing: 0; text-transform: none; }
.campo select, .campo input:not([type=range]):not([type=checkbox]), .campo textarea {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--linea); background: var(--fondo); outline: 0; font-weight: 600; font-size: 15px;
}
.campo select:focus, .campo input:focus, .campo textarea:focus { border-color: var(--tinta); background: #fff; box-shadow: 0 0 0 4px rgba(255, 107, 44, .2); }
.campo input[type=range] { width: 100%; accent-color: var(--fuego); }
.campo .ayuda { font-size: 12.5px; color: var(--gris); margin-top: 4px; }

/* ---------- Bento: todo lo que te damos ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.celda { grid-column: span 2; padding: 30px; border-radius: var(--radio); background: var(--noche-2); border: 1px solid var(--linea-osc); position: relative; overflow: hidden; }
.celda.ancha { grid-column: span 3; }
.celda.estrella { grid-column: span 4; background: linear-gradient(135deg, rgba(255, 107, 44, .22), rgba(139, 92, 255, .18)), var(--noche-2); }
.celda .ico { font-size: 30px; margin-bottom: 14px; }
.celda h3 { margin-bottom: 8px; }
.celda p { color: var(--gris-claro); font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips span { font-size: 12.5px; font-weight: 700; padding: 6px 11px; border-radius: 99px; background: rgba(235, 225, 255, .08); color: #ddd6ea; }
.mini-tienda { margin-top: 20px; border-radius: 16px; background: #fff; color: var(--tinta); padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 360px; }
.mini-tienda .url { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--gris); padding: 6px 10px; border-radius: 8px; background: var(--fondo-2); }
.mini-tienda .foto { border-radius: 10px; }
.mini-tienda .foto span { font-size: 30px; }

/* ---------- Comparativa ---------- */
.tabla-comp { border-radius: 26px; overflow: hidden; border: 1px solid var(--linea); background: #fff; }
.fila-comp { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.1fr; align-items: center; border-top: 1px solid var(--linea); }
.fila-comp:first-child { border-top: 0; }
.fila-comp > div { padding: 17px 22px; font-size: 15px; }
.fila-comp > div:first-child { font-weight: 700; }
.fila-comp > div:nth-child(2), .fila-comp > div:nth-child(3) { color: var(--gris); }
.fila-comp > div:last-child { background: rgba(255, 107, 44, .09); font-weight: 700; display: flex; gap: 10px; align-items: center; align-self: stretch; }
.fila-comp > div:last-child svg { width: 20px; height: 20px; color: var(--fuego); flex: none; }
.fila-comp.cabecera > div { font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--gris); padding-top: 20px; padding-bottom: 20px; }
.fila-comp.cabecera > div:last-child { background: var(--noche); color: var(--fuego); }

/* ---------- Niveles ---------- */
.planes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.plan { padding: 30px 26px; border-radius: 26px; background: #fff; border: 1px solid var(--linea); display: flex; flex-direction: column; position: relative; }
.plan h3 { font-size: 22px; }
.plan .rango { color: var(--gris); font-size: 14px; margin-top: 4px; }
.plan .precio-plan { font-size: 40px; font-weight: 800; letter-spacing: -.05em; margin: 20px 0 2px; line-height: 1; }
.plan .precio-plan small { font-size: 14px; letter-spacing: 0; color: var(--gris); font-weight: 600; }
.plan .lista-check { margin: 22px 0 0; }
.plan-top { background: var(--noche); color: #fff; border-color: var(--noche); transform: translateY(-10px); box-shadow: 0 40px 80px -40px rgba(20, 10, 40, .7); }
.plan-top .rango, .plan-top .precio-plan small { color: var(--gris-claro); }
.plan-top .precio-plan { color: var(--fuego); }
.plan-sello { position: absolute; top: -13px; left: 26px; background: var(--fuego); color: #fff; font-size: 11.5px; font-weight: 800; padding: 5px 12px; border-radius: 99px; letter-spacing: .06em; }
.nivel-insignia { font-size: 32px; margin-bottom: 10px; }
.lista-check { list-style: none; display: grid; gap: 12px; margin: 26px 0 34px; }
.lista-check li { display: flex; gap: 12px; font-size: 15.5px; color: #cfc8dc; }
.lista-check li b { color: #fff; }
.lista-check svg { width: 22px; height: 22px; flex: none; color: #fff; background: var(--fuego); border-radius: 50%; padding: 4px; margin-top: 1px; }
.lista-check.clara li { color: var(--gris); }
.lista-check.clara li b { color: var(--tinta); }

/* ---------- Ecosistema ---------- */
.ecosistema { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.eco { padding: 22px; border-radius: 20px; background: rgba(235, 225, 255, .04); border: 1px solid var(--linea-osc); }
.eco b { display: block; font-size: 16px; margin-bottom: 4px; }
.eco b i { font-style: normal; color: var(--fuego); }
.eco p { font-size: 13.5px; color: var(--gris-claro); }
.eco.go { border-color: rgba(200, 255, 46, .4); }
.eco.go b i { color: #c8ff2e; }

/* ---------- Dos columnas ---------- */
.dividido { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.beneficio { padding: 30px; border-radius: var(--radio); background: #fff; border: 1px solid var(--linea); }
.beneficio .ico { width: 50px; height: 50px; border-radius: 15px; background: rgba(255, 107, 44, .12); display: grid; place-items: center; margin-bottom: 18px; font-size: 24px; }
.beneficio h3 { font-size: 19px; margin-bottom: 8px; }
.beneficio p { color: var(--gris); font-size: 15px; }

/* ---------- Preguntas ---------- */
.preguntas { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.preguntas details { border-radius: 18px; background: #fff; border: 1px solid var(--linea); transition: border-color .2s; }
.preguntas details[open] { border-color: var(--tinta); }
.preguntas summary { cursor: pointer; list-style: none; padding: 22px 26px; font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-size: 26px; font-weight: 500; line-height: 1; transition: transform .3s; color: var(--gris); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 26px 24px; color: var(--gris); font-size: 15.5px; }

/* ---------- CTA final ---------- */
.cta-final { background: var(--noche); color: #fff; text-align: center; padding: 120px 0; position: relative; overflow: hidden; }
.cta-final h2 { font-size: clamp(38px, 6vw, 72px); max-width: 900px; margin: 16px auto 18px; }
.cta-final p { color: var(--gris-claro); font-size: 18px; max-width: 580px; margin: 0 auto; }
.cta-final .hero-cta { justify-content: center; }
.cta-final .contenedor { position: relative; z-index: 2; }

/* ---------- Catálogo ---------- */
.filtros { position: sticky; top: 74px; z-index: 20; background: rgba(250, 249, 252, .94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); padding: 16px 0; }
.filtros-fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.buscar { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--linea); }
.buscar:focus-within { border-color: var(--tinta); }
.buscar svg { width: 18px; height: 18px; color: var(--gris); flex: none; }
.buscar input { border: 0; outline: 0; background: none; padding: 12px 0; flex: 1; min-width: 0; font-weight: 600; }
.filtros select { padding: 12px 16px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; font-weight: 600; }
.casilla { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.casilla input { accent-color: var(--fuego); width: 17px; height: 17px; }
.cats { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; padding-bottom: 2px; scrollbar-width: none; }
.cats button { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.cats button.activo { background: var(--noche); color: #fff; border-color: var(--noche); }
.conteo { font-size: 14px; color: var(--gris); font-weight: 600; margin: 26px 0 16px; }
.vacio { grid-column: 1 / -1; text-align: center; padding: 60px 20px; border-radius: 24px; background: #fff; border: 1px dashed var(--linea); }
.vacio p { color: var(--gris); margin: 6px 0 20px; }

/* ---------- Proveedores ---------- */
.calc-prov .calc-der .grande { color: var(--fuego-2); }
.form-prov { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 28px; border: 1px solid var(--linea); }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tarifas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tarifa { padding: 26px; border-radius: 20px; background: #fff; border: 1px solid var(--linea); }
.tarifa b { display: block; font-size: 34px; letter-spacing: -.04em; line-height: 1.1; margin: 6px 0; }
.tarifa small { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.tarifa p { font-size: 14px; color: var(--gris); }

/* ---------- Pie ---------- */
.pie { background: #08070c; color: var(--gris-claro); padding: 80px 0 34px; font-size: 14.5px; }
.pie-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.pie h4 { color: #fff; font-size: 14px; margin-bottom: 16px; }
.pie ul { list-style: none; display: grid; gap: 10px; }
.pie a { cursor: pointer; }
.pie a:hover { color: var(--fuego); }
.pie-marca p { margin-top: 18px; max-width: 320px; }
.pie-grupo b { color: #fff; }
.pie-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--linea-osc); font-size: 13px; }
.wa-flotante { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 16px 34px -10px rgba(37, 211, 102, .7); transition: transform .2s; }
.wa-flotante:hover { transform: scale(1.07); }
.wa-flotante svg { width: 30px; height: 30px; }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 100; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; background: var(--noche); color: #fff; padding: 13px 20px; border-radius: 14px; font-weight: 600; font-size: 14.5px; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .5); transition: opacity .3s, transform .3s; max-width: calc(100% - 32px); }
.toast.ver { opacity: 1; transform: translate(-50%, 0); }
.aviso-demo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 14px; background: #fff8e6; border: 1px solid #f3dfa5; color: #6d5410; font-size: 13.5px; }

/* ---------- Animación al hacer scroll ---------- */
.aparecer { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.aparecer.visible { opacity: 1; transform: none; }
.prod.aparecer { transition: opacity .6s, transform .6s, box-shadow .25s; }
.retraso-1 { transition-delay: .08s; } .retraso-2 { transition-delay: .16s; } .retraso-3 { transition-delay: .24s; } .retraso-4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aparecer { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero-grid, .dividido { grid-template-columns: 1fr; gap: 48px; }
  .flujo { margin: 0 auto; }
  .pasos, .tarifas { grid-template-columns: 1fr 1fr; }
  .productos { grid-template-columns: repeat(3, 1fr); }
  .planes { grid-template-columns: 1fr 1fr; }
  .plan-top { transform: none; }
  .bento { grid-template-columns: 1fr 1fr; }
  .celda, .celda.ancha { grid-column: span 1; }
  .celda.estrella { grid-column: span 2; }
  .ecosistema { grid-template-columns: repeat(3, 1fr); }
  .beneficios { grid-template-columns: 1fr 1fr; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .menu {
    position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 22px;
    background: rgba(13, 11, 20, .97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea-osc);
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  }
  .menu.abierto { transform: none; opacity: 1; pointer-events: auto; }
  .menu a { padding: 14px 10px; font-size: 17px; border-radius: 12px; }
  .solo-movil { display: block; }
  .btn-menu { display: grid; }
  .barra-acciones .btn { display: none; }
  .calculadora, .ficha-caja { grid-template-columns: 1fr; }
  .ficha-izq .foto-grande { aspect-ratio: 16 / 9; }
  .foto-grande span { font-size: 90px; }
  .ficha-der { max-height: none; }
  .ficha { overflow-y: auto; }
  .productos { grid-template-columns: 1fr 1fr; }
  .fila-comp { grid-template-columns: 1fr 1fr 1fr; }
  .fila-comp > div:first-child { grid-column: 1 / -1; padding-bottom: 4px; }
  .fila-comp.cabecera > div:first-child { display: none; }
  .fila-comp > div { padding: 12px 14px; font-size: 13.5px; }
}
@media (max-width: 640px) {
  .seccion { padding: 80px 0; }
  .hero { padding: 120px 0 80px; }
  .hero p.lead { font-size: 17px; }
  .hero-datos { gap: 22px; }
  .flujo-card:nth-child(n) { margin-left: 0; }
  .pasos, .bento, .beneficios, .tarifas, .planes { grid-template-columns: 1fr; }
  .celda.estrella { grid-column: span 1; }
  .ecosistema { grid-template-columns: 1fr 1fr; }
  .productos { gap: 12px; }
  .prod-cuerpo { padding: 12px; }
  .prod h3 { font-size: 14.5px; }
  .prod-precios { grid-template-columns: 1fr 1fr; padding: 8px; }
  .prod-precios .gana { grid-column: 1 / -1; }
  .prod-pie span:last-child { display: none; }
  .calc-izq, .calc-der, .form-prov, .ficha-der { padding: 26px 20px; }
  .ficha-precios { grid-template-columns: 1fr 1fr; }
  .dos-col { grid-template-columns: 1fr; }
  .pie-grid { grid-template-columns: 1fr; }
  .filtros { top: 74px; }
}

/* ---------- Panel del vendedor (demostración) ---------- */
.pa { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; padding-top: 74px; background: var(--fondo-2); }
.pa-lado { position: sticky; top: 74px; align-self: start; height: calc(100vh - 74px); background: #fff; border-right: 1px solid var(--linea); padding: 22px 14px; display: flex; flex-direction: column; gap: 18px; }
.pa-cuenta { display: flex; gap: 12px; align-items: center; padding: 0 8px; }
.pa-cuenta b { display: block; font-size: 15px; line-height: 1.2; }
.pa-cuenta small { color: var(--fuego-osc); font-weight: 700; font-size: 12.5px; }
.pa-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--fuego), var(--violeta)); flex: none; }
.pa-nav { display: grid; gap: 4px; }
.pa-nav button { display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: none; padding: 11px 12px; border-radius: 12px; font-weight: 700; font-size: 14.5px; cursor: pointer; color: var(--gris); }
.pa-nav button:hover { background: var(--fondo-2); color: var(--tinta); }
.pa-nav button.activo { background: var(--noche); color: #fff; }
.pa-link { margin-top: auto; font-size: 14px; font-weight: 700; padding: 11px 12px; border-radius: 12px; background: rgba(255, 107, 44, .1); color: var(--fuego-osc); }
.pa-main { padding: 26px 30px 60px; min-width: 0; display: grid; gap: 20px; align-content: start; }
.pa-vista { display: grid; gap: 18px; }
.pa-vista[hidden] { display: none; }
.pa-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pa-cab h1 { font-size: 30px; }
.pa-cab p { color: var(--gris); }
.pa-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pa-kpi { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 18px 20px; }
.pa-kpi small { color: var(--gris); font-weight: 700; font-size: 13px; }
.pa-kpi b { display: block; font-size: 28px; letter-spacing: -.04em; margin-top: 4px; }
.pa-kpi b.naranja { color: var(--fuego); }
.pa-dos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.pa-caja { background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 20px; min-width: 0; }
.pa-caja-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; }
.pa-mini { border: 0; background: none; font-weight: 700; color: var(--fuego-osc); cursor: pointer; font-size: 14px; }
.pa-grafico { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; height: 190px; align-items: end; }
.pa-barra { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.pa-barra span { width: 100%; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--fuego), var(--violeta)); min-height: 4px; }
.pa-barra small { font-size: 11px; color: var(--gris); }
.pa-nivel { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pa-nivel b { font-size: 24px; letter-spacing: -.03em; }
.pa-nivel span { color: var(--gris); font-size: 14px; }
.pa-prog { height: 10px; border-radius: 9px; background: var(--fondo-2); margin: 12px 0; overflow: hidden; }
.pa-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--fuego), var(--violeta)); border-radius: 9px; }
#pa-progreso p { font-size: 14px; color: var(--gris); }
#pa-progreso p b { color: var(--tinta); }
.pa-premios { list-style: none; margin-top: 14px; display: grid; gap: 6px; font-size: 14px; color: var(--verde); font-weight: 600; }
.pa-tabla { display: grid; }
.pa-fila { display: grid; grid-template-columns: 1fr 70px 170px 90px; gap: 12px; align-items: center; padding: 12px 8px; border: 0; border-top: 1px solid var(--linea); background: none; text-align: left; cursor: pointer; border-radius: 12px; width: 100%; }
.pa-fila:first-child { border-top: 0; }
.pa-fila:hover { background: var(--fondo); }
.pa-p { display: flex; gap: 12px; align-items: center; min-width: 0; }
.pa-p b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-p small { display: block; font-size: 12.5px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-p > span:last-child { min-width: 0; }
.pa-foto { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.pa-foto span { font-size: 22px; }
.pa-f { font-size: 13px; color: var(--gris); }
.pa-g { font-weight: 800; text-align: right; color: var(--verde); }
.rojo, .pa-g.rojo { color: #dc2626; }
.pa-estado { display: inline-block; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 99px; white-space: nowrap; }
.pa-estado.amarillo { background: #fff4d6; color: #8a6100; }
.pa-estado.violeta { background: rgba(139, 92, 255, .14); color: #5b2fd6; }
.pa-estado.naranja { background: rgba(255, 107, 44, .14); color: var(--fuego-osc); }
.pa-estado.verde { background: rgba(22, 163, 74, .12); color: #11803a; }
.pa-estado.rojo { background: rgba(220, 38, 38, .1); color: #b91c1c; }
.pa-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.pa-filtros button { border: 1px solid var(--linea); background: #fff; border-radius: 99px; padding: 8px 14px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.pa-filtros button small { color: var(--gris); margin-left: 4px; }
.pa-filtros button.activo { background: var(--noche); color: #fff; border-color: var(--noche); }
.pa-filtros button.activo small { color: var(--gris-claro); }
.pa-vacio { padding: 30px; text-align: center; color: var(--gris); }
.pa-vacio a { color: var(--fuego-osc); font-weight: 700; }
.pa-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.pa-form .pa-caja:nth-child(1), .pa-form .pa-caja:nth-child(2) { grid-column: 1; }
.pa-resumen { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 94px; }
.pa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pa-ancho { grid-column: 1 / -1; }
.pa-res { list-style: none; display: grid; gap: 10px; font-size: 15px; margin-bottom: 18px; }
.pa-res li { display: flex; justify-content: space-between; gap: 12px; color: var(--gris); }
.pa-res li b { color: var(--tinta); }
.pa-res li.total { border-top: 1px dashed var(--linea); padding-top: 12px; font-weight: 800; color: var(--tinta); font-size: 17px; }
.pa-res li.total b.verde { color: var(--verde); }
.pa-res li.total b.rojo { color: #dc2626; }
.pa-res li.alerta { color: #b91c1c; font-size: 13.5px; font-weight: 700; }
.pa-url { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pa-tienda { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pa-prod { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 14px; }
.pa-foto-g { width: 84px; height: 84px; border-radius: 14px; }
.pa-foto-g span { font-size: 40px; }
.pa-prod b { display: block; font-size: 15px; line-height: 1.3; }
.pa-prod small { display: block; color: var(--gris); font-size: 13px; }
.pa-prod .verde { font-weight: 800; font-size: 14px; }
.pa-prod-acc { grid-column: 1 / -1; display: flex; gap: 8px; }
.pa-saldo { background: var(--noche); color: #fff; border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 6px; }
.pa-saldo > small:first-child { color: var(--gris-claro); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.pa-saldo > b { font-size: 50px; letter-spacing: -.05em; color: var(--verde-claro); line-height: 1.1; }
.pa-saldo p { color: var(--gris-claro); font-size: 14px; }
.pa-saldo p b { color: #fff; }
.pa-retiro { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 18px; }
.pa-retiro select, .pa-retiro input { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(235, 225, 255, .18); background: rgba(235, 225, 255, .06); color: #fff; min-width: 0; outline: 0; }
.pa-retiro select option { color: var(--tinta); }
.pa-retiro .btn { padding: 12px 18px; }
.pa-nota { color: var(--gris-claro); font-size: 12.5px; margin-top: 6px; }
.pa-movs { list-style: none; display: grid; max-height: 420px; overflow-y: auto; }
.pa-movs li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid var(--linea); }
.pa-movs li:first-child { border-top: 0; }
.pa-movs li span b { display: block; font-size: 14px; font-weight: 600; }
.pa-movs li small { color: var(--gris); font-size: 12px; }
.pa-detalle { border: 0; padding: 0; margin: auto; border-radius: 26px; width: calc(100% - 32px); max-width: 520px; }
.pa-detalle::backdrop { background: rgba(13, 11, 20, .7); backdrop-filter: blur(4px); }
.pa-det { position: relative; padding: 30px; }
.pa-det > small { color: var(--gris); font-weight: 700; }
.pa-det h2 { font-size: 26px; margin: 4px 40px 4px 0; }
.pa-det > p { color: var(--gris); }
.pa-linea { list-style: none; margin: 22px 0; display: grid; gap: 0; }
.pa-linea li { position: relative; padding: 0 0 18px 30px; }
.pa-linea li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linea); background: #fff; }
.pa-linea li::after { content: ""; position: absolute; left: 8px; top: 21px; bottom: -1px; width: 2px; background: var(--linea); transform: translateX(-50%); }
.pa-linea li:last-child::after { display: none; }
.pa-linea li.hecho::before { background: var(--verde); border-color: var(--verde); }
.pa-linea li.hecho::after { background: var(--verde); }
.pa-linea li.ahora::before { background: var(--fuego); border-color: var(--fuego); box-shadow: 0 0 0 5px rgba(255, 107, 44, .2); }
.pa-linea li.mal::before { background: #dc2626; border-color: #dc2626; }
.pa-linea b { display: block; font-size: 15px; }
.pa-linea small { color: var(--gris); font-size: 13px; }
.pa-linea li:not(.hecho):not(.ahora):not(.mal) b { color: var(--gris-claro); }
.pag-panel .pie { display: none; }

@media (max-width: 1080px) {
  .pa-kpis { grid-template-columns: 1fr 1fr; }
  .pa-dos, .pa-form { grid-template-columns: 1fr; }
  .pa-resumen { grid-column: 1; grid-row: auto; position: static; }
  .pa-tienda { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .pa { grid-template-columns: 1fr; }
  .pa-lado { position: sticky; z-index: 10; height: auto; flex-direction: row; align-items: center; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--linea); overflow-x: auto; }
  .pa-cuenta, .pa-link { display: none; }
  .pa-nav { display: flex; gap: 6px; }
  .pa-nav button { white-space: nowrap; padding: 9px 12px; font-size: 13.5px; }
  .pa-main { padding: 18px 16px 90px; }
  .pa-fila { grid-template-columns: 1fr auto; row-gap: 6px; }
  .pa-f { display: none; }
  .pa-fila > span:nth-child(3) { grid-column: 1; grid-row: 2; }
  .pa-g { grid-row: 1; grid-column: 2; }
}
@media (max-width: 640px) {
  .pa-grid { grid-template-columns: 1fr; }
  .pa-retiro { grid-template-columns: 1fr 1fr; }
  .pa-retiro .btn { grid-column: 1 / -1; }
  .pa-grafico { gap: 3px; }
  .pa-cab h1 { font-size: 26px; }
}

/* ---------- Sube tu producto: 10 superpoderes del proveedor ---------- */
.centro { text-align: center; }
.poderes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.poder { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border-radius: var(--radio); background: #fff; border: 1px solid var(--linea); overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.poder::after { content: ""; position: absolute; inset: auto -40% -60% auto; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 107, 44, .18), transparent 70%); opacity: 0; transition: opacity .3s; }
.poder:hover { transform: translateY(-6px); border-color: var(--fuego); box-shadow: 0 30px 60px -30px rgba(255, 107, 44, .45); }
.poder:hover::after { opacity: 1; }
.poder-n { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--fuego); }
.poder-ico { font-size: 34px; margin: 12px 0 10px; transition: transform .3s; }
.poder:hover .poder-ico { transform: scale(1.15) rotate(-6deg); }
.poder h3 { font-size: 17.5px; margin-bottom: 8px; }
.poder p { font-size: 14px; color: var(--gris); flex: 1; }
.poder-ir { margin-top: 14px; font-size: 13px; font-weight: 800; color: var(--violeta); }

/* Estudio */
.estudio { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: start; }
.estudio-form { display: grid; gap: 16px; background: #fff; padding: 32px; border-radius: 28px; border: 1px solid var(--linea); }
.estudio-foto { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: stretch; }
.subir-foto { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 18px 12px; border-radius: 18px; border: 2px dashed #d6cfe4; background: var(--fondo); cursor: pointer; transition: border-color .2s, background .2s; }
.subir-foto:hover, .subir-foto:focus-within { border-color: var(--fuego); background: rgba(255, 107, 44, .05); }
.subir-foto input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.subir-ico { font-size: 30px; }
.subir-foto b { font-size: 14px; }
.subir-foto small { font-size: 11.5px; color: var(--gris); line-height: 1.3; }
.iconos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px; }
.iconos button { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--linea); background: var(--fondo); font-size: 20px; cursor: pointer; transition: transform .15s, border-color .15s; }
.iconos button:hover { transform: scale(1.08); }
.iconos button[aria-checked="true"] { border-color: var(--fuego); background: rgba(255, 107, 44, .1); box-shadow: 0 0 0 3px rgba(255, 107, 44, .15); }
.blindado { padding: 16px; border-radius: 16px; background: rgba(139, 92, 255, .07); border: 1px solid rgba(139, 92, 255, .2); }
.blindado input[type=range] { accent-color: var(--violeta); margin-top: 8px; }
.estudio-vista { position: sticky; top: 96px; display: grid; gap: 16px; }
.vista-caja { display: grid; grid-template-columns: 1fr; }
.vista-titulo { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; display: block; }
.prod-vista { max-width: 320px; width: 100%; margin: 0 auto; box-shadow: 0 30px 60px -30px rgba(30, 15, 60, .35); animation: subir 6s ease-in-out infinite; }
.prod-vista:hover { transform: none; }
.foto-real { background: #fff; }
.foto-real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.puntaje { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center; padding: 22px; border-radius: 24px; background: var(--noche); color: #fff; }
.anillo { position: relative; width: 130px; height: 130px; display: grid; place-items: center; text-align: center; }
.anillo svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke: rgba(235, 225, 255, .1); stroke-width: 10; }
.anillo .anillo-valor { stroke: var(--fuego); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: calc(326.7 - 326.7 * var(--p) / 100); transition: stroke-dashoffset .7s cubic-bezier(.2, .7, .2, 1), stroke .4s; }
.anillo[data-nivel="alto"] .anillo-valor { stroke: var(--verde-claro); }
.anillo[data-nivel="bajo"] .anillo-valor { stroke: #f87171; }
.anillo b { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.anillo small { font-size: 12px; color: var(--gris-claro); }
.puntaje-texto > small { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fuego); }
.puntaje-texto h3 { font-size: 22px; margin: 4px 0 10px; }
.puntaje-datos { list-style: none; display: grid; gap: 4px; font-size: 14px; }
.puntaje-datos li { display: flex; justify-content: space-between; gap: 10px; color: var(--gris-claro); }
.puntaje-datos b { color: #fff; }
.puntaje-datos b.verde { color: var(--verde-claro); }
.consejos { grid-column: 1 / -1; list-style: none; display: grid; gap: 8px; border-top: 1px dashed rgba(235, 225, 255, .2); padding-top: 14px; }
.consejos li { font-size: 13.5px; color: #ddd6ea; padding-left: 24px; position: relative; }
.consejos li::before { content: "💡"; position: absolute; left: 0; }
.btn-lanzar { font-size: 17px; padding: 18px 24px; }

/* Kit */
.chips-claros span { background: #fff; color: var(--tinta); border: 1px solid var(--linea); }
.kit-caja { display: grid; gap: 14px; max-width: 460px; width: 100%; margin-left: auto; }
.kit-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--fondo-2); }
.kit-tabs button { flex: 1; border: 0; background: none; padding: 10px 8px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--gris); }
.kit-tabs button[aria-selected="true"] { background: var(--noche); color: #fff; }
.kit-telefono { border-radius: 30px; background: var(--noche); color: #fff; padding: 20px; border: 8px solid #26203a; box-shadow: 0 40px 80px -40px rgba(30, 15, 60, .6); }
.kit-cabeza { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--linea-osc); }
.kit-cabeza b { display: block; font-size: 15px; }
.kit-cabeza small { color: var(--gris-claro); font-size: 12.5px; }
.kit-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, var(--fuego), var(--violeta)); overflow: hidden; flex: none; }
.kit-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kit-texto { white-space: pre-wrap; font: inherit; font-size: 14.5px; line-height: 1.6; color: #e8e2f2; margin-top: 14px; max-height: 340px; overflow-y: auto; }

/* Match y retos */
.red-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.red-caja { padding: 26px; border-radius: 24px; background: var(--noche-2); border: 1px solid var(--linea-osc); }
.red-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.red-cab h3 { font-size: 19px; }
.red-cab small { font-size: 12.5px; font-weight: 700; color: var(--fuego-2); }
.match { list-style: none; display: grid; gap: 10px; }
.match li { display: grid; grid-template-columns: 42px 1fr auto auto; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: rgba(235, 225, 255, .04); border: 1px solid var(--linea-osc); animation: entrar .4s ease; }
.match-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, var(--fuego), var(--violeta)); }
.match-info { min-width: 0; }
.match-info b { display: block; font-size: 15px; }
.match-info small { display: block; font-size: 12.5px; color: var(--gris-claro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-pct { font-weight: 800; color: var(--verde-claro); font-size: 15px; }
.btn-muestra { border: 1px solid rgba(235, 225, 255, .25); background: none; color: #fff; padding: 8px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.btn-muestra:hover { border-color: #fff; }
.btn-muestra.si { background: var(--fuego); border-color: var(--fuego); }
.red-pie { margin-top: 14px; font-size: 13.5px; color: var(--gris-claro); }
.red-pie b { color: #fff; }
.red-caja .campo-titulo { color: var(--gris-claro); }
.red-caja .campo-titulo b { color: #fff; }
.dias { display: flex; gap: 6px; margin: 16px 0; }
.dias button { flex: 1; padding: 9px; border-radius: 12px; border: 1px solid var(--linea-osc); background: none; color: var(--gris-claro); font-weight: 700; cursor: pointer; }
.dias button.activo { background: #fff; color: var(--tinta); }
.reto-res { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reto-res div { padding: 12px 14px; border-radius: 14px; background: rgba(235, 225, 255, .05); }
.reto-res small { display: block; font-size: 12px; color: var(--gris-claro); font-weight: 600; }
.reto-res b { font-size: 19px; letter-spacing: -.03em; }
.reto-res .fuego { color: var(--fuego-2); }
.reto-res .verde-claro { color: var(--verde-claro); }
.reto-res .rojo { color: #f87171; }
.podio { list-style: none; display: grid; gap: 6px; margin-top: 16px; }
.podio li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; font-size: 14px; color: var(--gris-claro); padding: 8px 0; border-top: 1px solid var(--linea-osc); }
.podio li span:first-child { color: #fff; font-weight: 700; }
.podio b { color: var(--verde-claro); min-width: 64px; text-align: right; }

/* Panel en vivo */
.en-vivo-sello { display: inline-flex; gap: 10px; align-items: center; padding: 9px 16px; border-radius: 999px; background: var(--noche); color: #fff; font-size: 13.5px; font-weight: 700; }
.pv { display: grid; gap: 18px; }
.pv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pv-kpis div { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--linea); }
.pv-kpis small { font-size: 13px; color: var(--gris); font-weight: 700; }
.pv-kpis b { display: block; font-size: 32px; letter-spacing: -.04em; line-height: 1.15; }
.pv-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.pv-lado { display: grid; gap: 18px; }
.pv-caja { padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); }
.pv-caja .red-cab small { color: var(--violeta); }
.ciudades { list-style: none; display: grid; gap: 10px; }
.ciudades li { display: grid; grid-template-columns: 120px 1fr 56px; gap: 12px; align-items: center; font-size: 14px; }
.ciudades li b { text-align: right; }
.ciudad-barra { height: 12px; border-radius: 9px; background: var(--fondo-2); overflow: hidden; }
.ciudad-barra i { display: block; height: 100%; width: 0; border-radius: 9px; background: linear-gradient(90deg, var(--fuego), var(--violeta)); transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.ciudades.lleno .ciudad-barra i { width: var(--w); }
.ciudades li:nth-child(2) i { transition-delay: .08s; } .ciudades li:nth-child(3) i { transition-delay: .16s; } .ciudades li:nth-child(4) i { transition-delay: .24s; }
.ciudades li:nth-child(n+5) i { transition-delay: .32s; }
.pv-feed { display: grid; gap: 8px; margin-top: 18px; min-height: 132px; align-content: start; }
.pv-pedido { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--fondo); font-size: 13.5px; animation: entrar .5s ease; }
.pv-pedido > b { margin-left: auto; }
.repo-dias { font-size: 15px; color: var(--gris); }
.repo-dias b { font-size: 40px; letter-spacing: -.05em; color: var(--tinta); }
.repo-barra { height: 10px; border-radius: 9px; background: var(--fondo-2); overflow: hidden; margin: 8px 0 12px; }
.repo-barra span { display: block; height: 100%; border-radius: 9px; background: var(--verde); transition: width .6s, background .4s; }
.repo-barra span[data-nivel="medio"] { background: #f5a524; }
.repo-barra span[data-nivel="bajo"] { background: #ef4444; }
.repo-texto { font-size: 14px; color: var(--gris); margin-bottom: 14px; }
.repo-texto b { color: var(--tinta); }
.pv-adelanto { background: linear-gradient(135deg, rgba(22, 163, 74, .08), rgba(139, 92, 255, .06)), #fff; }
.pv-adelanto input[type=range] { accent-color: var(--verde); }
.ad-monto { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ad-monto b { font-size: 38px; letter-spacing: -.05em; color: var(--verde); }
.ad-monto span { color: var(--gris); font-size: 14px; }

/* Lanzamiento relámpago */
.lanzar { border: 0; padding: 0; background: none; max-width: 520px; width: calc(100% - 32px); margin: auto; }
.lanzar::backdrop { background: rgba(13, 11, 20, .78); backdrop-filter: blur(6px); }
.lanzar-caja { position: relative; background: var(--noche); color: #fff; border-radius: 28px; padding: 34px; border: 1px solid var(--linea-osc); overflow: hidden; }
.lanzar-caja::before { content: ""; position: absolute; width: 360px; height: 360px; top: -180px; right: -120px; border-radius: 50%; background: rgba(255, 107, 44, .3); filter: blur(80px); pointer-events: none; }
.lanzar-caja > :not(.ficha-cerrar) { position: relative; }
.lanzar .vista-titulo { color: var(--fuego); }
.lanzar h3 { font-size: 24px; margin-bottom: 18px; padding-right: 40px; }
.lanzar-contador b { display: block; font-size: 72px; font-weight: 800; letter-spacing: -.06em; line-height: 1; background: linear-gradient(100deg, var(--fuego), #ff4f8b, var(--violeta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lanzar-contador span { color: var(--gris-claro); font-weight: 600; }
.lanzar-pasos { list-style: none; display: grid; gap: 8px; margin: 22px 0 16px; }
.lanzar-pasos li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: #6f6880; transition: color .3s; }
.lanzar-pasos li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.lanzar-pasos li.activo { color: #fff; }
.lanzar-pasos li.activo::before { border-color: var(--fuego); border-top-color: transparent; animation: girar .8s linear infinite; }
.lanzar-pasos li.hecho { color: var(--verde-claro); }
.lanzar-pasos li.hecho::before { content: "✓"; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--verde-claro); border-color: var(--verde-claro); color: var(--noche); }
@keyframes girar { to { transform: rotate(360deg); } }
.lanzar-feed { list-style: none; display: grid; gap: 6px; max-height: 150px; overflow: hidden; }
.lanzar-feed li { font-size: 13.5px; color: #ddd6ea; padding: 8px 12px; border-radius: 10px; background: rgba(235, 225, 255, .05); animation: entrar .4s ease; }
.lanzar-fin { margin-top: 18px; display: grid; gap: 14px; }
.lanzar-fin[hidden] { display: none; }
.lanzar-fin p { font-size: 14.5px; color: var(--gris-claro); }

@media (max-width: 1080px) {
  .poderes { grid-template-columns: repeat(3, 1fr); }
  .estudio, .red-grid, .pv-grid { grid-template-columns: 1fr; }
  .estudio-vista { position: static; }
  .kit-caja { margin: 0 auto; }
}
@media (max-width: 820px) {
  .poderes { grid-template-columns: 1fr 1fr; }
  .pv-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .poderes { grid-template-columns: 1fr; }
  .poder { padding: 22px 20px; }
  .estudio-form { padding: 22px 18px; }
  .estudio-foto { grid-template-columns: 1fr; }
  .iconos { grid-template-columns: repeat(6, 1fr); }
  .puntaje { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .puntaje-texto { width: 100%; }
  .consejos li { text-align: left; }
  .match li { grid-template-columns: 40px 1fr auto; }
  .match .btn-muestra { grid-column: 1 / -1; }
  .red-caja, .pv-caja { padding: 20px 16px; }
  .ciudades li { grid-template-columns: 96px 1fr 44px; font-size: 13px; }
  .pv-kpis b { font-size: 26px; }
  .lanzar-caja { padding: 26px 20px; }
  .lanzar-contador b { font-size: 56px; }
}