/* Test de velocidad embebido: el medidor se abre dentro del sitio,
   no en una pestaña externa. */

.speed-embed {
  margin-top: clamp(20px, 2.8vw, 30px);
  background: #fff;
  border: 1px solid var(--pv-hair, rgba(16, 20, 26, .075));
  border-radius: 20px;
  box-shadow: var(--pv-lift, 0 14px 36px -20px rgba(16, 22, 30, .3));
  overflow: hidden;
}
.speed-embed[hidden] { display: none; }

.speed-embed-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--pv-hair, rgba(16, 20, 26, .075));
  background: var(--pv-soft, #fafbfc);
}
.speed-embed-bar b {
  font: 800 .84rem 'Manrope', sans-serif;
  letter-spacing: -.01em;
  color: #10141a;
}
.speed-embed-bar small {
  font: 400 .76rem 'DM Sans', sans-serif;
  color: #8b929c;
}
.speed-embed-bar .dot {
  width: 9px; height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #1f9d55;
  box-shadow: 0 0 0 4px rgba(31, 157, 85, .14);
}
.speed-embed-bar .spacer { flex: 1; }
.speed-embed-bar button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid rgba(16, 20, 26, .14);
  border-radius: 999px;
  background: #fff;
  font: 700 .74rem 'Manrope', sans-serif;
  color: #10141a;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.speed-embed-bar button:hover {
  transform: translateY(-1px);
  border-color: rgba(230, 0, 18, .35);
  color: var(--pv-red, #e60012);
}
.speed-embed-bar button svg { width: 14px; height: 14px; }

.speed-embed-frame {
  position: relative;
  width: 100%;
  height: clamp(520px, 68vh, 780px);
  background: #fff;
}
.speed-embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.speed-embed-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  align-content: center;
  background: #fff;
  transition: opacity .4s ease, visibility .4s;
}
.speed-embed.is-loaded .speed-embed-loading { opacity: 0; visibility: hidden; }
.speed-embed-loading span {
  width: 34px; height: 34px;
  border: 2px solid rgba(230, 0, 18, .18);
  border-top-color: var(--pv-red, #e60012);
  border-radius: 50%;
  animation: pv-spin 900ms linear infinite;
}
.speed-embed-loading p {
  margin: 0;
  font: 500 .84rem 'DM Sans', sans-serif;
  color: #8b929c;
}
@keyframes pv-spin { to { transform: rotate(360deg); } }

.speed-embed-note {
  margin: 0;
  padding: 13px 18px;
  border-top: 1px solid var(--pv-hair, rgba(16, 20, 26, .075));
  background: var(--pv-soft, #fafbfc);
  font: 400 .76rem/1.55 'DM Sans', sans-serif;
  color: #8b929c;
}
.speed-embed-note a { color: var(--pv-red, #e60012); }

@media (prefers-reduced-motion: reduce) {
  .speed-embed-loading span { animation: none; }
}