/* =============================================================================
   TORMENTA NEGRA OPS · la Tienda de Cash (/juego/tienda)
   -----------------------------------------------------------------------------
   Solo lo de esta página; lo común está en juego.css. La tienda cambia el rojo
   del resto de la web por el verde esmeralda del Cash en los detalles (luces,
   antetítulos, bordes al pasar) para que se sepa de un vistazo que aquí se
   habla de Cash, pero conserva el carbón, las esquinas y los botones dorados
   del juego: es la misma casa, otra habitación.

   Índice: 1. Cabeza   2. Franja   3. Paquetes   4. Pasos   5. En qué se gasta
           6. Compras  7. Preguntas   8. Ventanas   9. Móvil
   ========================================================================== */

:root {
  --esmeralda: #2fdc82;
  --esmeralda-2: #12a85a;
  --esmeralda-luz: rgba(47,220,130,.35);
}
.antetitulo-cash { color: var(--cash-titulo); }

/* 1. CABEZA ------------------------------------------------------------------
   El póster de los trajes míticos (lo que se compra con Cash) con un montón de
   esmeraldas flotando entre el texto y los personajes. */
.cabeza-tienda { min-height: 640px; padding: 150px 0 120px; margin-bottom: 0; align-items: center; border-bottom: 0; }
.cabeza-tienda::after {
  background:
    radial-gradient(520px 420px at 47% 62%, rgba(47,220,130,.16), transparent 70%),
    linear-gradient(90deg, rgba(6,7,9,.96) 0%, rgba(6,7,9,.8) 34%, rgba(6,7,9,.1) 62%, rgba(6,7,9,0) 100%),
    linear-gradient(0deg, var(--carbon) 0%, rgba(13,15,18,.2) 34%, rgba(6,7,9,.55) 100%);
}
.cabeza-tienda h1 { font-size: 88px; line-height: .86; margin: 16px 0 20px; }
.cabeza-tienda h1 .txt-cash { color: var(--cash-titulo); text-shadow: 0 0 40px rgba(47,220,130,.45), 0 4px 24px rgba(0,0,0,.6); }
.cabeza-tienda p { max-width: 540px; font-size: 20px; }
.botones-heroe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.gema-btn { width: 30px; height: 30px; margin-left: -6px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.medios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 30px; list-style: none; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.medios li { display: flex; align-items: center; gap: 8px; }
.medios .ico { width: 18px; height: 18px; color: var(--cash-titulo); }
.medios .wompi { padding-left: 22px; border-left: 1px solid var(--linea-2); color: var(--texto-3); text-transform: none; letter-spacing: .02em; }
.medios .wompi .ico { color: var(--texto-3); }

/* Van abajo, entre el texto y los personajes, como el botín a los pies del equipo:
   nunca encima del título ni del párrafo. */
.gemas-heroe { position: absolute; z-index: 0; left: max(43%, 700px); bottom: 70px; width: 360px; height: 360px; pointer-events: none; }
.gemas-heroe .halo { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(47,220,130,.30), rgba(47,220,130,.08) 45%, transparent 70%); filter: blur(10px); animation: latir 5s ease-in-out infinite; }
.gemas-heroe img { position: absolute; height: auto; aspect-ratio: 1; filter: drop-shadow(0 26px 30px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(47,220,130,.25)); animation: flotar-gema 7s ease-in-out infinite; }
.gemas-heroe img:nth-of-type(1) { width: 52%; left: 25%; top: 26%; --giro: -6deg; }
.gemas-heroe img:nth-of-type(2) { width: 30%; left: 2%; top: 50%; --giro: -22deg; animation-delay: -2s; }
.gemas-heroe img:nth-of-type(3) { width: 27%; left: 70%; top: 12%; --giro: 18deg; animation-delay: -4s; }
.gemas-heroe img:nth-of-type(4) { width: 18%; left: 12%; top: 10%; --giro: -30deg; animation-delay: -5.5s; opacity: .8; filter: blur(1.5px) drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
@keyframes flotar-gema { 0%, 100% { transform: translateY(0) rotate(var(--giro, 0deg)); } 50% { transform: translateY(-14px) rotate(calc(var(--giro, 0deg) + 3deg)); } }
@keyframes latir { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
/* Chispas: puntitos de luz que suben despacio. */
.gemas-heroe i, .escena i, .estallido i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #c9ffe2; box-shadow: 0 0 10px 2px rgba(80,235,150,.8); opacity: 0; animation: chispa 4.5s ease-out infinite; }
.gemas-heroe i:nth-of-type(1) { left: 30%; top: 70%; }
.gemas-heroe i:nth-of-type(2) { left: 55%; top: 64%; animation-delay: -1.2s; }
.gemas-heroe i:nth-of-type(3) { left: 72%; top: 52%; animation-delay: -2.4s; }
.gemas-heroe i:nth-of-type(4) { left: 20%; top: 45%; animation-delay: -3.1s; }
.gemas-heroe i:nth-of-type(5) { left: 64%; top: 30%; animation-delay: -.6s; }
.gemas-heroe i:nth-of-type(6) { left: 42%; top: 22%; animation-delay: -3.8s; }
@keyframes chispa { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(1.2); } }

/* 2. FRANJA: tu cuenta, tu saldo y el estado de la tienda (como la de la portada) */
.franja-tienda {
  position: relative; z-index: 3; display: grid; grid-template-columns: 1.1fr 1.2fr 1fr; margin-top: -58px;
  background: linear-gradient(180deg, rgba(20,22,27,.97), rgba(12,13,16,.98)); border: 1px solid var(--linea-2); border-top: 2px solid var(--esmeralda-2);
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
}
.franja-tienda .celda { display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 16px 26px; min-width: 0; }
.franja-tienda .celda + .celda { border-left: 1px solid var(--linea); }
.franja-tienda .celda > div { min-width: 0; }
.franja-tienda small { display: block; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 3px; }
.franja-tienda b { display: block; font-size: 21px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.franja-tienda .correo { display: block; font-size: 14px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.franja-tienda .avatar { width: 46px; height: 46px; font-size: 23px; }
.franja-tienda .vacio-avatar { background: rgba(255,255,255,.06); color: var(--texto-3); }
.franja-tienda .vacio-avatar .ico { width: 22px; height: 22px; }
.franja-tienda .saldos { display: flex; flex-wrap: wrap; gap: 10px 8px; margin-top: 6px; }
.franja-tienda .botones-franja { display: flex; flex-wrap: wrap; gap: 10px; }
.texto-esqueleto { width: 160px; height: 22px; }

/* 3. PAQUETES ------------------------------------------------------------------
   Cada paquete es una tarjeta de lujo: escena con el montón de esmeraldas
   (1, 2, 3, 4, 5 y 7 según el tamaño), el rango del paquete, la cifra grande, el
   regalo en dorado, lo que recibes y el botón dorado de comprar. Los dos más
   grandes (.de-lujo) llevan el canto dorado y el recomendado (.elegido, el
   Sargento) el sello «El más elegido». Seis paquetes: en el ordenador, tres y
   tres; en el teléfono, uno por fila. */
.seccion-paquetes { padding-top: 88px; }
.seccion-paquetes .titulo-sec { align-items: flex-end; }
.paquetes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; align-items: stretch; padding-top: 6px; }
.paquete {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; padding: 0 18px 18px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(47,220,130,.10), transparent 60%),
    linear-gradient(180deg, #171a1f, #0e1013 70%);
  border: 1px solid var(--linea-2); transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
/* Canto de color arriba: verde; en los de lujo, oro. */
.paquete::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: linear-gradient(90deg, transparent, var(--esmeralda), transparent); z-index: 3; }
.paquete.de-lujo { border-color: rgba(255,196,70,.35); background: radial-gradient(120% 60% at 50% 0%, rgba(255,196,70,.10), transparent 60%), radial-gradient(90% 50% at 50% 12%, rgba(47,220,130,.12), transparent 70%), linear-gradient(180deg, #1b1a17, #0f0f10 70%); }
.paquete.de-lujo::before { background: linear-gradient(90deg, transparent, var(--oro), #fff2c4, var(--oro), transparent); }
.paquete.de-lujo::after { content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 2; --c: var(--oro); --l: 18px; --g: 2px;
  background:
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--g) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--g) var(--l) no-repeat; }
.paquete:hover { transform: translateY(-6px); border-color: rgba(47,220,130,.55); box-shadow: 0 24px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(47,220,130,.2), 0 0 40px rgba(47,220,130,.12); }
.paquete.de-lujo:hover { border-color: rgba(255,196,70,.7); box-shadow: 0 24px 50px rgba(0,0,0,.55), 0 0 40px rgba(255,196,70,.15); }
.js .paquete.aparece.visto { transition: opacity .8s ease, transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; }
.paquete.aparece:nth-child(2) { transition-delay: .06s; } .paquete.aparece:nth-child(3) { transition-delay: .12s; }
.paquete.aparece:nth-child(4) { transition-delay: .18s; } .paquete.aparece:nth-child(5) { transition-delay: .24s; }
.paquete.aparece:nth-child(6) { transition-delay: .30s; }
.paquete.visto { transition-delay: 0s !important; }

.escena { position: relative; height: 190px; margin: 0 -18px 4px; overflow: hidden; }
.escena .luz { position: absolute; left: 50%; top: 56%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(47,220,130,.42), rgba(47,220,130,.10) 42%, transparent 68%); filter: blur(6px); }
.nivel-5 .escena .luz, .nivel-6 .escena .luz { width: 100%; background: radial-gradient(circle, rgba(60,235,150,.5), rgba(255,196,70,.10) 45%, transparent 70%); }
.escena .suelo { position: absolute; left: 14%; right: 14%; bottom: 14px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); z-index: 1; }
.escena img { position: absolute; aspect-ratio: 1; height: auto; filter: drop-shadow(0 14px 14px rgba(0,0,0,.6)); animation: flotar-gema 6s ease-in-out infinite; transform: rotate(var(--giro, 0deg)); }
.paquete:hover .escena img { animation-duration: 3s; }
.escena i:nth-of-type(1) { left: 22%; top: 72%; }
.escena i:nth-of-type(2) { left: 70%; top: 66%; animation-delay: -1.6s; }
.escena i:nth-of-type(3) { left: 48%; top: 40%; animation-delay: -3s; }

.cab-paquete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rango { font-size: 14px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--texto-2); }
.de-lujo .rango { color: var(--oro-claro); }
.regalo { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #1c1102; background: linear-gradient(180deg, #ffe39a, #f0ad2c); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.cinta { position: absolute; top: 14px; left: 0; z-index: 4; display: inline-flex; align-items: center; height: 24px; padding: 0 12px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, var(--carmesi), #ff4a55); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.cifra { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cifra img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.cifra b { font-size: 46px; line-height: .9; letter-spacing: .01em; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.cifra small { align-self: flex-end; margin-bottom: 4px; font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cash-titulo); }
.extra { min-height: 26px; margin-top: 6px; font-size: 17px; }
.mas-regalo { color: var(--oro-titulo); font-weight: 700; text-shadow: 0 0 18px rgba(255,196,70,.3); }
.sin-regalo { color: var(--texto-3); font-size: 15.5px; }
.recibes { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 12px 0 0; padding: 10px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.recibes dt { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3); }
.recibes dd { font-size: 19px; color: var(--cash-titulo); white-space: nowrap; }
.alcanza { flex: 1; margin: 12px 0 16px; font-size: 15px; line-height: 1.3; color: #d3d6dc; }
.alcanza small { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 3px; }
.bc-paquete { min-width: 0; }
.bc-paquete .bc-etq { font-size: 19px; padding: 0 6px 0 14px; }
.bc-paquete .bc-pozo { min-width: 54%; font-size: 22px; padding: 0 14px 0 10px; justify-content: center; }
/* Apagado (tienda en pausa): el candado al lado de la palabra y el precio en claro.
   El rojo de «no te alcanza» del juego aquí diría algo que no es verdad. */
.bc-paquete.apagado .bc-etq { flex-direction: row; gap: 6px; font-size: 16px; }
.bc-paquete.apagado .bc-etq::before { width: 16px; height: 16px; margin: 0; }
.bc-paquete.apagado .bc-pozo { color: #cfd2d8; }
.esqueleto-paquete { min-height: 470px; border: 1px solid var(--linea); }

/* El recomendado: borde esmeralda que late suave y el sello «El más elegido»
   montado sobre el canto de arriba, como la escarapela de un cartel de feria. */
.paquete.elegido { border-color: rgba(47,220,130,.6); box-shadow: 0 0 0 1px rgba(47,220,130,.25), 0 18px 46px rgba(0,0,0,.5), 0 0 46px rgba(47,220,130,.14); }
.paquete.elegido::before { height: 4px; background: linear-gradient(90deg, transparent, var(--esmeralda), #d9ffe9, var(--esmeralda), transparent); }
.sello-elegido {
  position: absolute; z-index: 5; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 16px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: #04210f;
  background: linear-gradient(180deg, #8dffc0, var(--esmeralda) 55%, var(--esmeralda-2)); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.sello-elegido .ico { width: 15px; height: 15px; }

/* Primera recarga x2 dentro de cada paquete: el total doblado en grande y una
   línea con el sello «x2». Sin sesión, la línea anuncia lo que daría. */
.recibes.doble { border-bottom-color: rgba(47,220,130,.35); background: linear-gradient(90deg, rgba(47,220,130,.10), transparent 80%); margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px; }
.recibes.doble dd { font-size: 22px; font-weight: 700; color: var(--cash-titulo); text-shadow: 0 0 18px rgba(47,220,130,.35); }
.recibes.doble s { margin-right: 8px; font-size: 15px; font-weight: 600; color: var(--texto-3); text-decoration-color: rgba(255,92,74,.8); text-decoration-thickness: 2px; }
.nota-x2 { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14.5px; font-weight: 700; letter-spacing: .04em; color: var(--cash-titulo); }
.nota-x2 b, .x2-mini { display: inline-grid; place-items: center; flex: none; height: 22px; padding: 0 7px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: #04210f; background: linear-gradient(180deg, #8dffc0, var(--esmeralda)); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.nota-x2.general { color: var(--texto-2); font-weight: 600; }
.x2-mini { height: 18px; margin-left: 6px; padding: 0 5px; font-size: 12px; vertical-align: 2px; }
.resultado-x2 { justify-content: center; margin-top: 4px !important; color: var(--cash-titulo) !important; }
.ventana-texto.chico { font-size: 14px; color: var(--texto-3); margin-top: 8px; }

/* La franja «¡Tu primera recarga vale el DOBLE!»: encima de los paquetes, con un
   sello x2 grande en esmeralda y el canto dorado de los paquetes de lujo. */
.franja-doble {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 24px; margin-bottom: 30px; padding: 20px 26px;
  background:
    radial-gradient(380px 160px at 6% 50%, rgba(47,220,130,.26), transparent 70%),
    repeating-linear-gradient(-55deg, rgba(47,220,130,.05) 0 14px, transparent 14px 30px),
    linear-gradient(90deg, rgba(14,40,26,.96), rgba(13,15,18,.96) 70%);
  border: 1px solid rgba(47,220,130,.45); border-left: 4px solid var(--esmeralda);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 0 40px rgba(47,220,130,.06);
}
.franja-doble[hidden] { display: none; }
.franja-doble::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--esmeralda), var(--oro) 60%, transparent); }
.x2-sello {
  display: grid; place-items: center; align-content: center; width: 96px; height: 96px; flex: none; color: #04210f;
  background: radial-gradient(circle at 35% 30%, #c9ffe0, var(--esmeralda) 45%, var(--esmeralda-2) 80%);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  filter: drop-shadow(0 0 18px rgba(47,220,130,.55));
  animation: latir 3.2s ease-in-out infinite;
}
.x2-sello b { font-size: 46px; line-height: .8; letter-spacing: -.02em; }
.x2-sello small { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; margin-top: 4px; }
.x2-texto { flex: 1; min-width: 0; }
.franja-doble .sello { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.franja-doble h3 { font-size: 34px; line-height: 1; text-transform: uppercase; margin-top: 4px; color: #fff; }
.franja-doble h3 em { font-style: normal; color: var(--cash-titulo); text-shadow: 0 0 26px rgba(47,220,130,.55); }
.franja-doble p { font-size: 16px; color: var(--texto-2); margin-top: 6px; max-width: 860px; }
.franja-doble .x2-letra { font-size: 13.5px; color: var(--texto-3); margin-top: 6px; }
.franja-doble .x2-letra a { color: var(--texto-2); border-bottom: 1px solid var(--esmeralda-2); }
.x2-botones { display: grid; gap: 10px; flex: none; }

/* Aviso de estado de la tienda: local, próximamente, precios de ejemplo, pruebas. */
.aviso-tienda {
  display: flex; align-items: center; gap: 20px; margin-bottom: 22px; padding: 18px 22px;
  background: linear-gradient(90deg, rgba(255,196,70,.08), rgba(255,196,70,.02) 60%, transparent), rgba(12,13,16,.9);
  border: 1px solid rgba(255,196,70,.28); border-left: 3px solid var(--oro);
}
.aviso-tienda[hidden] { display: none; }
.aviso-tienda .icono { display: grid; place-items: center; width: 52px; height: 52px; flex: none; color: var(--oro); background: rgba(255,196,70,.08); box-shadow: inset 0 0 0 1px rgba(255,196,70,.35); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.aviso-tienda .icono .ico { width: 26px; height: 26px; }
.aviso-tienda .sello { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); margin-bottom: 2px; }
.aviso-tienda h3 { font-size: 22px; line-height: 1.1; text-transform: uppercase; }
.aviso-tienda p { font-size: 15.5px; color: var(--texto-2); max-width: 900px; margin-top: 3px; }

/* 4. PASOS ---------------------------------------------------------------------- */
.pasos-tienda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; counter-reset: paso; }
.pasos-tienda li { padding: 28px 26px 26px; overflow: hidden; }
.pasos-tienda .n { position: absolute; right: 18px; top: 6px; font-size: 84px; line-height: 1; font-weight: 700; color: rgba(255,255,255,.04); }
.pasos-tienda .ico { width: 36px; height: 36px; color: var(--cash-titulo); }
.pasos-tienda .gema-paso { width: 44px; height: 44px; margin: -4px 0 -4px -4px; }
.pasos-tienda h3 { font-size: 25px; text-transform: uppercase; margin: 16px 0 8px; }
.pasos-tienda p { font-size: 16px; color: var(--texto-2); line-height: 1.45; }

/* 5. EN QUÉ SE GASTA --------------------------------------------------------------- */
.en-que { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.en-que-t { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 270px; padding: 20px 22px; background: radial-gradient(90% 70% at 70% 30%, rgba(255,255,255,.05), transparent 60%), linear-gradient(180deg, #15171c, #0d0e11); border: 1px solid var(--linea-2); transition: border-color .25s, transform .3s; }
.en-que-t:hover { border-color: rgba(47,220,130,.5); transform: translateY(-4px); }
.en-que-t .foto { position: absolute; z-index: -1; right: 0; top: 0; width: 62%; height: 72%; display: flex; align-items: center; justify-content: center; }
.en-que-t .foto img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0,0,0,.6)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.en-que-t .foto.figura { width: 38%; height: 96%; right: 2%; top: 2%; }
.en-que-t .foto.ancha { width: 96%; height: 62%; right: -16%; top: 4%; }
.en-que-t:hover .foto img { transform: scale(1.06); }
.en-que-t::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,11,14,.96) 12%, rgba(10,11,14,.4) 50%, transparent 75%); }
.en-que-t .dura { align-self: flex-start; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cash-titulo); }
.en-que-t b { font-size: 24px; line-height: 1.05; text-transform: uppercase; margin-top: 4px; }
.en-que-t small { font-size: 15px; color: var(--texto-2); margin-top: 4px; }
.en-que-t .desde { display: flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.en-que-t .sufijo { margin-left: 6px; }

/* 6. COMPRAS -------------------------------------------------------------------------- */
.tabla-compras td.txt-cash { color: var(--cash-titulo); font-weight: 700; }
.tabla-compras td.ref { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.estado { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado.ok { color: var(--cash); } .estado.mal { color: var(--no-alcanza); } .estado.espera { color: var(--oro); } .estado.apagada { color: var(--texto-3); }

/* 7. PREGUNTAS ------------------------------------------------------------------------- */
/* En dos columnas tipo muro: al abrir una pregunta no se descuadra la de al lado. */
/* Una sola columna: en dos columnas, al abrir una pregunta la otra
   columna se descolocaba. */
.preguntas { max-width: none; }
.preguntas details { padding: 0; break-inside: avoid; margin-bottom: 14px; }
.preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; font-size: 19px; font-weight: 700; cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary .ico { width: 14px; height: 14px; color: var(--cash-titulo); transition: transform .25s; }
.preguntas details[open] summary .ico { transform: rotate(180deg); }
.preguntas summary:hover { color: #fff; background: rgba(47,220,130,.04); }
.preguntas details p { padding: 0 22px 20px; font-size: 16px; line-height: 1.5; color: var(--texto-2); }
.preguntas details a { color: #fff; border-bottom: 1px solid var(--esmeralda-2); }

/* 8. VENTANAS (dialog) ----------------------------------------------------------------- */
.ventana { padding: 0; border: 0; background: transparent; color: var(--texto); width: min(520px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: visible; }
.ventana::backdrop { background: rgba(3,4,6,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ventana[open] { animation: entrar-ventana .28s cubic-bezier(.2,.8,.2,1); }
@keyframes entrar-ventana { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ventana-marco { padding: 28px 28px 24px; background: radial-gradient(90% 50% at 50% 0%, rgba(47,220,130,.10), transparent 60%), linear-gradient(180deg, #181a1f, #0e1013); border-color: var(--linea-2); max-height: calc(100vh - 24px); overflow: auto; }
.cerrar-ventana { position: absolute; right: 10px; top: 10px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; color: var(--texto-3); }
.cerrar-ventana:hover { color: #fff; }
.ventana-cab h2, .resultado h2 { font-size: 34px; line-height: 1; text-transform: uppercase; margin-top: 8px; }
.ventana-texto { margin-top: 14px; font-size: 16px; color: var(--texto-2); line-height: 1.45; }
.ventana-botones { display: grid; gap: 10px; margin-top: 20px; }
.ventana-botones.dos { grid-template-columns: 1fr 1fr; }
.ventana .aviso { margin-top: 14px; }
.resumen-compra { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; margin-top: 18px; padding: 14px 16px 14px 0; background: rgba(0,0,0,.25); border: 1px solid var(--linea); }
.escena.mini { height: 130px; margin: 0; }
.resumen-compra .lista-datos { font-size: 16px; gap: 6px 14px; align-items: baseline; }
.resumen-compra dd.grande { font-size: 22px; font-weight: 700; }
.resumen-compra dd small { font-size: 13px; color: var(--texto-3); }
button.bc { border: 0; padding: 0; background: none; font: inherit; }
button.bc[disabled] { cursor: progress; }
.bc .cargando { width: 20px; height: 20px; border-color: rgba(34,17,2,.25); border-top-color: #221102; }

.resultado { text-align: center; padding-top: 6px; }
.resultado p { margin-top: 10px; font-size: 16px; color: var(--texto-2); line-height: 1.45; }
.resultado .ref { font-size: 13.5px; color: var(--texto-3); word-break: break-all; }
.resultado .ref b { color: var(--texto-2); }
.resultado .ventana-botones { margin-top: 22px; }
.resultado .antetitulo { justify-content: center; }
.resultado .antetitulo::before { display: none; }
.icono-res { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; }
.icono-res .ico { width: 30px; height: 30px; }
.resultado.mal .icono-res { color: var(--no-alcanza); background: rgba(255,92,74,.1); box-shadow: inset 0 0 0 1px rgba(255,92,74,.4); }
.resultado.espera .icono-res { color: var(--oro); background: rgba(255,196,70,.08); box-shadow: inset 0 0 0 1px rgba(255,196,70,.4); }
.cargando-pago { padding: 26px 0 12px; }
.cargando.grande { width: 54px; height: 54px; border-width: 3px; border-top-color: var(--esmeralda); margin-bottom: 18px; }
/* El «+X Cash» del pago aprobado: un estallido de esmeraldas con rayos detrás. */
.estallido { position: relative; height: 200px; margin: -8px -28px 0; overflow: hidden; }
.estallido .rayos { position: absolute; left: 50%; top: 55%; width: 420px; height: 420px; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(80,235,150,.16) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%); mask: radial-gradient(circle, #000 20%, transparent 62%); animation: girar-rayos 18s linear infinite; }
@keyframes girar-rayos { to { transform: translate(-50%, -50%) rotate(360deg); } }
.estallido img { position: absolute; aspect-ratio: 1; height: auto; filter: drop-shadow(0 14px 16px rgba(0,0,0,.6)); animation: flotar-gema 5s ease-in-out infinite, aparecer-gema .7s cubic-bezier(.2,1.4,.4,1) both; transform: rotate(var(--giro, 0deg)); }
@keyframes aparecer-gema { from { opacity: 0; scale: .3; } }
.estallido i:nth-of-type(1) { left: 20%; top: 70%; } .estallido i:nth-of-type(2) { left: 78%; top: 62%; animation-delay: -1s; }
.estallido i:nth-of-type(3) { left: 50%; top: 30%; animation-delay: -2s; } .estallido i:nth-of-type(4) { left: 34%; top: 20%; animation-delay: -3s; }
.estallido i:nth-of-type(5) { left: 66%; top: 18%; animation-delay: -3.6s; } .estallido i:nth-of-type(6) { left: 10%; top: 40%; animation-delay: -.5s; }
.mas-cash { font-size: 58px !important; color: var(--cash-titulo); text-shadow: 0 0 40px rgba(47,220,130,.45); }
.mas-cash .num { color: #fff; }
.saldo-nuevo { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3) !important; }

/* 9. MÓVIL --------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .paquetes { gap: 24px 12px; }
  .paquete { padding: 0 14px 14px; }
  .escena { margin: 0 -14px 4px; }
  .cifra b { font-size: 40px; }
  .bc-paquete .bc-etq { font-size: 17px; padding: 0 4px 0 12px; }
  .bc-paquete .bc-pozo { font-size: 20px; }
  .franja-doble { flex-wrap: wrap; }
  .x2-botones { grid-template-columns: 1fr 1fr; width: 100%; }
}
@media (max-width: 1180px) {
  .cabeza-tienda h1 { font-size: 72px; }
  .gemas-heroe { left: auto; right: 4%; bottom: 80px; width: 300px; height: 300px; }
  .en-que { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .franja-tienda { grid-template-columns: 1fr 1fr; }
  .franja-tienda .celda:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--linea); min-height: 64px; }
}
@media (max-width: 760px) {
  .cabeza-tienda { min-height: 0; padding: 96px 0 96px; }
  .cabeza-tienda::after { background: radial-gradient(300px 260px at 80% 30%, rgba(47,220,130,.18), transparent 70%), linear-gradient(0deg, var(--carbon) 0%, rgba(6,7,9,.6) 40%, rgba(6,7,9,.55) 100%), linear-gradient(90deg, rgba(6,7,9,.85), rgba(6,7,9,.3)); }
  .cabeza-tienda h1 { font-size: 50px; }
  .cabeza-tienda p { font-size: 16.5px; }
  .gemas-heroe { left: auto; right: -34px; top: 84px; bottom: auto; width: 190px; height: 190px; opacity: .9; }
  .botones-heroe { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .botones-heroe .btn { width: 100%; }
  .medios { gap: 6px 14px; font-size: 13.5px; }
  .medios .wompi { flex-basis: 100%; padding-left: 0; border-left: 0; }
  .franja-tienda { grid-template-columns: 1fr; margin-top: -60px; }
  .franja-tienda .celda { min-height: 0; padding: 14px 16px; }
  .franja-tienda .celda + .celda { border-left: 0; border-top: 1px solid var(--linea); }
  .franja-tienda .celda:nth-child(3) { min-height: 0; }
  .franja-tienda .botones-franja { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .seccion-paquetes { padding-top: 60px; }
  .aviso-tienda { align-items: flex-start; gap: 14px; padding: 16px; }
  .aviso-tienda .icono { width: 42px; height: 42px; }
  .aviso-tienda h3 { font-size: 19px; }
  /* En el teléfono cada paquete es una fila: esmeraldas a la izquierda, datos a
     la derecha y el botón debajo a todo lo ancho. Cinco tarjetas altas una
     encima de otra serían cinco pantallas de scroll para comparar precios. */
  .paquetes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .paquetes .paquete.elegido { margin-top: 12px; }
  .paquete { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-areas: "escena cab" "escena cifra" "escena extra" "recibes recibes" "x2 x2" "alcanza alcanza" "boton boton"; column-gap: 12px; padding: 12px 14px 14px; }
  .paquete .nota-x2 { grid-area: x2; font-size: 14px; }
  .sello-elegido { left: 14px; transform: none; height: 26px; font-size: 12px; padding: 0 14px; }
  .paquete.elegido .cab-paquete { margin-top: 10px; }
  .recibes.doble dd { font-size: 20px; }
  .franja-doble { gap: 14px 16px; padding: 16px; margin-bottom: 18px; align-items: flex-start; }
  .x2-sello { width: 64px; height: 64px; }
  .x2-sello b { font-size: 30px; }
  .x2-sello small { font-size: 10px; letter-spacing: .16em; }
  .x2-texto { flex-basis: calc(100% - 80px); }
  .franja-doble h3 { font-size: 24px; }
  .franja-doble p { font-size: 15px; }
  .paquete .escena { grid-area: escena; height: 116px; margin: 0; align-self: center; }
  .paquete .cab-paquete { grid-area: cab; }
  .paquete .cifra { grid-area: cifra; margin-top: 4px; }
  .paquete .extra { grid-area: extra; margin-top: 2px; min-height: 0; font-size: 15.5px; }
  .paquete .recibes { grid-area: recibes; margin-top: 10px; }
  .paquete .alcanza { grid-area: alcanza; margin: 10px 0 12px; }
  .paquete .bc { grid-area: boton; }
  .cinta { top: auto; bottom: auto; left: auto; right: 0; top: 0; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%); font-size: 11px; height: 22px; }
  .paquete .cab-paquete { padding-right: 0; }
  .paquete:has(.cinta) .cab-paquete { margin-top: 18px; }
  .cifra img { width: 32px; height: 32px; }
  .cifra b { font-size: 36px; }
  .bc-paquete .bc-etq { font-size: 19px; }
  .bc-paquete .bc-pozo { font-size: 22px; min-width: 50%; }
  .esqueleto-paquete { min-height: 250px; }
  .pasos-tienda { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pasos-tienda li { padding: 22px 20px; }
  .en-que { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .en-que-t { min-height: 200px; }
  .preguntas { columns: 1; }
  .preguntas details { margin-bottom: 10px; }
  .preguntas summary { font-size: 17px; padding: 16px 18px; }
  .preguntas details p { padding: 0 18px 18px; }
  .tabla-compras th:nth-child(6), .tabla-compras td:nth-child(6) { display: none; }
  .ventana-marco { padding: 24px 18px 18px; }
  .ventana-cab h2, .resultado h2 { font-size: 28px; }
  .resumen-compra { grid-template-columns: 96px 1fr; gap: 12px; }
  .escena.mini { height: 96px; }
  .ventana-botones.dos { grid-template-columns: 1fr; }
  .mas-cash { font-size: 46px !important; }
  .estallido { height: 160px; margin: -8px -18px 0; }
}
/* El texto por encima de las esmeraldas (que a su vez van por encima del degradado de la cabeza). */
.cabeza-tienda > .env { position: relative; z-index: 1; }
@media (max-width: 760px) {
  /* En el teléfono las esmeraldas del póster quedan detrás del título: más tenues. */
  .gemas-heroe { opacity: .5; }
  #marcaEjemplo { align-self: flex-start; }
  .en-que-t .foto { width: 52%; height: 64%; }
  .en-que-t .foto.figura { width: 34%; height: 96%; }
}