/* Soy Master Pro · efectos visuales (10-nov-2026)
   Brillos y arcos del logo, piezas con perspectiva, VSL simulado, diagramas
   y maquetas del kit. Colores y medidas salen de tokens.css.
   Todo se apaga con prefers-reduced-motion (ver el final). */

/* ---------- Arco de luz (como el del logo) ---------------------------- */
.arc {
  position: absolute; z-index: -1; pointer-events: none;
  aspect-ratio: 1; border-radius: 50%;
  background: var(--grad-arc);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 10px var(--glow-cyan)) drop-shadow(0 0 22px var(--glow-violet));
  animation: arc-spin 40s linear infinite;
}
@keyframes arc-spin { to { transform: rotate(360deg); } }
.glow-bg { position: relative; isolation: isolate; overflow: hidden; }
.glow-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40rem 22rem at 85% 10%, var(--glow-violet), transparent 70%),
    radial-gradient(34rem 20rem at 10% 90%, rgba(30, 200, 224, 0.16), transparent 70%);
  opacity: 0.55;
}

/* ---------- Hero con emblema 3D -------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero .arc--hero { width: min(52rem, 150vw); right: -38%; top: -18rem; opacity: 0.7; }
.hero-grid { display: grid; gap: var(--s-5); align-items: center; }
.hero-cover { width: min(100%, 20rem); margin: 0 auto; }
.hero-cover img { display: block; width: 100%; height: auto; border-radius: var(--r-2, 14px); }
/* 10-nov (Luis): en la página de ventas el logo va pequeño, como sello sobre el antetítulo; el protagonista es el curso. */
.emblem3d { display: block; perspective: var(--persp); width: 4.5rem; margin: 0.5rem 0 var(--s-5) 0.5rem; }
.emblem3d__card {
  position: relative; transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
  transition: transform 300ms ease-out;
  animation: emblem-float 7s ease-in-out infinite;
}
.emblem3d.is-live .emblem3d__card { animation: none; }
@keyframes emblem-float {
  0%, 100% { transform: rotateY(-9deg) rotateX(4deg); }
  50%      { transform: rotateY(9deg) rotateX(-3deg); }
}
.emblem3d__img {
  width: 100%; height: auto; border-radius: 50%;
  transform: translateZ(40px);
  -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%);
}
.emblem3d__ring {
  position: absolute; inset: -6%; border-radius: 50%;
  background: var(--grad-arc);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  filter: drop-shadow(0 0 8px var(--glow-cyan));
  transform: translateZ(-30px) rotate(0deg);
  animation: ring-spin 14s linear infinite;
}
.emblem3d__ring--2 { inset: -14%; opacity: 0.5; animation-duration: 22s; animation-direction: reverse; }
@keyframes ring-spin { to { transform: translateZ(-30px) rotate(360deg); } }
.emblem3d__shadow {
  position: absolute; left: 15%; right: 15%; bottom: -12%; height: 12%;
  background: radial-gradient(closest-side, var(--glow-cyan), transparent);
  filter: blur(6px); transform: translateZ(-60px) rotateX(80deg);
}

/* ---------- VSL simulado --------------------------------------------- */
.vsl {
  margin-top: var(--s-6);
  border-radius: var(--r-md);
  padding: 2px;                                   /* borde con el degradado del arco */
  background: var(--grad-ring);
  box-shadow: var(--glow), var(--shadow-deep);
}
.vsl__frame { position: relative; border-radius: calc(var(--r-md) - 2px); overflow: hidden; background: var(--c-bg); }
.vsl__screen {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; padding: 0; margin: 0; cursor: pointer; color: var(--c-text);
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(155, 48, 255, 0.28), transparent 70%),
    radial-gradient(50% 70% at 15% 85%, rgba(30, 200, 224, 0.18), transparent 70%),
    var(--c-bg);
  container-type: inline-size;
  font: inherit; text-align: left;
}
.vsl__screen::before {                             /* rejilla de "set" muy tenue */
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--c-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 6cqw 6cqw; opacity: 0.35;
  -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent);
}
.vsl__tag {
  position: absolute; left: 4cqw; top: 4cqw;
  font-family: var(--f-mono); font-size: max(9px, 1.9cqw); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--c-accent);
}
/* Consola de Claude Code (fotograma del póster) */
.term {
  position: absolute; left: 4cqw; top: 13cqw; width: 50cqw;
  background: rgba(14, 16, 22, 0.92); border: 1px solid var(--c-line); border-radius: 1.4cqw;
  box-shadow: var(--shadow-deep);
  font-family: var(--f-mono); font-size: max(8px, 1.85cqw); line-height: 1.6;
  transform: perspective(var(--persp)) rotateY(8deg); transform-origin: left center;
}
.term__bar { display: flex; gap: 0.8cqw; padding: 1.2cqw 1.6cqw; border-bottom: 1px solid var(--c-line); }
.term__bar i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--c-line); }
.term__bar i:first-child { background: var(--c-accent-2); }
.term__bar i:nth-child(2) { background: var(--c-accent); }
.term__body { padding: 1.6cqw 2cqw 2cqw; color: var(--c-text-muted); }
.term, .term__bar, .term__body, .vsl .phone, .phone__screen, .phone__notch { display: block; }
.term__bar { display: flex; }
.term__body .l { display: block; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term__body .u { color: var(--c-text); }
.term__body .ok { color: var(--c-ok); }
.term__body .ask { color: var(--c-accent); font-weight: var(--fw-bold); }
.term__body .cur { display: inline-block; width: 0.6em; height: 1em; vertical-align: -0.15em; background: var(--c-accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* Teléfono con el anuncio de HILO */
.vsl .phone { position: absolute; right: 7cqw; top: 6cqw; width: 23cqw; transform: perspective(var(--persp)) rotateY(-14deg) rotateZ(2deg); }
.vsl__play {
  position: absolute; left: 50%; top: 50%; width: 15cqw; height: 15cqw; min-width: var(--tap); min-height: var(--tap);
  transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-accent); color: var(--c-on-accent);
  box-shadow: 0 0 0 1.4cqw rgba(30, 200, 224, 0.18), var(--glow);
  transition: transform var(--dur);
  animation: pulse 2.4s ease-in-out infinite;
}
.vsl__play svg { width: 38%; height: 38%; margin-left: 8%; }
.vsl__screen:hover .vsl__play { transform: translate(-50%, -50%) scale(1.06); }
@keyframes pulse { 50% { box-shadow: 0 0 0 2.6cqw rgba(30, 200, 224, 0.06), var(--glow); } }
.vsl__bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); background: var(--c-bg-alt); border-top: 1px solid var(--c-line);
  font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text-muted);
}
.vsl__btn {
  flex: none; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%;
  background: transparent; color: var(--c-text); cursor: pointer; display: grid; place-items: center;
}
.vsl__btn svg { width: 16px; height: 16px; }
.vsl__track { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--c-line); position: relative; overflow: hidden; }
.vsl__track span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--grad-ring); }
.vsl__msg {
  position: absolute; inset: 0; display: grid; place-content: center; gap: var(--s-2); text-align: center;
  padding: var(--s-4); background: rgba(7, 8, 12, 0.88);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.vsl__msg[hidden] { display: none; }
.vsl__msg strong { font-family: var(--f-display); font-weight: var(--fw-display); font-size: var(--fs-h3); }
.vsl__msg button { justify-self: center; }

/* ---------- Teléfono (maqueta) --------------------------------------- */
.phone {
  position: relative; aspect-ratio: 9 / 15.3; border-radius: 13% / 7.6%;
  background: var(--grad-metal);
  box-shadow: var(--shadow-deep), 0 0 18px var(--glow-cyan);
}
.phone::before { content: ""; position: absolute; inset: 1.5%; border-radius: inherit; background: #050608; }
.phone__screen { position: absolute; inset: 2.2% 4.5%; border-radius: 10% / 5.8%; overflow: hidden; background: #000; }
.phone__screen img, .phone__screen video { width: 100%; height: 100%; object-fit: cover; }
.phone__notch { position: absolute; z-index: 2; top: 3%; left: 50%; width: 28%; height: 2.4%; transform: translateX(-50%); border-radius: var(--r-pill); background: #050608; }

/* Tira de plantillas en "Los 3 formatos" */
.reels-label { margin: var(--s-6) 0 0; text-align: center; }
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin: var(--s-4) 0 var(--s-3); perspective: var(--persp); }
.reels figure { margin: 0; }
.reels .phone { max-width: 13rem; margin: 0 auto; }
.reels figure:nth-child(1) .phone { transform: rotateY(12deg); }
.reels figure:nth-child(3) .phone { transform: rotateY(-12deg); }
.reels figcaption { margin-top: var(--s-3); text-align: center; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text-muted); }

/* ---------- Tilt de tarjetas (lo activa efectos.js) ------------------- */
[data-tilt] {
  transform: perspective(var(--persp)) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
  transition: transform 260ms ease-out, box-shadow 260ms ease-out, border-color 260ms;
  will-change: transform;
}
.card[data-tilt] { position: relative; }
.card[data-tilt]::after {                           /* brillo que sigue al mouse */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), rgba(30, 200, 224, 0.12), transparent 60%);
  opacity: 0; transition: opacity 260ms;
}
.card[data-tilt].is-hover { border-color: rgba(30, 200, 224, 0.5); box-shadow: var(--glow); }
.card[data-tilt].is-hover::after { opacity: 1; }

/* ---------- Diagrama del equipo (órbita) ----------------------------- */
.orbit { max-width: 34rem; margin: var(--s-6) auto 0; }
.orbit svg { width: 100%; height: auto; overflow: visible; }
.orbit .spoke { stroke: url(#orbitGrad); stroke-width: 1.5; stroke-dasharray: 4 8; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.orbit .pill rect { fill: var(--c-surface); stroke: var(--c-line); }
.orbit .pill text, .orbit .core text { font-family: var(--f-body); font-weight: var(--fw-bold); font-size: 15px; fill: var(--c-text); text-anchor: middle; dominant-baseline: middle; }
.orbit .pill circle { fill: var(--c-accent); }
.orbit .ringtext { font-family: var(--f-mono); font-size: 11px; letter-spacing: 2.5px; fill: var(--c-accent-2-text); }
.orbit .core text.sm { font-family: var(--f-mono); font-weight: var(--fw-body); font-size: 10px; letter-spacing: 2px; fill: var(--c-on-accent); }
.orbit .core text.big { fill: var(--c-on-accent); font-family: var(--f-display); font-weight: var(--fw-display); font-size: 24px; }
.orbit .ring { fill: none; stroke: url(#orbitGrad); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(155, 48, 255, 0.6)); }
.orbit .ring-rot { transform-origin: 220px 220px; animation: arc-spin 50s linear infinite; }

/* ---------- Diagrama del flujo del curso ----------------------------- */
.flow { margin: var(--s-6) 0 0; }
.flow ol {
  list-style: none; margin: 0; padding: 0; counter-reset: f;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5) var(--s-3);
}
.flow li { margin: 0; position: relative; text-align: center; counter-increment: f; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.flow .node {
  position: relative; display: grid; place-items: center; margin: 0 auto var(--s-2);
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2A3040, var(--c-surface) 60%);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.5);
  font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-accent);
}
.flow .node::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 50%; background: var(--grad-ring);
}
.flow .node::after { content: counter(f, decimal-leading-zero); }
.flow li:not(:nth-child(3n))::after {               /* conector en móvil: filas de 3 */
  content: ""; position: absolute; top: 1.75rem; left: calc(50% + 2rem); right: calc(-50% + 2rem); height: 2px;
  background: linear-gradient(90deg, var(--c-accent-2), var(--c-accent));
  background-size: 200% 100%; animation: line-run 2.4s linear infinite;
}
@keyframes line-run { from { background-position: 200% 0; } to { background-position: 0 0; } }
.flow li:last-child .node { box-shadow: 0 0 22px var(--glow-cyan); }

/* ---------- Vitrina del kit en "Lo que te llevas" -------------------- */
.showcase { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin: var(--s-6) 0 var(--s-3); perspective: var(--persp); }
.showcase figure { margin: 0; }
.showcase figcaption { margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text-muted); }
.cover { max-width: 20rem; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-deep); border: 1px solid var(--c-line); }
.cover img { width: 100%; height: auto; }
.win { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--shadow-deep); overflow: hidden; }
.win .term__bar { padding: var(--s-2) var(--s-3); gap: 6px; }
.win .term__bar i { width: 10px; height: 10px; }
.tree { margin: 0; padding: var(--s-4); font-family: var(--f-mono); font-size: clamp(0.625rem, 2.9vw, var(--fs-xs)); line-height: 1.9; color: var(--c-text-muted); white-space: pre; overflow-x: auto; }
.tree b { color: var(--c-accent); font-weight: var(--fw-body); }
.tree em { color: var(--c-accent-2-text); font-style: normal; }
.fan { position: relative; height: 15rem; transform-style: preserve-3d; }
.fan img {
  position: absolute; top: 0; left: 50%; width: 9.5rem; height: auto; border-radius: var(--r-sm);
  box-shadow: var(--shadow-deep); transform-origin: 50% 110%; transition: transform 400ms ease-out;
}
.fan img:nth-child(1) { transform: translateX(-50%) rotate(-12deg) translateX(-30%); }
.fan img:nth-child(2) { transform: translateX(-50%) translateZ(10px); z-index: 2; }
.fan img:nth-child(3) { transform: translateX(-50%) rotate(12deg) translateX(30%); }
.fan:hover img:nth-child(1) { transform: translateX(-50%) rotate(-18deg) translateX(-45%); }
.fan:hover img:nth-child(3) { transform: translateX(-50%) rotate(18deg) translateX(45%); }

/* ---------- Silla de director (quién lo enseña) ---------------------- */
.chair { max-width: 15rem; margin: var(--s-5) 0; }
.chair svg { width: 100%; height: auto; }
.chair .wood { fill: none; stroke: var(--c-text-muted); stroke-width: 7; stroke-linecap: round; }
.chair .canvas { fill: var(--c-surface); stroke: url(#chairGrad); stroke-width: 2.5; }
.chair .name { font-family: var(--f-display); font-weight: var(--fw-display); font-style: italic; font-size: 17px; fill: var(--c-text); text-anchor: middle; }
.chair .role { font-family: var(--f-mono); font-size: 9px; letter-spacing: 3px; fill: var(--c-accent); text-anchor: middle; }

/* ---------- Precio con aro de luz ------------------------------------ */
.price { position: relative; border: 2px solid transparent; background: linear-gradient(var(--c-surface), var(--c-surface)) padding-box, var(--grad-ring) border-box; box-shadow: var(--glow); }
.amount { background: var(--grad-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Cierre con el emblema ------------------------------------ */
.final-mark { width: 4.5rem; margin: 0 auto var(--s-5); 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%);
  filter: drop-shadow(0 0 18px var(--glow-violet)); }

/* ---------- Galería "Anuncios hechos por el estudio" ----------------- */
/* Móvil: cada formato es un carrusel con scroll-snap dentro de su propio contenedor
   (sangra hasta el borde del wrap con márgenes negativos, sin ensanchar la página). */
.ads__group { margin-top: var(--s-7); }
.ads__fmt {
  display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4);
  font-family: var(--f-mono); font-weight: var(--fw-body); font-size: var(--fs-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-accent);
}
.ads__fmt::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--c-accent-2), transparent); }
.ads__track {
  list-style: none; margin: 0 calc(var(--gutter) * -1); padding: var(--s-3) var(--gutter) var(--s-5);
  display: flex; gap: var(--s-4); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--c-line) transparent;
  perspective: var(--persp);
}
.ads__track:focus-visible { outline-offset: -3px; }
.ads__track > li { flex: 0 0 58%; max-width: 13rem; margin: 0; scroll-snap-align: start; }
.ad { margin: 0; }
.ad .phone { width: 100%; }
.ad .phone.is-hover { box-shadow: var(--shadow-deep), var(--glow); }
.ad figcaption { margin-top: var(--s-3); text-align: center; font-family: var(--f-mono); font-size: var(--fs-xs); line-height: 1.5; color: var(--c-text); }
.ad figcaption small { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); }
.ads__note { margin: var(--s-6) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); }
@media (min-width: 768px) {
  .ads__track {
    margin: 0; padding: var(--s-3) 0 0; overflow: visible; scroll-snap-type: none;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6);
  }
  .ads__track--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 75%; margin: 0 auto; }
  .ads__track > li { max-width: 13rem; width: 100%; justify-self: center; }
}

/* ---------- Escritorio ----------------------------------------------- */
@media (min-width: 768px) {
  .hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-6); }
  .hero-cover { width: 100%; max-width: 26rem; margin: 0 0 0 auto; }
  .emblem3d { width: 5.5rem; margin: 0.75rem 0 var(--s-5) 0.75rem; }
  .reels { gap: var(--s-6); }
  .flow ol { grid-template-columns: repeat(6, 1fr); }
  .flow li:not(:nth-child(3n))::after { content: none; }
  .flow li:not(:last-child)::after {
    content: ""; position: absolute; top: 1.75rem; left: calc(50% + 2rem); right: calc(-50% + 2rem); height: 2px;
    background: linear-gradient(90deg, var(--c-accent-2), var(--c-accent)); background-size: 200% 100%; animation: line-run 2.4s linear infinite;
  }
  .showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
}

/* ---------- Movimiento reducido: todo quieto ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .arc, .emblem3d__card, .emblem3d__ring, .orbit .spoke, .orbit .ring-rot, .vsl__play, .term__body .cur, .flow li::after { animation: none !important; }
  [data-tilt] { transform: none !important; }
}