/* Caja 3D del producto (10-nov-2026, pedido de Luis): la misma idea de la repisa del home,
   con una sola caja para la página de ventas. CSS puro; caja3d.js la mueve con el mouse o el scroll. */

.c3d {
  --rx: -12; --ry: -28;                 /* la cámara */
  --w: 15rem; --h: 15rem; --d: 3.2rem;   /* la caja: frente cuadrado como la portada */
  position: relative; width: 100%; height: 22rem;
  perspective: 1100px; perspective-origin: 50% 35%;
}
.c3d__halo {
  position: absolute; left: 50%; top: 45%; width: 24rem; height: 24rem; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(30, 200, 224, 0.30), rgba(155, 48, 255, 0.18) 55%, transparent);
  filter: blur(10px); pointer-events: none;
}
.c3d__stage {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg));
  transition: transform 500ms cubic-bezier(.2, .7, .2, 1);
}
.c3d__box {
  position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  animation: c3d-float 7s ease-in-out infinite;
}
@keyframes c3d-float { 50% { transform: translateY(-8px); } }
.c3d__f, .c3d__s, .c3d__t, .c3d__b, .c3d__back { position: absolute; display: block; }
.c3d__f { inset: 0; transform: translateZ(calc(var(--d) / 2)); overflow: hidden; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(30, 200, 224, 0.55), 0 0 40px rgba(30, 200, 224, 0.35); }
.c3d__f img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* brillo que barre el frente */
.c3d__f::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.14) 48%, transparent 60%);
  transform: translateX(-120%); animation: c3d-sheen 6s ease-in-out infinite 1.5s;
}
@keyframes c3d-sheen { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.c3d__back { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: #0B0E16; }
.c3d__s { top: 0; left: calc(var(--w) - var(--d) / 2); width: var(--d); height: 100%; transform: rotateY(90deg);
  background: linear-gradient(180deg, #2A1E52, #0B0E16 75%); border-left: 1px solid rgba(30, 200, 224, 0.6); }
.c3d__s span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); white-space: nowrap;
  font-family: var(--f-display); font-weight: var(--fw-display); font-style: italic; font-size: 0.85rem; color: var(--c-accent);
}
.c3d__s--l { left: calc(var(--d) / -2); transform: rotateY(-90deg); background: #0D1019; border: 0; }
.c3d__t { left: 0; top: calc(var(--d) / -2); width: 100%; height: var(--d); transform: rotateX(90deg);
  background: linear-gradient(90deg, #1B2030, #2C3346); }
.c3d__b { left: 0; bottom: calc(var(--d) / -2); width: 100%; height: var(--d); transform: rotateX(-90deg); background: #07080C; }
/* sombra en el piso */
.c3d__floor {
  position: absolute; left: 50%; bottom: 1.2rem; width: 16rem; height: 2.2rem; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(30, 200, 224, 0.35), transparent); filter: blur(6px);
}
@media (min-width: 768px) {
  .c3d { height: 26rem; --w: 17rem; --h: 17rem; --d: 3.6rem; }
}
/* versión mediana para la vitrina */
.c3d--sm { height: 17rem; --w: 11rem; --h: 11rem; --d: 2.4rem; }
@media (min-width: 768px) { .c3d--sm { height: 18rem; --w: 12rem; --h: 12rem; --d: 2.6rem; } }

/* Botón de compra con candado (10-nov, pedido de Luis). */
.btn--lock { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.btn--lock .lock { flex: none; }
.btn--lock .lock circle { fill: #FFC83D; }

/* Botones de compra en ámbar (10-nov, Luis): lo único amarillo de la página, para que resalten.
   Solo los que llevan data-checkout (van a Hotmart). El cian queda para el resto de la marca. */
.btn[data-checkout] {
  background: linear-gradient(180deg, #FFD45C, #FFB81F); color: #07080C; border-color: #FFC83D;
  box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.35), 0 8px 24px rgba(255, 184, 31, 0.25);
}
.btn[data-checkout]:hover, .btn[data-checkout]:focus-visible {
  background: linear-gradient(180deg, #FFE08A, #FFC83D); color: #07080C;
  box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.5), 0 10px 30px rgba(255, 184, 31, 0.4);
}

/* Precio: el regular tachado encima y el de fundadores grande (10-nov, pedido de Luis). */
.price-was { margin: var(--s-2) 0 0; font-family: var(--f-display); font-weight: var(--fw-display); font-size: 1.6rem; line-height: 1; color: var(--c-text-muted); }
.price-was s { text-decoration-color: #FF5A6E; text-decoration-thickness: 3px; }
.price .amount--xl { font-size: clamp(3.6rem, 12vw, 5.5rem); margin-top: 0.2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Barra superior con el logo de Soy Master Pro, pequeño (10-nov, pedido de Luis). */
/* 10-nov (Luis): la barra va en el cian de los botones del CTA; el logo queda como sello oscuro redondo. */
.smp-bar { position: relative; z-index: 5; padding: 0.3rem 0; background: var(--c-accent);
  box-shadow: 0 0 24px rgba(30, 200, 224, 0.35); }
.smp-bar__logo { display: block; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #07080C;
  box-shadow: 0 0 0 2px rgba(7, 8, 12, 0.85); }
.smp-bar__logo img { display: block; width: 100%; height: 100%; border-radius: 50%;
  -webkit-mask: radial-gradient(ellipse 71% 71% at 50% 50%, #000 80%, transparent 100%);
          mask: radial-gradient(ellipse 71% 71% at 50% 50%, #000 80%, transparent 100%); }
@media (min-width: 768px) { .smp-bar__logo { width: 2.4rem; height: 2.4rem; } }

@media (prefers-reduced-motion: reduce) {
  .c3d__stage { transition: none; }
  .c3d__box, .c3d__f::after { animation: none; }
}