/* Page-only layout for /testar-alto-falante-online/. Tone engine stays in browser-tests.js. */

body.page-testar-alto-falante-online .post-content {
  background: #f4f7fb;
  padding: 4px 0 8px;
}

body.page-testar-alto-falante-online .spk-page {
  --spk-blue: #2f6fed;
  --spk-blue-d: #1d4ed8;
  --spk-ink: #1c2b7a;
  --spk-text: #3d4d78;
  --spk-muted: #5c6b8a;
  --spk-line: #e4ebf5;
  --spk-card: #fff;
  --spk-soft: #f3f7ff;
  --spk-tip: #fff8e1;
  --spk-tip-ink: #6b5a20;
  --spk-ok: #16a34a;
  color: var(--spk-text);
  font-size: 15px;
  line-height: 1.45;
}

body.page-testar-alto-falante-online .spk-page ::selection {
  background: #dbe7ff;
  color: var(--spk-ink);
}

body.page-testar-alto-falante-online .spk-page p {
  line-height: 1.5;
}

body.page-testar-alto-falante-online .spk-page svg {
  display: block;
  max-width: none;
  width: 22px;
  height: 22px;
}

body.page-testar-alto-falante-online .spk-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 2px 0 12px;
}

body.page-testar-alto-falante-online .spk-hero-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #e7f0ff;
  color: var(--spk-blue);
}

body.page-testar-alto-falante-online .spk-hero-ico svg {
  width: 30px;
  height: 30px;
}

body.page-testar-alto-falante-online .spk-hero h1 {
  margin: 0;
  color: var(--spk-ink);
  font-size: clamp(1.45rem, 2.3vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

body.page-testar-alto-falante-online .spk-hero-text p {
  margin: 4px 0 0;
  color: #5b6ea6;
  font-size: 1.02rem;
  line-height: 1.35;
}

body.page-testar-alto-falante-online .spk-lead {
  max-width: 78ch;
  margin: 0 0 16px;
  color: var(--spk-text);
  font-size: 0.98rem;
  line-height: 1.55;
}

body.page-testar-alto-falante-online .spk-lead a {
  color: inherit;
  text-underline-offset: 2px;
}

body.page-testar-alto-falante-online .spk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 318px;
  gap: 16px;
  align-items: start;
}

body.page-testar-alto-falante-online .spk-col,
body.page-testar-alto-falante-online .spk-rail {
  min-width: 0;
}

body.page-testar-alto-falante-online .spk-app {
  margin: 0;
  padding: 16px 16px 14px;
  border: 1px solid var(--spk-line);
  border-radius: 18px;
  background: var(--spk-card);
  box-shadow: 0 10px 28px rgba(23, 37, 84, 0.06);
}

body.page-testar-alto-falante-online .spk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

body.page-testar-alto-falante-online .spk-go,
body.page-testar-alto-falante-online .spk-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

body.page-testar-alto-falante-online .spk-go {
  border: 1px solid var(--spk-blue);
  background: var(--spk-blue);
  color: #fff;
}

body.page-testar-alto-falante-online .spk-go::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}

body.page-testar-alto-falante-online .spk-go:hover:not(:disabled) {
  background: var(--spk-blue-d);
  border-color: var(--spk-blue-d);
}

body.page-testar-alto-falante-online .spk-go:disabled {
  opacity: 1;
  cursor: default;
}

body.page-testar-alto-falante-online .spk-stop {
  border: 1px solid #d5e0f0;
  background: #fff;
  color: var(--spk-blue);
}

body.page-testar-alto-falante-online .spk-stop::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: currentColor;
}

body.page-testar-alto-falante-online .spk-stop:hover:not(:disabled) {
  border-color: var(--spk-blue);
  background: #f3f7ff;
}

body.page-testar-alto-falante-online .spk-stop:disabled {
  opacity: 0.48;
  cursor: default;
}

body.page-testar-alto-falante-online .spk-go:focus-visible,
body.page-testar-alto-falante-online .spk-stop:focus-visible,
body.page-testar-alto-falante-online .spk-chip:focus-visible,
body.page-testar-alto-falante-online .spk-spin button:focus-visible,
body.page-testar-alto-falante-online .spk-page select:focus-visible,
body.page-testar-alto-falante-online .spk-page summary:focus-visible {
  outline: 2px solid var(--spk-blue);
  outline-offset: 2px;
}

body.page-testar-alto-falante-online .spk-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 18px;
  align-items: start;
}

body.page-testar-alto-falante-online .spk-controls,
body.page-testar-alto-falante-online .spk-side {
  min-width: 0;
}

body.page-testar-alto-falante-online .spk-side {
  padding-left: 16px;
  border-left: 1px solid var(--spk-line);
}

body.page-testar-alto-falante-online .spk-field + .spk-field {
  margin-top: 16px;
}

body.page-testar-alto-falante-online .spk-label,
body.page-testar-alto-falante-online .spk-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--spk-ink);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

body.page-testar-alto-falante-online .spk-kicker {
  color: var(--spk-blue);
  font-weight: 700;
}

body.page-testar-alto-falante-online .spk-kicker svg,
body.page-testar-alto-falante-online .spk-note svg,
body.page-testar-alto-falante-online .spk-tip svg {
  width: 18px;
  height: 18px;
  flex: none;
}

body.page-testar-alto-falante-online .spk-side .spk-kicker + .spk-kicker,
body.page-testar-alto-falante-online .spk-status + .spk-kicker {
  margin-top: 14px;
}

body.page-testar-alto-falante-online .spk-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

body.page-testar-alto-falante-online .spk-freq-ui {
  display: none;
}

body.page-testar-alto-falante-online .spk-app.is-log .spk-freq-ui {
  display: block;
}

body.page-testar-alto-falante-online .spk-app.is-log #btest-freq {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

body.page-testar-alto-falante-online .spk-page input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--spk-blue) var(--p, 0%), #e6edf6 var(--p, 0%));
  cursor: pointer;
}

body.page-testar-alto-falante-online .spk-page input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--spk-blue);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.35);
  cursor: pointer;
}

body.page-testar-alto-falante-online .spk-page input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--spk-blue);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.35);
  cursor: pointer;
}

body.page-testar-alto-falante-online .spk-page input[type="range"]:focus-visible {
  outline: 2px solid var(--spk-blue);
  outline-offset: 4px;
}

body.page-testar-alto-falante-online .spk-num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 112px;
  height: 42px;
  padding: 0 6px 0 12px;
  border: 1px solid #d7e1ee;
  border-radius: 12px;
  background: #fff;
  color: var(--spk-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

body.page-testar-alto-falante-online .spk-spin {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

body.page-testar-alto-falante-online .spk-spin button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7b8ba8;
  cursor: pointer;
}

body.page-testar-alto-falante-online .spk-spin button:hover {
  color: var(--spk-blue);
}

body.page-testar-alto-falante-online .spk-spin svg {
  width: 10px;
  height: 7px;
}

body.page-testar-alto-falante-online .spk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

body.page-testar-alto-falante-online .spk-chip {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #d7e1ee;
  border-radius: 10px;
  background: #fff;
  color: #3a4a6b;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

body.page-testar-alto-falante-online .spk-chip:hover {
  border-color: #b9ccf5;
  color: var(--spk-blue);
}

body.page-testar-alto-falante-online .spk-chip.is-on {
  border-color: var(--spk-blue);
  background: var(--spk-blue);
  color: #fff;
}

body.page-testar-alto-falante-online .spk-wave {
  display: block;
  width: 100%;
  height: 72px;
  margin-top: 14px;
}

body.page-testar-alto-falante-online .spk-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eef4ff;
  color: #3d5280;
  font-size: 0.9rem;
}

body.page-testar-alto-falante-online .spk-note svg {
  margin-top: 1px;
  color: var(--spk-blue);
}

body.page-testar-alto-falante-online .spk-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--spk-soft);
}

body.page-testar-alto-falante-online .spk-status-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e7f0ff;
  color: var(--spk-blue);
}

body.page-testar-alto-falante-online .spk-status-ico svg {
  width: 16px;
  height: 16px;
}

body.page-testar-alto-falante-online .spk-status .spk-ico-live,
body.page-testar-alto-falante-online .spk-status .spk-ico-err {
  display: none;
}

body.page-testar-alto-falante-online .spk-status[data-state="live"] .spk-ico-idle,
body.page-testar-alto-falante-online .spk-status[data-state="error"] .spk-ico-idle {
  display: none;
}

body.page-testar-alto-falante-online .spk-status[data-state="live"] .spk-ico-live {
  display: block;
}

body.page-testar-alto-falante-online .spk-status[data-state="error"] .spk-ico-err {
  display: block;
}

body.page-testar-alto-falante-online .spk-status[data-state="live"] .spk-status-ico {
  background: #22c55e;
  color: #fff;
}

body.page-testar-alto-falante-online .spk-status[data-state="error"] .spk-status-ico {
  background: #ef4444;
  color: #fff;
}

body.page-testar-alto-falante-online .spk-status strong {
  display: block;
  color: var(--spk-ink);
  font-size: 0.98rem;
  font-weight: 800;
}

body.page-testar-alto-falante-online .spk-status[data-state="live"] strong {
  color: var(--spk-ok);
}

body.page-testar-alto-falante-online .spk-status[data-state="error"] strong {
  color: #dc2626;
}

body.page-testar-alto-falante-online .spk-status p {
  margin: 2px 0 0;
  color: var(--spk-muted);
  font-size: 0.86rem;
}

body.page-testar-alto-falante-online .spk-page select {
  width: 100%;
  min-height: 44px;
  padding: 0 36px 0 12px;
  border: 1px solid #d7e1ee;
  border-radius: 12px;
  background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%237b8ba8' d='M1.2 1.6 6 6.4 10.8 1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px;
  color: var(--spk-ink);
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}

body.page-testar-alto-falante-online .spk-sink-note {
  margin: 6px 0 0;
  color: #9a3412;
  font-size: 0.82rem;
}

body.page-testar-alto-falante-online .spk-tip {
  margin-top: 14px;
  padding: 12px 12px 12px 14px;
  border-radius: 14px;
  background: var(--spk-tip);
}

body.page-testar-alto-falante-online .spk-tip strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8a6a12;
  font-weight: 800;
}

body.page-testar-alto-falante-online .spk-tip svg {
  color: #f5b400;
}

body.page-testar-alto-falante-online .spk-tip p {
  margin: 4px 0 0;
  color: var(--spk-tip-ink);
  font-size: 0.9rem;
}

body.page-testar-alto-falante-online .spk-perks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 14px 8px;
  border: 1px solid var(--spk-line);
  border-radius: 18px;
  background: var(--spk-card);
  list-style: none;
  box-shadow: 0 8px 22px rgba(23, 37, 84, 0.04);
}

body.page-testar-alto-falante-online .spk-perks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 4px 6px;
}

body.page-testar-alto-falante-online .spk-perk-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e7f0ff;
  color: var(--spk-blue);
}

body.page-testar-alto-falante-online .spk-perk-ico svg {
  width: 20px;
  height: 20px;
}

body.page-testar-alto-falante-online .spk-perks strong {
  display: block;
  color: var(--spk-ink);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
}

body.page-testar-alto-falante-online .spk-perks li span:last-child {
  color: var(--spk-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

body.page-testar-alto-falante-online .spk-card {
  margin: 0 0 12px;
  padding: 14px 14px 8px;
  border: 1px solid var(--spk-line);
  border-radius: 16px;
  background: var(--spk-card);
  box-shadow: 0 8px 22px rgba(23, 37, 84, 0.04);
}

body.page-testar-alto-falante-online .spk-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--spk-ink);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.2;
}

body.page-testar-alto-falante-online .spk-card h2 svg {
  width: 20px;
  height: 20px;
  color: var(--spk-blue);
}

body.page-testar-alto-falante-online .spk-steps {
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  counter-reset: spk;
}

body.page-testar-alto-falante-online .spk-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 7px 0;
  color: var(--spk-text);
  font-size: 0.92rem;
  counter-increment: spk;
}

body.page-testar-alto-falante-online .spk-steps li::before {
  content: counter(spk);
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #f5b400;
  color: #1f2430;
  font-size: 0.78rem;
  font-weight: 800;
}

body.page-testar-alto-falante-online .spk-also {
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
}

body.page-testar-alto-falante-online .spk-also li + li {
  border-top: 1px solid #eef2f8;
}

body.page-testar-alto-falante-online .spk-also a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  color: var(--spk-ink);
  font-weight: 600;
  text-decoration: none;
}

body.page-testar-alto-falante-online .spk-also a:hover {
  color: var(--spk-blue);
}

body.page-testar-alto-falante-online .spk-also-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #eef4ff;
  color: var(--spk-blue);
}

body.page-testar-alto-falante-online .spk-also-ico svg {
  width: 16px;
  height: 16px;
}

body.page-testar-alto-falante-online .spk-chev {
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: #94a3b8;
}

body.page-testar-alto-falante-online .spk-faq {
  padding-bottom: 4px;
}

body.page-testar-alto-falante-online .spk-faq details {
  border-top: 1px solid #eef2f8;
}

body.page-testar-alto-falante-online .spk-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px;
  line-height: 1.3;
  color: var(--spk-text);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

body.page-testar-alto-falante-online .spk-faq summary::-webkit-details-marker {
  display: none;
}

body.page-testar-alto-falante-online .spk-faq summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.7px solid #94a3b8;
  border-bottom: 1.7px solid #94a3b8;
  transform: rotate(45deg) translateY(-2px);
}

body.page-testar-alto-falante-online .spk-faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -1px);
}

body.page-testar-alto-falante-online .spk-faq details p {
  margin: 0;
  padding: 0 4px 12px;
  color: var(--spk-muted);
  font-size: 0.9rem;
}

body.page-testar-alto-falante-online .spk-copy {
  margin-top: 28px;
  color: var(--spk-text);
}

body.page-testar-alto-falante-online .spk-copy h2 {
  margin: 1.4rem 0 0.6rem;
  color: var(--spk-ink);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (max-width: 980px) {
  body.page-testar-alto-falante-online .spk-layout {
    grid-template-columns: 1fr;
  }

  body.page-testar-alto-falante-online .spk-perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.page-testar-alto-falante-online .spk-split {
    grid-template-columns: 1fr;
  }

  body.page-testar-alto-falante-online .spk-side {
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--spk-line);
  }

  body.page-testar-alto-falante-online .spk-hero h1 {
    font-size: 1.35rem;
  }
}

@media (max-width: 520px) {
  body.page-testar-alto-falante-online .spk-perks {
    grid-template-columns: 1fr;
  }

  body.page-testar-alto-falante-online .spk-go,
  body.page-testar-alto-falante-online .spk-stop {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-testar-alto-falante-online .spk-page * {
    scroll-behavior: auto;
  }
}

html[data-theme="dark"] body.page-testar-alto-falante-online .post-content {
  background: transparent;
}

html[data-theme="dark"] body.page-testar-alto-falante-online .spk-page {
  --spk-blue: #7aa2ff;
  --spk-blue-d: #9ab6ff;
  --spk-ink: #e7eeff;
  --spk-text: #c5d0ea;
  --spk-muted: #a9b6d4;
  --spk-line: #2c364c;
  --spk-card: #171e2e;
  --spk-soft: #1c2740;
  --spk-tip: #3a3118;
  --spk-tip-ink: #f3e2ae;
  --spk-ok: #4ade80;
}

html[data-theme="dark"] body.page-testar-alto-falante-online .spk-hero-ico,
html[data-theme="dark"] body.page-testar-alto-falante-online .spk-perk-ico,
html[data-theme="dark"] body.page-testar-alto-falante-online .spk-also-ico,
html[data-theme="dark"] body.page-testar-alto-falante-online .spk-status-ico {
  background: #243352;
}

html[data-theme="dark"] body.page-testar-alto-falante-online .spk-hero-text p {
  color: #b7c6ef;
}

html[data-theme="dark"] body.page-testar-alto-falante-online .spk-go {
  color: #0d1730;
}

html[data-theme="dark"] body.page-testar-alto-falante-online .spk-go::before {
  border-left-color: #0d1730;
}

html[data-theme="dark"] body.page-testar-alto-falante-online .spk-stop,
html[data-theme="dark"] body.page-testar-alto-falante-online .spk-num,
html[data-theme="dark"] body.page-testar-alto-falante-online .spk-chip,
html[data-theme="dark"] body.page-testar-alto-falante-online .spk-page select {
  background-color: #121826;
  border-color: #33415c;
  color: var(--spk-ink);
}

html[data-theme="dark"] body.page-testar-alto-falante-online .spk-chip.is-on {
  background: #2f6fed;
  border-color: #2f6fed;
  color: #fff;
}

html[data-theme="dark"] body.page-testar-alto-falante-online .spk-page input[type="range"] {
  background: linear-gradient(90deg, #7aa2ff var(--p, 0%), #33415c var(--p, 0%));
}

html[data-theme="dark"] body.page-testar-alto-falante-online .spk-note {
  background: #1c2740;
  color: #d5def3;
}

html[data-theme="dark"] body.page-testar-alto-falante-online .spk-status[data-state="live"] .spk-status-ico {
  background: #16a34a;
  color: #fff;
}

html[data-theme="dark"] body.page-testar-alto-falante-online .spk-page ::selection {
  background: #2a4380;
  color: #f4f7ff;
}