/* TÓNICA · Player (player.html) · diseño TonicaPlayer / TonicaPlayerMobile */
.pl-hero { position: relative; height: 900px; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 62% 62%, #22231C 0%, #0E0E0C 70%); }
.pl-3d { position: absolute; inset: 0; }
.pl-3d tonica-player-3d { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-3d-fallback { position: absolute; left: 50%; top: 50%; width: min(60%, 760px); transform: translate(-30%, -50%); opacity: .9; }
.pl-3d.has-canvas .pl-3d-fallback { display: none; }
.pl-hero-txt { position: absolute; left: var(--pad); top: 88px; display: flex; flex-direction: column; gap: 28px; width: 560px; pointer-events: none; }
.pl-brand { display: flex; flex-direction: column; gap: 12px; }
.pl-brand img { height: 40px; width: auto; }
.pl-brand .mono { font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.pl-title { font-size: 84px; font-weight: 500; letter-spacing: -.055em; line-height: .93; }
.pl-lead { font-size: 18px; line-height: 1.55; color: var(--sub); max-width: 440px; text-wrap: pretty; }
.pl-ctas { display: flex; gap: 12px; pointer-events: auto; }
.pl-drag { position: absolute; right: var(--pad); top: 96px; font-size: 11px; pointer-events: none; }
.pl-hero-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 40px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pl-hero-foot .seg > button { padding: 12px 20px; }
.pl-specs-mini { display: flex; gap: 40px; font-size: 12px; color: var(--sub); }
.pl-specs-mini > div { display: flex; flex-direction: column; gap: 4px; }
.pl-specs-mini .dim { font-size: 10px; letter-spacing: .08em; }
.pl-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 var(--pad); border-bottom: 1px solid var(--line); }
.pl-spec { padding: 32px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.pl-spec:first-child { padding-left: 0; } .pl-spec:last-child { padding-right: 0; border-right: 0; }
.pl-spec .label { font-size: 11px; }
.pl-spec-big { font-size: 30px; font-weight: 500; letter-spacing: -.03em; }
.pl-spec-v { font-size: 17px; line-height: 1.45; }
.pl-install { padding: 120px var(--pad) 40px; display: flex; flex-direction: column; gap: 56px; }
.pl-install-lead { font-size: 18px; line-height: 1.55; color: var(--sub); max-width: 520px; }
.pl-diagram { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); gap: 72px; align-items: center; }
.pl-diagram::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, var(--lime) 0 8px, transparent 8px 16px); opacity: .55; }
.pl-col { display: flex; flex-direction: column; gap: 20px; }
.pl-card { position: relative; z-index: 1; background: var(--s3); border: 1px solid var(--line); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.pl-card-h { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.pl-card-t { font-size: 24px; font-weight: 500; letter-spacing: -.025em; }
.pl-card-p { font-size: 14px; line-height: 1.5; color: var(--sub); }
.pl-card--lime { background: var(--lime); color: var(--bg); border-color: var(--lime); }
.pl-card--lime .pl-card-p { color: var(--bg); }
.pl-center { position: relative; z-index: 1; background: var(--bg); border: 1px solid var(--line-4); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.pl-center .iso { width: 130px; height: 130px; }
.pl-center > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pl-center-t { font-size: 20px; font-weight: 500; }
.pl-center .mono { font-size: 11px; letter-spacing: .08em; }
.pl-auto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 16px; }
.pl-auto-i { border-top: 1px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.pl-auto-i .mono { font-size: 12px; }
.pl-auto-i p { font-size: 15px; line-height: 1.5; color: var(--sub); }
.pl-nums { padding: 120px var(--pad); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.pl-num { display: flex; flex-direction: column; gap: 14px; }
.pl-num-v { font-size: 64px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.pl-num-t { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.pl-num-p { font-size: 15px; line-height: 1.55; color: var(--sub); }
.pl-impl { padding: 120px var(--pad); display: flex; flex-direction: column; gap: 48px; }
.pl-impl-head { display: flex; flex-direction: column; gap: 18px; }
.pl-weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.pl-week { background: var(--s3); padding: 26px 24px 30px; display: flex; flex-direction: column; gap: 40px; }
.pl-week .mono { font-size: 12px; }
.pl-week > div:last-child { display: flex; flex-direction: column; gap: 8px; }
.pl-week-t { font-size: 22px; font-weight: 500; }
.pl-week p { font-size: 14px; line-height: 1.5; color: var(--sub); }
.pl-week--lime { background: var(--lime); color: var(--bg); } .pl-week--lime p { color: var(--bg); }
@media (max-width: 1023px) {
  .pl-hero { height: auto; padding: 36px var(--pad) 0; display: flex; flex-direction: column; gap: 18px; background: radial-gradient(ellipse 90% 40% at 50% 70%, #22231C 0%, #0E0E0C 70%); overflow: visible; }
  .pl-3d { position: relative; order: 2; height: 380px; margin: 0 calc(-1 * var(--pad)); overflow: hidden; }
  .pl-3d-fallback { width: 70%; transform: translate(-50%, -50%); }
  .pl-hero-txt { position: static; width: auto; gap: 18px; order: 1; pointer-events: auto; }
  .pl-brand { flex-direction: row; align-items: center; gap: 10px; }
  .pl-brand img { height: 24px; } .pl-brand .mono { font-size: 11px; }
  .pl-title { font-size: 44px; letter-spacing: -.05em; line-height: .95; }
  .pl-lead { font-size: 16px; line-height: 1.5; }
  .pl-ctas .btn { width: 100%; padding: 16px; }
  .pl-drag { position: absolute; right: var(--pad); top: 0; font-size: 9px; }
  .pl-3d { position: relative; }
  .pl-hero-foot { position: static; order: 3; flex-direction: column; align-items: stretch; gap: 18px; padding-bottom: 8px; }
  .pl-specs-mini { justify-content: space-between; gap: 16px; font-size: 11px; }
  .pl-specs-mini > div:last-child { text-align: right; } .pl-specs-mini .dim { font-size: 9px; }
  .pl-specs { grid-template-columns: minmax(0, 1fr); margin: 0; padding: 24px var(--pad) 0; border-bottom: 0; }
  .pl-spec, .pl-spec:first-child, .pl-spec:last-child { padding: 16px 0; border-right: 0; border-top: 1px solid var(--line); flex-direction: row; justify-content: space-between; gap: 16px; }
  .pl-spec .label { font-size: 10px; }
  .pl-spec-big, .pl-spec-v { font-size: 14px; text-align: right; font-weight: 400; letter-spacing: 0; }
  .pl-install { padding: 64px var(--pad) 0; gap: 20px; }
  .pl-install-lead { font-size: 15px; }
  .pl-diagram { display: flex; flex-direction: column; gap: 10px; }
  .pl-diagram::before { display: none; }
  .pl-col { gap: 10px; }
  .pl-card { padding: 18px; gap: 8px; } .pl-card-h { font-size: 10px; } .pl-card-t { font-size: 20px; letter-spacing: -.02em; }
  .pl-nums { padding: 64px var(--pad) 0; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pl-num { gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; }
  .pl-num-v { font-size: 48px; } .pl-num-t { font-size: 18px; } .pl-num-p { font-size: 14px; }
  .pl-impl { padding: 64px var(--pad); gap: 20px; }
  .pl-weeks { grid-template-columns: minmax(0, 1fr); }
  .pl-week { padding: 16px 18px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .pl-week .mono { font-size: 11px; } .pl-week > div:last-child { gap: 4px; } .pl-week-t { font-size: 18px; } .pl-week p { font-size: 13px; }
}