/*
  El probador de uñas de mise.ar (28/10): la parte que se usa de /probador/.
  Va dentro de una sección hueso como una isla oscura (los colores salen de /v2/seo.css).
  La moneda de MISE gira en 3D (29/10): el robot adelante, la M atrás. El revelado "se
  revela" como una foto en el cuarto oscuro. Sin movimiento si el sistema lo pide
  (prefers-reduced-motion). Sin píldoras y sin luces de color detrás de los botones.
*/
.prb-afuera { display: none; margin: 30px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--texto-3); }
html[data-pais=UY] .prb-afuera, html[data-pais=CL] .prb-afuera { display: block; }

.prb { position: relative; max-width: 940px; min-height: 240px; margin: 34px 0 0; padding: clamp(22px, 4vw, 44px); background: var(--negro) url(/v2/img/fibras-negro.webp) 0 0 / 1000px auto repeat; border: 1px solid var(--linea); border-radius: 6px; box-shadow: 0 34px 70px -38px rgb(11 9 8 / 0.6); }
.prb [hidden] { display: none !important; }
.prb-paso { max-width: none; }
.prb-rot { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-3); }
.prb-rot b { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1px solid var(--violeta); border-radius: 50%; font-size: 11px; letter-spacing: 0; color: var(--violeta-claro); font-weight: 500; }
.prb-txt { max-width: 60ch; margin: 0 0 22px; font-size: 15.5px; color: var(--texto-2); }
.prb-txt b { color: var(--texto); }

/* ------------------------------------------------ LA MONEDA DE MISE, EN 3D
   Dos caras (imágenes): adelante el robot, atrás la M. Entre ellas, un canto de
   12 discos apilados con un rayado plateado: de frente no se ven; cuando la moneda
   gira, forman el costado. Los discos van SIEMPRE por dentro de las caras y antes
   que ellas en el HTML: si un disco queda en el mismo plano que una cara, el
   navegador lo dibuja encima y la tapa (pasó el 29/10: en vez de la M se veía un
   disco rayado). Gira sola, frena en cada cara y muestra las dos. El tamaño sale de --d. */
.mcoin { --d: 168px; --t: calc(var(--d) * 0.08); position: relative; display: inline-block; flex: none; width: var(--d); height: var(--d); perspective: calc(var(--d) * 5); }
.mcoin__g { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(9deg) rotateY(-24deg); animation: mcoinGira 9s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
.mcoin__g > * { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.mcoin__c, .mcoin__x { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.mcoin__c { transform: translateZ(calc(var(--t) / 2)); }
.mcoin__x { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
.mcoin__g i { --k: 0; transform: translateZ(calc(var(--t) * (var(--k) - 0.5) * 0.84)); background: repeating-conic-gradient(#C9CBD0 0 2.5deg, #8D9096 2.5deg 5deg); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }
.mcoin__g i:nth-of-type(2) { --k: 0.0909; } .mcoin__g i:nth-of-type(3) { --k: 0.1818; } .mcoin__g i:nth-of-type(4) { --k: 0.2727; }
.mcoin__g i:nth-of-type(5) { --k: 0.3636; } .mcoin__g i:nth-of-type(6) { --k: 0.4545; } .mcoin__g i:nth-of-type(7) { --k: 0.5454; }
.mcoin__g i:nth-of-type(8) { --k: 0.6363; } .mcoin__g i:nth-of-type(9) { --k: 0.7272; } .mcoin__g i:nth-of-type(10) { --k: 0.8181; }
.mcoin__g i:nth-of-type(11) { --k: 0.909; } .mcoin__g i:nth-of-type(12) { --k: 1; }
/* La sombra en el piso: se angosta cuando la moneda queda de canto. */
.mcoin__s { position: absolute; left: 16%; right: 16%; bottom: -13%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.42), transparent); animation: mcoinSombra 9s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
@keyframes mcoinGira {
  0%, 30% { transform: rotateX(9deg) rotateY(-24deg); }
  50%, 80% { transform: rotateX(9deg) rotateY(156deg); }
  100% { transform: rotateX(9deg) rotateY(336deg); }
}
@keyframes mcoinSombra {
  0%, 30%, 50%, 80%, 100% { transform: scaleX(1); opacity: 1; }
  40%, 90% { transform: scaleX(0.4); opacity: 0.7; }
}
.mcoin--grande { --d: clamp(150px, 19vw, 196px); }
.mcoin--chica { --d: 64px; }
.mcoin--chica .mcoin__s { display: none; }
/* Cuando entra o sale una moneda, la del saldo da un saltito. */
.mcoin.is-salta { animation: mcoinSalta 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes mcoinSalta { 40% { transform: translateY(-8px) scale(1.08); } }

/* ------------------------------------------------ "PROBAR MIS UÑAS"
   Como una uña recién pintada: el violeta de MISE con el brillo del esmalte arriba
   y un reflejo que cruza cada tanto. Ícono de uñas (hecho con Magnific) en su
   muestrita. Sin luz de color detrás; al pasar, sube apenas. */
.unaCta { position: relative; display: inline-flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 24px 10px 10px; border-radius: 6px; background: linear-gradient(180deg, #9567FF 0%, #814DFA 48%, #6C3CE8 100%); color: #FFFFFF; font-family: var(--sans); font-size: 17px; font-weight: 700; line-height: 1.1; letter-spacing: -0.005em; text-decoration: none; overflow: hidden; isolation: isolate; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.32), inset 0 -2px 0 rgb(40 14 110 / 0.28), 0 12px 22px -16px rgb(11 9 8 / 0.7); transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1); }
.unaCta::before { content: ""; position: absolute; inset: 0 0 46% 0; z-index: -1; border-radius: 6px 6px 40% 40% / 6px 6px 14px 14px; background: linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0)); }
.unaCta::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 36%, rgb(255 255 255 / 0.42) 49%, rgb(255 255 255 / 0.1) 55%, transparent 64%); transform: translateX(-130%); animation: unaBrillo 5.4s ease-in-out infinite; }
@keyframes unaBrillo { 0%, 66% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }
.unaCta__ic { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 4px; background: rgb(255 255 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.24); }
.unaCta__ic::before { content: ""; width: 30px; height: 30px; background: #FFFFFF; -webkit-mask: url(/probador/icono-una.png) center / contain no-repeat; mask: url(/probador/icono-una.png) center / contain no-repeat; transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.3, 1); }
.unaCta__t { white-space: nowrap; }
.unaCta__fl { margin-left: 6px; font-size: 19px; transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1); }
.unaCta:hover { transform: translateY(-2px); }
.unaCta:hover .unaCta__fl { transform: translateX(5px); }
.unaCta:hover .unaCta__ic::before { transform: rotate(-8deg) scale(1.06); }
.unaCta:active { transform: translateY(0); }
.unaCta:focus-visible { outline: 2px solid var(--violeta-claro); outline-offset: 3px; }
.botones:has(.unaCta) { align-items: center; }

/* ------------------------------------------------ Entrar: los datos y la moneda */
.prb-entrada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 250px); gap: clamp(24px, 4vw, 48px); align-items: center; }
.prb-entrada__moneda { display: grid; justify-items: center; text-align: center; padding: 20px 0 6px; }
.prb-entrada__moneda .mcoin { margin: 0 0 30px; }
.prb-entrada__moneda .prb-rot { justify-content: center; margin: 0 0 6px; }
.prb-moneda__t { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--texto); }
.prb-moneda__p { max-width: 30ch; margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.prb-moneda__p b { color: var(--texto); font-weight: 700; }

/* Los datos */
.prb-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin: 0 0 24px; }
.prb-campo { display: grid; gap: 8px; }
.prb-campo > span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-3); }
.prb-campo input { width: 100%; min-height: 50px; padding: 12px 14px; background: var(--negro-1); border: 1px solid var(--linea-viva); border-radius: 3px; color: var(--texto); font: 500 16px/1.3 var(--sans); transition: border-color 0.2s, box-shadow 0.2s; }
.prb-campo input::placeholder { color: var(--texto-3); opacity: 0.7; }
.prb-campo input:focus { outline: none; border-color: var(--violeta-claro); box-shadow: 0 0 0 3px rgb(129 77 250 / 0.28); }
.prb-campo--codigo { max-width: 240px; margin: 0 0 24px; }
.prb-campo--codigo input { font-family: var(--mono); font-size: 24px; font-weight: 500; letter-spacing: 0.42em; text-align: center; }

.prb-error { max-width: 60ch; margin: 0 0 18px; padding: 11px 14px; border-left: 2px solid #E5484D; background: rgb(229 72 77 / 0.1); font-size: 14.5px; color: var(--texto); }
.prb-aviso { margin: 0 0 24px; padding: 12px 16px; border-left: 2px solid var(--violeta); background: rgb(129 77 250 / 0.1); font-size: 15px; color: var(--texto); }
.prb-aviso--bien { border-left-color: #3DD68C; background: rgb(61 214 140 / 0.1); }
.prb-aviso--mal { border-left-color: #E5484D; background: rgb(229 72 77 / 0.1); }

.prb-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.prb .boton { background: transparent; cursor: pointer; }
.prb .boton:disabled { opacity: 0.4; cursor: not-allowed; }
.prb .boton--lleno:disabled { color: #0B0908; }
.prb .boton--lleno:disabled::before { transform: scaleX(1); }
.prb .boton[aria-busy=true] { cursor: progress; }
.prb-link { padding: 10px 2px; background: none; border: 0; color: var(--texto-2); font: 500 11.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.prb-link:hover { color: var(--violeta-claro); }
.prb-link:focus-visible, .prb-caja:focus-within, .prb-galeria:focus-within, .prb-pack:focus-within { outline: 2px solid var(--violeta-claro); outline-offset: 3px; }

/* La cabeza: el saludo y el saldo, con la moneda */
.prb-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; margin: 0 0 28px; padding: 0 0 24px; border-bottom: 1px solid var(--linea); }
.prb-hola { margin: 0; font-size: 18px; color: var(--texto-2); }
.prb-hola b { color: var(--texto); font-weight: 700; }
.prb-saldo { display: flex; align-items: center; gap: 16px; }
.prb-saldo__n { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-3); }
.prb-saldo__n b { display: block; margin: 0 0 4px; font-family: var(--sans); font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--texto); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ La guía: cómo sacar las fotos */
.prb-guia { margin: 0 0 30px; padding: 22px 24px 20px; background: var(--negro-1); border: 1px solid var(--linea); border-left: 2px solid var(--violeta); border-radius: 4px; }
.prb-guia > .prb-rot { margin-bottom: 18px; color: var(--violeta-claro); }
.prb-guia__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 30px; }
.prb-guia__tit { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15.5px; font-weight: 700; color: var(--texto); }
.prb-guia__tit b { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1px solid var(--violeta); border-radius: 50%; font: 500 11px/1 var(--mono); color: var(--violeta-claro); }
.prb-guia__lista { margin: 0; padding: 0; list-style: none; }
.prb-guia__lista li { position: relative; margin: 0 0 8px; padding: 0 0 0 22px; font-size: 14.5px; line-height: 1.5; color: var(--texto-2); }
.prb-guia__lista li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 9px; height: 5px; border-left: 1.5px solid var(--violeta-claro); border-bottom: 1.5px solid var(--violeta-claro); transform: rotate(-45deg); }
.prb-guia__lista b { color: var(--texto); font-weight: 700; }
.prb-guia__aviso { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--linea); font-size: 13px; line-height: 1.55; color: var(--texto-3); }

/* ------------------------------------------------ Las dos fotos */
.prb-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.prb-foto .prb-rot { margin-bottom: 14px; letter-spacing: 0.12em; }
.prb-caja { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; background: var(--negro-1); border: 1px dashed var(--linea-viva); border-radius: 4px; cursor: pointer; transition: border-color 0.2s; }
.prb-caja:hover { border-color: var(--violeta-claro); }
.prb-caja img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prb-caja.tiene { border-style: solid; border-color: var(--linea); }
.prb-caja.tiene::after { content: "Cambiar"; position: absolute; right: 10px; bottom: 10px; padding: 7px 10px; background: rgb(11 9 8 / 0.78); border-radius: 3px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #F6F2EE; }
.prb-caja.tiene .prb-caja__vacio { display: none; }
.prb-caja__vacio { display: grid; justify-items: center; gap: 14px; padding: 20px; font-size: 14.5px; text-align: center; color: var(--texto-2); }
.prb-caja__vacio::before { content: ""; width: 46px; height: 46px; border: 1px solid var(--violeta); border-radius: 50%; background: linear-gradient(var(--violeta-claro), var(--violeta-claro)) center / 14px 1.5px no-repeat, linear-gradient(var(--violeta-claro), var(--violeta-claro)) center / 1.5px 14px no-repeat; }
.prb-caja__vacio--mano::before { display: none; }
/* El esquema de la mano: los dedos, las uñas en violeta y el espacio libre punteado arriba. */
.prb-mano { width: min(120px, 46%); height: auto; overflow: visible; }
.prb-mano__aire { fill: rgb(129 77 250 / 0.08); stroke: var(--violeta-claro); stroke-width: 1.4; stroke-dasharray: 5 4; }
.prb-mano__dedos { fill: none; stroke: var(--texto-3); stroke-width: 1.6; }
.prb-mano__unas { fill: var(--violeta); }
.prb-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
.prb-nota { margin: 10px 0 0; font-size: 13.5px; color: var(--texto-3); }
.prb-galeria { display: inline-block; color: var(--texto-2); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.prb-galeria:hover { color: var(--violeta-claro); }

.prb-revelar { margin: 28px 0 0; }

/* El revelado */
.prb-resultado { margin: 32px 0 0; padding: 26px 0 0; border-top: 1px solid var(--linea); }
.prb-espera { display: flex; align-items: center; gap: 14px; color: var(--texto-2); }
.prb-espera p { margin: 0; }
.prb-giro { flex: none; width: 22px; height: 22px; border: 2px solid var(--linea-viva); border-top-color: var(--violeta-claro); border-radius: 50%; animation: prbGiro 0.9s linear infinite; }
@keyframes prbGiro { to { transform: rotate(360deg); } }
.prb-listo { margin: 0; }
.prb-listo img { width: 100%; max-width: 560px; border: 1px solid var(--linea); border-radius: 4px; }
.prb-listo figcaption { margin: 18px 0 0; }
.prb-listo.revela img { animation: prbRevela 1.9s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
@keyframes prbRevela {
  from { filter: grayscale(1) brightness(1.7) contrast(0.6) blur(5px); opacity: 0.35; }
  55% { filter: grayscale(0.4) brightness(1.15) contrast(0.9) blur(1px); opacity: 0.9; }
  to { filter: none; opacity: 1; }
}

/* Tus revelados */
.prb-historial { margin: 36px 0 0; padding: 26px 0 0; border-top: 1px solid var(--linea); }
.prb-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.prb-grilla a { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--negro-1); border: 1px solid var(--linea); border-radius: 3px; transition: border-color 0.2s; }
.prb-grilla a:hover { border-color: var(--violeta-claro); }
.prb-grilla img { width: 100%; height: 100%; object-fit: cover; }
.prb-salir { margin: 30px 0 0; text-align: right; }

/* ------------------------------------------------ Comprar monedas: la promo de 12 y la suelta */
.prb-dialogo { width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; background: var(--negro); color: var(--texto); border: 1px solid var(--linea-viva); border-radius: 6px; box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.8); }
.prb-dialogo::backdrop { background: rgb(11 9 8 / 0.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.prb-dialogo__caja { padding: clamp(22px, 4vw, 32px); }
.prb-packs { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; margin: 0 0 24px; }
.prb-pack { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 38px 10px 18px; border: 1px solid var(--linea-viva); border-radius: 4px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.prb-pack:hover { border-color: var(--violeta-claro); }
.prb-pack.is-on { border-color: var(--violeta); background: rgb(129 77 250 / 0.14); }
.prb-pack input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.prb-pack__sello { position: absolute; top: 0; left: 0; right: 0; padding: 7px 8px; background: var(--violeta); border-radius: 3px 3px 0 0; font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #FFFFFF; }
.prb-pack__monedas { display: flex; justify-content: center; margin: 0 0 10px; }
.prb-pack__monedas img { width: 52px; height: 52px; filter: drop-shadow(0 5px 8px rgb(0 0 0 / 0.45)); }
.prb-pack__monedas img + img { margin-left: -30px; }
.prb-pack--promo .prb-pack__monedas img:nth-child(1) { transform: translateY(4px) rotate(-10deg); }
.prb-pack--promo .prb-pack__monedas img:nth-child(3) { transform: translateY(4px) rotate(10deg); }
.prb-pack--promo .prb-pack__monedas img:nth-child(2) { position: relative; z-index: 1; }
.prb-pack b { font-size: 30px; font-weight: 800; line-height: 1; color: var(--texto); }
.prb-pack__que { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-3); }
.prb-pack__total { margin: 10px 0 0; font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--texto); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ Cómo funciona: los pasos y la moneda */
.prb-como { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); gap: clamp(28px, 5vw, 64px); align-items: center; margin: 34px 0 0; }
.prb-como .pasos { grid-template-columns: 1fr; margin: 0; }
.prb-como__moneda { display: grid; justify-items: center; text-align: center; }
.prb-como__moneda .mcoin { margin: 0 0 30px; }

@media (max-width: 760px) {
  .prb-entrada, .prb-como { grid-template-columns: 1fr; }
  .prb-entrada__moneda { order: -1; padding: 0 0 10px; }
  .prb-entrada__moneda .mcoin, .prb-como__moneda .mcoin { --d: 132px; margin-bottom: 26px; }
  .prb-como__moneda { order: -1; }
}
@media (max-width: 640px) {
  .prb-campos, .prb-guia__cols { grid-template-columns: 1fr; }
  .prb-guia { padding: 18px 16px 16px; }
  .prb-fotos { gap: 12px; }
  .prb-caja__vacio { font-size: 13px; padding: 12px; }
  .prb-revelar, .prb-paso .boton--lleno { width: 100%; justify-content: center; }
  .prb-saldo { width: 100%; flex-wrap: wrap; }
  .prb-saldo .boton { flex: 1 1 100%; justify-content: center; }
  .unaCta { width: 100%; }
  .unaCta__fl { margin-left: auto; }
  .prb-packs { gap: 10px; }
  .prb-pack { padding: 36px 6px 16px; }
  /* En el teléfono el cartel de la promo entra en un renglón. */
  .prb-pack__sello { padding: 7px 4px; font-size: 9.5px; letter-spacing: 0.06em; white-space: nowrap; }
  .prb-pack__monedas img { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .mcoin__g, .mcoin__s, .mcoin.is-salta, .prb-listo.revela img, .unaCta::after { animation: none; }
  .unaCta, .unaCta__fl, .unaCta__ic::before { transition: none; }
  .prb-giro { animation-duration: 3s; }
}