/* ==========================================================================
   JRINTERCOM — Test de velocidad
   Hereda los tokens de ../assets/css/style.css
   ========================================================================== */

.st-page { padding-bottom: clamp(48px, 7vw, 90px); }

/* ==========================================================================
   ZONA DE UNA PANTALLA
   El encabezado + la consola deben entrar en el viewport sin scroll. Se logra
   con una columna flex de altura fija: lo de arriba y lo de abajo tienen alto
   propio, y el velocímetro (.st-stage) se queda con lo que sobra. Como toda la
   tipografía del velocímetro vive dentro del SVG, escala sola con el dibujo.
   ========================================================================== */
.st-hero {
  display: flex;
  min-height: calc(100vh - var(--nav-h));   /* respaldo */
  min-height: calc(100svh - var(--nav-h));  /* svh: excluye la barra del navegador móvil */
  padding-block: clamp(14px, 2.2vh, 30px) clamp(10px, 1.6vh, 22px);
}
.st-hero__inner {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  gap: clamp(12px, 1.8vh, 24px);
}

.st-head { flex: none; text-align: center; }
.st-head h1 { margin-top: 10px; }
.st-head__lead {
  margin: 10px auto 0;
  font-size: clamp(.86rem, 1vw, .98rem);
  max-width: 62ch;
}
/* En pantallas bajas se sacrifica el texto para que el medidor entre entero */
@media (max-height: 780px) {
  .st-head__lead { display: none; }
  .st-head h1 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); }
}
@media (max-height: 620px) {
  .st-head .eyebrow { display: none; }
}

.st-below { display: block; margin-top: clamp(20px, 3vw, 34px); }

/* ---------- Consola ---------- */
.st-console {
  position: relative;
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--rad-xl);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(27, 107, 224, .22), transparent 65%),
    linear-gradient(165deg, rgba(20, 34, 62, .72), rgba(5, 10, 22, .82));
  backdrop-filter: blur(16px);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  isolation: isolate;
}
.st-console::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(140, 190, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140, 190, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 72%);
}

/* Barra superior con los pasos */
.st-steps {
  flex: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(8px, 2vw, 26px);
  padding: 13px clamp(14px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
  background: rgba(3, 6, 14, .5);
}
.st-step {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--txt-3);
  transition: color .35s;
}
.st-step i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(140, 190, 255, .22);
  transition: background .35s, box-shadow .35s;
}
.st-step.is-doing { color: var(--cyan); }
.st-step.is-doing i {
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(92, 214, 240, .8);
  animation: stPulse 1.4s infinite;
}
.st-step.is-done { color: var(--txt-2); }
.st-step.is-done i { background: var(--green); box-shadow: 0 0 10px rgba(34, 209, 138, .7); }
@keyframes stPulse {
  70% { box-shadow: 0 0 0 8px rgba(92, 214, 240, 0); }
  100% { box-shadow: 0 0 0 0 rgba(92, 214, 240, 0); }
}
.st-step__sep { width: 26px; height: 1px; background: var(--line-2); flex: none; }
@media (max-width: 680px) {
  .st-step__sep { display: none; }
  .st-step { font-size: .6rem; letter-spacing: .1em; gap: 6px; }
  .st-steps { gap: 14px; padding: 11px 14px; }
}

/* ---------- Escenario del velocímetro: se lleva el espacio sobrante ---------- */
.st-stage {
  flex: 1 1 auto; min-height: 0;
  display: grid; place-items: center;
  padding: clamp(6px, 1.4vh, 18px);
}
.st-gauge {
  height: 100%;
  max-height: 100%;
  max-width: min(100%, 520px);
  aspect-ratio: 424 / 392;
}
.st-gauge svg { width: 100%; height: 100%; overflow: visible; }

.st-arc-track {
  fill: none; stroke: rgba(140, 190, 255, .10);
  stroke-width: 16; stroke-linecap: round;
}
.st-arc-glow {
  fill: none; stroke: rgba(92, 214, 240, .16);
  stroke-width: 30; stroke-linecap: round;
  filter: blur(12px);
  opacity: 0;
  transition: opacity .5s;
}
.is-running .st-arc-glow { opacity: 1; }
.st-arc-prog {
  fill: none;
  stroke: url(#stGradDL);
  stroke-width: 16; stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(92, 214, 240, .8));
  transition: stroke-dashoffset .18s linear, stroke .5s;
}
.st-gauge[data-phase="upload"] .st-arc-prog { stroke: url(#stGradUL); filter: drop-shadow(0 0 10px rgba(255, 122, 66, .8)); }
.st-gauge[data-phase="upload"] .st-arc-glow { stroke: rgba(255, 140, 80, .18); }

.st-tick { stroke: rgba(140, 190, 255, .30); stroke-width: 2; stroke-linecap: round; }
.st-tick--major { stroke: rgba(160, 210, 255, .55); stroke-width: 2.5; }
.st-tick-label {
  fill: var(--txt-3);
  font-family: var(--f-mono); font-size: 13px; font-weight: 600;
  text-anchor: middle; dominant-baseline: middle;
}

/* Aguja: cuña en la banda exterior. No alcanza el centro, por eso ya no puede
   taparse con el número. */
.st-needle {
  fill: url(#stNeedleGrad);
  filter: drop-shadow(0 0 7px rgba(92, 214, 240, .6));
  transition: transform .18s cubic-bezier(.3,.8,.3,1);
}
.st-gauge[data-phase="upload"] .st-needle {
  fill: url(#stNeedleGradUL);
  filter: drop-shadow(0 0 7px rgba(255, 140, 80, .6));
}
.st-dot {
  fill: #EAFBFF;
  filter: drop-shadow(0 0 10px rgba(92, 214, 240, 1));
  transition: transform .18s cubic-bezier(.3,.8,.3,1);
}
.st-gauge[data-phase="upload"] .st-dot { filter: drop-shadow(0 0 10px rgba(255, 140, 80, 1)); }

/* ---------- Tipografía dentro del SVG ---------- */
.st-t-val {
  fill: #fff; text-anchor: middle;
  font-family: var(--f-display); font-weight: 700;
  font-size: 62px; letter-spacing: -3.4px;
  font-variant-numeric: tabular-nums;
}
.st-t-unit {
  fill: var(--cyan); text-anchor: middle;
  font-family: var(--f-display); font-weight: 600;
  font-size: 17px; letter-spacing: 3.4px;
}
.st-gauge[data-phase="upload"] .st-t-unit { fill: #FF9A62; }
.st-t-phase {
  fill: var(--txt-3); text-anchor: middle;
  font-family: var(--f-mono); font-weight: 600;
  font-size: 11px; letter-spacing: 2.1px;
  text-transform: uppercase;
}
.st-t-prev {
  fill: var(--cyan); text-anchor: middle;
  font-family: var(--f-display); font-weight: 600;
  font-size: 17px; letter-spacing: .2px;
}
.st-t-scale {
  fill: var(--txt-3); text-anchor: middle;
  font-family: var(--f-mono); font-weight: 600;
  font-size: 12px; letter-spacing: 2.4px;
}
/* Lectura final con los dos valores */
.st-t-dual {
  text-anchor: middle;
  font-family: var(--f-display); font-weight: 700;
  font-size: 40px; letter-spacing: -1.8px;
  font-variant-numeric: tabular-nums;
}
.st-t-dl { fill: #BFF4FF; }
.st-t-ul { fill: #FFC9A8; }
.st-t-ar { font-size: 30px; font-weight: 700; }
.st-t-u  { font-size: 15px; font-weight: 600; letter-spacing: .6px; opacity: .72; }

/* ---------- Botón de arranque ---------- */
.st-action {
  flex: none;
  display: grid; place-items: center;
  padding: clamp(8px, 1.4vh, 16px) clamp(16px, 3vw, 34px) clamp(12px, 1.8vh, 22px);
}
.st-start {
  --ring: rgba(92, 214, 240, .35);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 232px; padding: 17px 38px;
  border-radius: 999px;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: .02em;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 18px 48px -16px rgba(27, 107, 224, .9);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, opacity .25s;
}
.st-start svg { width: 20px; height: 20px; flex: none; }
.st-start::after {
  content: ''; position: absolute; inset: -6px; border-radius: 999px;
  border: 1px solid var(--ring);
  animation: stRing 2.6s ease-out infinite;
}
@keyframes stRing {
  0%   { transform: scale(.96); opacity: .9; }
  70%  { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}
.st-start:hover { transform: translateY(-2px); box-shadow: 0 24px 56px -14px rgba(92, 214, 240, .75); }
.st-start[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.st-start[disabled]::after { display: none; }
.st-start.is-restart { background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); }
.st-start.is-restart::after { display: none; }

.st-hint {
  margin-top: 11px; text-align: center;
  font-size: .78rem; line-height: 1.45; color: var(--txt-3); max-width: 52ch;
}
@media (max-height: 700px) {
  .st-hint { display: none; }
  .st-start { padding: 13px 30px; font-size: .95rem; min-width: 200px; }
}
.st-hint.is-error { color: #FF9A62; }

/* ---------- Métricas ---------- */
.st-metrics {
  flex: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  background: rgba(3, 6, 14, .4);
}
.st-metric {
  padding: clamp(12px, 1.8vh, 18px) clamp(6px, 2vw, 22px);
  border-right: 1px solid var(--line);
  text-align: center;
  transition: background .4s;
  min-width: 0;
}
.st-metric:last-child { border-right: 0; }
@media (max-width: 560px) {
  .st-metric__k { font-size: .58rem; letter-spacing: .08em; gap: 4px; }
  .st-metric__k svg { width: 12px; height: 12px; }
}
@media (max-width: 560px) {
  .st-metric__k span, .st-metric__k { letter-spacing: .04em; }
  .st-metric__v { font-size: 1.15rem; letter-spacing: -.04em; }
  .st-metric__v small { font-size: .46em; margin-left: 2px; }
}
/* Muy angosto: la unidad baja a su propia línea para que "98.5 Mbps" no se corte */
@media (max-width: 430px) {
  .st-metric__v { font-size: 1.05rem; }
  .st-metric__v small { display: block; margin: 3px 0 0; font-size: .52em; }
}
.st-metric.is-active { background: rgba(92, 214, 240, .07); }
.st-metric__k {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--txt-3);
}
.st-metric__k svg { width: 14px; height: 14px; }
.st-metric__v {
  margin-top: 9px;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
}
.st-metric__v small { font-size: .5em; font-weight: 600; color: var(--txt-3); margin-left: 3px; letter-spacing: 0; }
.st-metric--dl.is-set .st-metric__v { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.st-metric--ul.is-set .st-metric__v { background: linear-gradient(100deg, #FFF, #FFB98A 55%, #FF7A42); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Gráfico en vivo ---------- */
.st-chart {
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  padding: 18px clamp(16px, 3vw, 28px) 20px;
  background: rgba(8, 14, 28, .5);
}
.st-chart__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.st-chart__head h3 {
  font-family: var(--f-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--txt-3);
}
.st-legend { display: flex; gap: 16px; }
.st-legend span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .72rem; color: var(--txt-3);
}
.st-legend i { width: 10px; height: 3px; border-radius: 2px; }
.st-chart svg { width: 100%; height: 130px; display: block; }
.st-grid-line { stroke: rgba(140, 190, 255, .10); stroke-width: 1; }
.st-axis-label { fill: var(--txt-3); font-family: var(--f-mono); font-size: 9px; }

/* ---------- Pie: servidor e IP ---------- */
.st-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 14px clamp(16px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  background: rgba(8, 14, 28, .5);
  font-size: .78rem; color: var(--txt-3);
}
.st-foot dl { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.st-foot div { display: flex; align-items: center; gap: 7px; }
.st-foot dt { color: var(--txt-3); }
.st-foot dd { margin: 0; color: var(--txt-2); font-family: var(--f-mono); }
.st-foot svg { width: 14px; height: 14px; color: var(--cyan); flex: none; }

/* ---------- Comparación con el plan ---------- */
.st-verdict {
  margin-top: var(--gap);
  border: 1px solid var(--line-2);
  border-radius: var(--rad-lg);
  background: var(--grad-surface);
  padding: clamp(22px, 3vw, 32px);
}
.st-verdict[hidden] { display: none; }
.st-plan-pick {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 16px;
}
.st-plan-pick button {
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line-2);
  font-family: var(--f-display); font-weight: 600; font-size: .88rem;
  color: var(--txt-2);
  transition: all .25s;
}
.st-plan-pick button:hover { border-color: var(--line-3); color: var(--txt); }
.st-plan-pick button[aria-pressed="true"] {
  background: var(--grad-brand); color: #fff; border-color: transparent;
  box-shadow: 0 10px 26px -12px rgba(27, 107, 224, .9);
}

.st-result {
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.st-result[hidden] { display: none; }
.st-bar {
  position: relative; height: 12px; border-radius: 999px;
  background: rgba(140, 190, 255, .12);
  overflow: hidden; margin: 16px 0 12px;
}
.st-bar i {
  display: block; height: 100%; border-radius: 999px;
  width: 0; transition: width 1s cubic-bezier(.2,.9,.2,1), background .5s;
}
.st-bar--ok    i { background: linear-gradient(90deg, #16A46B, #22D18A); }
.st-bar--mid   i { background: linear-gradient(90deg, #C77A1E, #FFA94D); }
.st-bar--low   i { background: var(--grad-red); }
.st-verdict__msg {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .92rem; color: var(--txt-2);
}
.st-verdict__msg svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.st-verdict__msg b { color: var(--txt); }
.st-verdict--ok  .st-verdict__msg svg { color: var(--green); }
.st-verdict--mid .st-verdict__msg svg { color: #FFA94D; }
.st-verdict--low .st-verdict__msg svg { color: var(--red-2); }
.st-verdict__pct {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem); letter-spacing: -.04em; line-height: 1;
}
.st-verdict__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ---------- Consejos ---------- */
.st-tips { margin-top: clamp(36px, 5vw, 60px); }
.st-tips-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.st-tip {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  background: var(--grad-surface);
}
.st-tip__ic {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: linear-gradient(150deg, rgba(92, 214, 240, .16), rgba(27, 107, 224, .06));
  color: var(--cyan);
}
.st-tip__ic svg { width: 21px; height: 21px; }
.st-tip h3 { font-size: 1rem; margin-bottom: 9px; }
.st-tip p { font-size: .87rem; color: var(--txt-2); }

/* ---------- Aviso de uso de datos ---------- */
.st-notice {
  display: flex; align-items: flex-start; gap: 13px;
  margin-top: 18px; padding: 15px 18px;
  border: 1px dashed var(--line-2); border-radius: var(--rad);
  background: rgba(8, 14, 28, .5);
  font-size: .8rem; color: var(--txt-3);
}
.st-notice svg { width: 18px; height: 18px; color: var(--cyan); flex: none; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) {
  .st-needle, .st-dot, .st-arc-prog { transition: none; }
  .st-start::after { animation: none; }
}

/* ==========================================================================
   MÓVIL EN HORIZONTAL (o cualquier viewport muy bajo)
   Apilado en columna el velocímetro quedaría diminuto. Se pasa a dos columnas:
   el medidor a la izquierda y métricas + botón a la derecha, recuperando así
   todo el alto para el dibujo.
   ========================================================================== */
@media (max-height: 640px) and (orientation: landscape) {
  .st-head { display: none; }

  .st-console {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 30%, 320px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "steps   steps"
      "stage   metrics"
      "stage   action";
  }
  .st-steps { grid-area: steps; }
  .st-stage { grid-area: stage; min-height: 0; }

  .st-metrics {
    grid-area: metrics;
    grid-template-columns: repeat(2, 1fr);
    border-top: 0;
    border-left: 1px solid var(--line);
    background: transparent;
    align-self: center;
  }
  .st-metric:nth-child(2) { border-right: 0; }
  .st-metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .st-action {
    grid-area: action;
    border-left: 1px solid var(--line);
    align-self: end;
  }
  .st-hint { display: none; }
  .st-gauge { max-width: 100%; }
}

/* ==========================================================================
   PANEL "SOLO PARA CLIENTES"
   Cubre la consola cuando la IP no pertenece a los rangos de JRintercom.
   ========================================================================== */
.st-block {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  padding: clamp(14px, 3vw, 30px);
  background: rgba(3, 6, 14, .82);
  backdrop-filter: blur(10px) saturate(1.2);
  animation: stBlockIn .3s cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
}
.st-block[hidden] { display: none; }
@keyframes stBlockIn { from { opacity: 0; } }

.st-block__card {
  position: relative;
  width: min(100%, 560px);
  padding: clamp(24px, 3.4vw, 38px);
  border: 1px solid rgba(228, 20, 27, .32);
  border-radius: var(--rad-lg);
  background:
    radial-gradient(circle at 50% 0%, rgba(228, 20, 27, .18), transparent 62%),
    linear-gradient(160deg, rgba(26, 32, 52, .95), rgba(6, 10, 20, .97));
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95);
  text-align: center;
  animation: stCardIn .38s cubic-bezier(.2,.8,.2,1);
}
@keyframes stCardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.st-block__close {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  color: var(--txt-3);
  transition: color .2s, background .2s;
}
.st-block__close svg { width: 16px; height: 16px; }
.st-block__close:hover { color: var(--txt); background: rgba(255, 255, 255, .07); }

.st-block__ic {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 62, 68, .34);
  background: radial-gradient(circle, rgba(228, 20, 27, .22), rgba(228, 20, 27, .04));
  color: var(--red-2);
}
.st-block__ic svg { width: 30px; height: 30px; }

.st-block__card h2 { margin-bottom: 14px; text-wrap: balance; }
.st-block__card > p {
  font-size: .92rem; color: var(--txt-2); text-wrap: pretty;
  max-width: 46ch; margin-inline: auto;
}

.st-block__ip {
  margin-top: 18px !important;
  padding: 11px 16px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(3, 6, 14, .6);
  font-size: .82rem !important; color: var(--txt-3) !important;
}
.st-block__ip b { font-family: var(--f-mono); color: var(--cyan); }

.st-block__cta {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 24px;
}

.st-block__note {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 24px !important; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .8rem !important; color: var(--txt-3) !important;
  text-align: left; max-width: none !important;
}
.st-block__note svg { width: 17px; height: 17px; color: var(--cyan); flex: none; margin-top: 2px; }
.st-block__note b { color: var(--txt-2); }
.st-block__note a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }

/* Con la consola en dos columnas el panel igual la cubre entera */
@media (max-height: 640px) and (orientation: landscape) {
  .st-block__card { padding: 18px 22px; }
  .st-block__ic { width: 46px; height: 46px; margin-bottom: 12px; }
  .st-block__ic svg { width: 22px; height: 22px; }
  .st-block__note { display: none; }
  .st-block__ip { margin-top: 12px !important; }
  .st-block__cta { margin-top: 16px; }
}

/* Distintivo de protocolo en el pie técnico */
.st-proto {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(92, 214, 240, .07);
  font-size: .74rem; font-weight: 600;
}
.st-proto[data-v="IPv6"] {
  border-color: rgba(34, 209, 138, .45);
  background: rgba(34, 209, 138, .12);
  color: var(--green);
}
.st-proto[data-v="IPv6"]::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px rgba(34, 209, 138, .9);
}

/* ==========================================================================
   MÓVILES Y TABLETS
   ========================================================================== */
@media (hover: none) {
  /* El :hover queda pegado después de tocar: el botón se quedaría levantado. */
  .st-start:hover { transform: none; }
  .st-start:active { transform: scale(.97); }
}
@media (pointer: coarse) {
  /* Blancos de toque cómodos para arrancar el test y elegir el plan. */
  .st-start { min-height: 54px; }
  .st-plan-pick button { min-height: 44px; }
  .st-block__close { min-width: 44px; min-height: 44px; }
}
/* La barra de gestos del iPhone se come el borde inferior en horizontal. */
.st-hero { padding-bottom: max(clamp(10px, 1.6vh, 22px), env(safe-area-inset-bottom)); }

/* --------------------------------------------------------------------------
   El aviso de "este medidor es solo para clientes", en pantallas bajas
   --------------------------------------------------------------------------
   El panel se centraba con `place-items: center` dentro de un contenedor que
   scrollea. Ese centrado tiene una trampa conocida: cuando la tarjeta es MÁS
   ALTA que el contenedor —lo normal en un teléfono, donde la consola mide unos
   590px y la tarjeta pasaba de 620px— el centrado empuja el borde de arriba
   fuera del área scrolleable y el título queda inalcanzable. Se ve cortado y no
   hay forma de llegar a él.

   Con `margin: auto` el centrado se aplica sólo si sobra lugar; si no sobra,
   los márgenes valen cero, la tarjeta arranca arriba y se puede recorrer
   entera. En escritorio, donde siempre sobra lugar, se ve exactamente igual.
   -------------------------------------------------------------------------- */
.st-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.st-block__card { margin: auto; flex: 0 0 auto; }

/* Y además se compacta, para que en la mayoría de los teléfonos entre sin
   necesidad de scrollear nada. */
@media (max-width: 600px) {
  .st-block { padding: 12px; }
  .st-block__card { padding: 24px 18px 22px; }
  .st-block__ic { width: 50px; height: 50px; margin-bottom: 14px; }
  .st-block__ic svg { width: 24px; height: 24px; }
  .st-block__card h2 { margin-bottom: 10px; }
  .st-block__card > p { font-size: .88rem; }
  .st-block__ip { margin-top: 14px !important; padding: 9px 14px; }
  /* Los dos botones, uno debajo del otro y del mismo ancho. */
  .st-block__cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; }
  .st-block__cta .btn { width: 100%; padding: 13px 16px; font-size: .9rem; line-height: 1.3; }
  .st-block__note { margin-top: 18px !important; padding-top: 16px; font-size: .76rem !important; }
}