/* Brinco · Moxen — los estilos del efecto y de la demostración. */
:root {
  --br-fondo: #0a0a0a;
  --br-texto: #f4f4f4;
  --br-suave: rgba(255, 255, 255, .5);
  --br-pista: rgba(255, 255, 255, .36);
  /* la tarjeta: un degradado apenas más claro arriba, con su filo de luz */
  --br-tarjeta-1: #19191a;
  --br-tarjeta-2: #111112;
  --br-borde: rgba(255, 255, 255, .075);
  --br-filo: rgba(255, 255, 255, .11);
  --br-sombra: rgba(0, 0, 0, .7);
  --br-luz: rgba(255, 255, 255, .07);      /* el foco que sigue al puntero */
  --br-onda: rgba(255, 255, 255, .12);
  /* el hueco donde se asienta el punto, y el punto: una bolita con su brillo */
  --br-hueco-1: #050505;
  --br-hueco-2: #101010;
  --br-esfera: radial-gradient(circle at 35% 30%, #fff 0 14%, #dedede 42%, #8a8a8a 100%);
  --br-aro: 42px;
  --br-punto: 20px;
  --br-alza: 6px;                           /* lo que sube la tarjeta elegida (lo lee brinco.js) */
}
:root[data-tema="claro"] {
  --br-fondo: #eeeeee;
  --br-texto: #0a0a0a;
  --br-suave: rgba(0, 0, 0, .52);
  --br-pista: rgba(0, 0, 0, .42);
  --br-tarjeta-1: #ffffff;
  --br-tarjeta-2: #f6f6f6;
  --br-borde: rgba(0, 0, 0, .07);
  --br-filo: rgba(255, 255, 255, 1);
  --br-sombra: rgba(0, 0, 0, .16);
  --br-luz: rgba(0, 0, 0, .03);
  --br-onda: rgba(0, 0, 0, .08);
  --br-hueco-1: #dcdcdc;
  --br-hueco-2: #ececec;
  --br-esfera: radial-gradient(circle at 35% 30%, #8a8a8a 0 10%, #2c2c2c 42%, #000 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--br-fondo); color: var(--br-texto); }
body { font-family: "General Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* ── el efecto ─────────────────────────────────────────────────────── */
.br-grupo { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.br-opcion {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 252px; padding: 24px 24px 26px;
  border-radius: 24px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(var(--br-tarjeta-1), var(--br-tarjeta-2));
  box-shadow: inset 0 1px 0 var(--br-filo), inset 0 0 0 1px var(--br-borde), 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -18px var(--br-sombra);
  /* sube con un resorte cuando el punto aterriza (no al hacer clic) */
  transition: transform .7s cubic-bezier(.34, 1.56, .64, 1);
}
.br-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
/* La sombra de la tarjeta alzada y su borde encendido van en capas
   aparte: así solo se anima la opacidad, no la sombra. */
.br-opcion::before, .br-opcion::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s cubic-bezier(.22, 1, .36, 1); }
.br-opcion::before { z-index: -2; box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 28px 60px -22px var(--br-sombra); }
.br-opcion::after { z-index: -1; box-shadow: inset 0 0 0 1.5px var(--br-texto); background: linear-gradient(rgba(127, 127, 127, .08), transparent 70%); }
.br-opcion.is-elegida { transform: translateY(calc(-1 * var(--br-alza))); }
.br-opcion.is-elegida::before, .br-opcion.is-elegida::after { opacity: 1; }
.br-opcion:has(input:focus-visible) { outline: 2px solid var(--br-suave); outline-offset: 5px; }

/* las luces de la tarjeta, recortadas a su forma: el foco y la onda */
.br-luces { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
/* un grano fino, para que la superficie no sea un gris de pantalla */
.br-luces::before {
  content: ""; position: absolute; inset: 0; opacity: .28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.br-luz {
  position: absolute; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%;
  background: radial-gradient(circle, var(--br-luz), transparent 62%); opacity: 0; transition: opacity .4s;
}
.br-opcion:hover .br-luz { opacity: 1; }
.br-onda {
  position: absolute; left: calc(24px + var(--br-aro) / 2); top: calc(24px + var(--br-aro) / 2);
  width: 680px; height: 680px; margin: -340px 0 0 -340px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, transparent 46%, var(--br-onda) 62%, transparent 70%);
}

.br-arriba { display: flex; justify-content: space-between; align-items: flex-start; }
/* el hueco: hundido, con la luz rozando su borde de abajo */
.br-aro {
  position: relative; flex: none; width: var(--br-aro); height: var(--br-aro); border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--br-hueco-1), var(--br-hueco-2));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), inset 0 0 0 1.5px var(--br-suave), 0 1px 0 var(--br-filo);
}
.br-aro::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--br-texto); opacity: 0; transition: opacity .3s; }
.is-elegida .br-aro::after { opacity: 1; }
/* el punto: el que está sentado en su hueco y el que vuela (brinco.js) */
.br-asiento, .br-punto {
  position: absolute; width: var(--br-punto); height: var(--br-punto); border-radius: 50%; pointer-events: none;
  background: var(--br-esfera); box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.br-asiento { left: 50%; top: 50%; margin: calc(var(--br-punto) / -2) 0 0 calc(var(--br-punto) / -2); visibility: hidden; }
.br-asiento.is-visible { visibility: visible; }
.br-punto { left: 0; top: 0; z-index: 3; margin: calc(var(--br-punto) / -2) 0 0 calc(var(--br-punto) / -2); visibility: hidden; will-change: transform; }
.br-sombra {
  position: absolute; left: 0; top: 0; z-index: 2; width: 30px; height: 8px; margin: -4px 0 0 -15px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .8), transparent); opacity: 0; pointer-events: none; will-change: transform, opacity;
}

/* el mes: los días de envío se encienden en ola cuando la tarjeta se elige */
.br-mes { display: grid; grid-template-columns: repeat(7, 7px); gap: 6px; padding-top: 3px; }
.br-dia { width: 7px; height: 7px; border-radius: 50%; background: var(--br-texto); opacity: .1; }
.br-dia.is-marca { opacity: .34; }
.is-elegida .br-dia { animation: br-hunde .5s var(--d) cubic-bezier(.22, 1, .36, 1); }
.is-elegida .br-dia.is-marca { opacity: 1; animation: br-enciende .6s var(--d) cubic-bezier(.34, 1.56, .64, 1) backwards; }
@keyframes br-hunde { 40% { transform: scale(.45); } }
@keyframes br-enciende { 0% { opacity: .34; transform: none; } 35% { opacity: 1; transform: scale(1.7); } 100% { opacity: 1; transform: none; } }

.br-opcion b { margin-top: auto; padding-top: 36px; font-size: 26px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.br-opcion small { min-height: 2.8em; margin-top: 7px; color: var(--br-suave); font-size: 16px; line-height: 1.4; }

/* ── la demostración ───────────────────────────────────────────────── */
.br-escena { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem 1rem; }
.br-pregunta { width: min(1000px, 100%); margin: 0 0 92px; font-size: 46px; font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.br-grupo { width: min(1000px, 100%); }
.br-pista { position: absolute; left: 0; right: 0; bottom: 1.6rem; margin: 0; text-align: center; color: var(--br-pista); font-size: .95rem; }

@media (max-width: 760px) {
  :root { --br-aro: 34px; --br-punto: 15px; }
  .br-grupo { grid-template-columns: 1fr 1fr; gap: 12px; }
  .br-opcion { min-height: 0; padding: 16px 16px 18px; border-radius: 20px; }
  .br-onda { left: calc(16px + var(--br-aro) / 2); top: calc(16px + var(--br-aro) / 2); }
  .br-mes { grid-template-columns: repeat(7, 5px); gap: 4px; }
  .br-dia { width: 5px; height: 5px; }
  .br-opcion b { padding-top: 26px; font-size: 21px; }
  .br-opcion small { font-size: 14px; }
  .br-pregunta { margin-bottom: 64px; font-size: 32px; }
  .br-pista { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .br-opcion, .br-opcion::before, .br-opcion::after { transition-duration: .01s; }
  .is-elegida .br-dia, .is-elegida .br-dia.is-marca { animation: none; }
}