/* Piezas en vivo dentro de las secciones de la base: la red de aficionados de fondo,
   el abanico de teléfonos, el selector de clubes y la consola del club. */

/* ---------------------------------------------------------------- One platform: la red de aficionados */
.product .m-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 74% 50%, #000 22%, transparent 82%);
  mask-image: radial-gradient(ellipse 62% 78% at 74% 50%, #000 22%, transparent 82%);
}
@media (max-width: 1023.98px) {
  .product .m-field {
    -webkit-mask-image: radial-gradient(ellipse 90% 45% at 50% 34%, #000 20%, transparent 80%);
    mask-image: radial-gradient(ellipse 90% 45% at 50% 34%, #000 20%, transparent 80%);
  }
}

/* Abanico: cada hueco lleva un teléfono en vivo de su mismo ancho; los laterales pasan al centro al pulsarlos */
.fan-phone > .m-phone { --pw: var(--w); }
.fan-left, .fan-right { cursor: pointer; }
.fan-center { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .fan-left:hover, .fan-right:hover { filter: brightness(.92); }
}
.fan-phone:focus-visible { outline-offset: 8px; border-radius: 12px; }

/* ---------------------------------------------------------------- Two ways: el teléfono de marca blanca cambia de club */
.way-live { position: absolute; top: 36px; left: calc(50% - 115px); z-index: 2; }
.way-live .m-phone { --pw: 230px; }
.way-glow {
  position: absolute; inset: 10% 15% -30%; z-index: 1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow, #1A5FEB) 42%, transparent), transparent);
  filter: blur(24px); transition: background .9s var(--ease);
}
/* Muestras de club: a la derecha del teléfono; la elegida lleva el anillo lima (estado activo) */
.m-clubs { position: absolute; right: 20px; top: 50%; z-index: 3; display: flex; flex-direction: column; gap: 10px; transform: translateY(-50%); }
.m-clubs button {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: rgba(11, 13, 12, .6);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.m-clubs button[aria-selected="true"] { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
@media (hover: hover) and (pointer: fine) { .m-clubs button:hover { border-color: var(--off); } .m-clubs button[aria-selected="true"]:hover { border-color: var(--lime); } }
.m-swatch { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(245, 247, 242, .25); }
.m-swatch-altamar { background: conic-gradient(from 225deg, #0B1F3F 0 50%, #FFC53D 0); }
.m-swatch-norte { background: conic-gradient(from 225deg, #C81E3A 0 50%, #FFFFFF 0); }
.m-swatch-hl { background: conic-gradient(from 225deg, var(--black) 0 50%, var(--lime) 0); }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .way-live { left: calc(50% - 90px); }
  .way-live .m-phone { --pw: 180px; }
}
@media (max-width: 767.98px) {
  .m-clubs { right: 12px; gap: 8px; }
  .way-live { top: 28px; left: calc(50% - 98px); }
  .way-live .m-phone { --pw: 196px; }
}

/* ---------------------------------------------------------------- Consola del club (sección clara) */
.console { overflow: hidden; }
.m-window {
  margin-top: clamp(40px, 5vw, 64px);
  border-radius: 10px; overflow: hidden;
  background: #0F1110; color: var(--off);
  box-shadow: 0 60px 120px -50px rgba(11, 13, 12, .55), 0 0 0 1px rgba(11, 13, 12, .1);
}
.m-winbar { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; background: #181B19; border-bottom: 1px solid var(--line); }
.m-winbar i { width: 11px; height: 11px; border-radius: 50%; background: #333833; }
.m-winbar span { margin: 0 auto; padding: 4px 16px; border-radius: 6px; background: #0F1110; font-size: 12px; color: var(--steel); transform: translateX(-24px); }
.m-console { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 460px; }
.m-side { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; border-right: 1px solid var(--line); font-size: 13px; color: var(--steel); }
.m-side > span { padding: 8px 10px; border-radius: 6px; }
.m-side > span.is-on { background: #1D201E; color: var(--off); }
.m-sideclub { display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; font-size: 13px; font-weight: 600; color: var(--off); }
.m-sideclub img { width: 22px; height: auto; }
.m-main { min-width: 0; padding: 22px 24px 24px; }
.m-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.m-head > p { font: 700 20px var(--sg); letter-spacing: -.01em; }
.m-seg { display: flex; padding: 3px; border-radius: 8px; background: #1D201E; }
.m-seg button { padding: 7px 12px; border-radius: 6px; color: var(--steel); font-size: 12px; font-weight: 600; transition: background-color .25s, color .25s; }
.m-seg button[aria-pressed="true"] { background: var(--off); color: var(--black); }
.m-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.m-kpi, .m-panel { padding: 16px; border-radius: 8px; background: #161917; border: 1px solid var(--line); }
.m-kpi p { margin-bottom: 8px; font-size: 12px; color: var(--steel); }
.m-kpi b { font: 700 clamp(20px, 2.1vw, 28px) var(--sg); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.m-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.m-ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 12px; color: var(--steel); }
.m-ph.is-foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.m-ph b { color: var(--off); font-size: 14px; }
.m-legend { display: inline-flex; align-items: center; gap: 6px; }
.m-legend::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); }
.m-bars { width: 100%; height: 190px; overflow: visible; }
.m-bars rect { fill: #3A3F3B; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .8s var(--ease); }
.m-bars rect.is-match { fill: var(--lime); }
.m-bars.is-drawn rect { transform: scaleY(1); }
.m-tiers { display: grid; gap: 12px; }
.m-tiers li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 34px; align-items: center; gap: 10px; font-size: 12px; }
.m-tiers i { position: relative; height: 8px; border-radius: 4px; background: #262A27; overflow: hidden; }
.m-tiers i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--off); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease) .3s; }
.m-window.is-drawn .m-tiers i::after { transform: none; }
.m-tiers b { text-align: right; font-weight: 600; }

.m-trio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: clamp(48px, 6vw, 80px); }
.m-trio li { position: relative; padding-top: 22px; }
.m-trio li::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 4px; background: var(--black); }
.m-trio li::after { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 4px; background: var(--lime); }
.m-trio h3 { font-family: var(--sg); font-weight: 600; font-size: 20px; line-height: 1.2; margin-bottom: 8px; }
.m-trio p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
@media (min-width: 768px) { .m-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 1023.98px) {
  .m-console { grid-template-columns: minmax(0, 1fr); }
  .m-side { display: none; }
  .m-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639.98px) {
  .m-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-main { padding: 16px; }
  .m-head { flex-direction: column; align-items: flex-start; }
  .m-winbar span { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .m-bars rect, .m-tiers i::after { transform: none; }
}
@media print {
  .product .m-field { display: none; }
  .m-bars rect, .m-tiers i::after { transform: none !important; }
}