/*
  Servidores VPS — hoja de estilo exclusiva de esta página.
  Checkpoint "humanización": se retiró el dial de precisión animado
  del héroe (arco giratorio, resplandor, anillo de unidades de rack) y
  los módulos de hardware montados en placa con pines decorativos —
  ver auditoría de credibilidad visual. El héroe pasa a ser
  tipográfico puro (mismo fondo azul marino plano que el resto del
  sitio), con un resumen factual a la derecha en vez de una
  ilustración, siguiendo exactamente el mismo patrón ya aprobado en la
  portada y en Cloud Hosting. Los recursos (vCPU, RAM, almacenamiento,
  red) y el panel SolusVM pasan a listas tipográficas con divisores.
  El CTA final se integró en el cierre del FAQ en vez de vivir como
  una sección aparte oscura justo antes del CTA del pie. El cuerpo
  alterna blanco/azul-claro por sección, mismos tokens que el resto
  del sitio, sin contenedores con borde nuevos ni una identidad visual
  propia para esta página.
*/

/*
  ---------- Tipografía local de esta página ----------
  "--vps-mono" es la única adición: ningún token de tokens.css cubre
  una fuente monoespaciada, y el pequeño guiño de terminal "root@vps"
  la necesita de verdad, no como decoración. No es un color de marca
  nuevo: es una variante tipográfica de esta página.
*/
:root {
  --vps-mono:
    ui-monospace,
    "SFMono-Regular",
    Menlo,
    Consolas,
    "Liberation Mono",
    monospace;
}

.eyebrow + h2 {
  margin-block-start: 0;
}

main {
  min-width: 0;
}

.vps-quiet-link {
  color: var(--color-on-footer-muted);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(242, 245, 250, 0.4);
  text-underline-offset: 0.2em;
}

.vps-quiet-link:hover,
.vps-quiet-link:focus-visible {
  color: var(--color-on-footer);
  text-decoration-color: currentColor;
}

/* ===== Héroe: producto a la izquierda, resumen factual a la derecha ===== */

.vps-hero {
  padding-block: 2.5rem;
  background: var(--color-footer);
}

.vps-hero :focus-visible {
  box-shadow:
    0 0 0 2px var(--color-focus-separator-on-footer),
    0 0 0 4px var(--color-focus-on-footer);
}

.vps-hero__crumb {
  margin-block-end: var(--space-5);
  font-size: 0.8125rem;
  opacity: 0.75;
}

.vps-hero__crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-on-footer-muted);
}

.vps-hero__crumb li:not(:last-child)::after {
  content: "/";
  margin-inline-start: var(--space-1);
  opacity: 0.6;
}

.vps-hero__crumb a {
  color: var(--color-on-footer-muted);
  text-decoration: none;
}

.vps-hero__crumb a:hover {
  color: var(--color-on-footer);
  text-decoration: underline;
}

.vps-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.vps-hero__grid > * {
  min-width: 0;
}

.vps-hero__eyebrow {
  color: var(--color-on-footer);
  opacity: 0.85;
}

.vps-hero h1 {
  color: var(--color-on-footer);
  font-size: clamp(2.125rem, 1.7rem + 2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 18ch;
}

.vps-hero__lede {
  max-width: 46ch;
  margin-block-start: var(--space-4);
  color: var(--color-on-footer-muted);
  font-size: 1.125rem;
}

.vps-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-block-start: var(--space-5);
}

/*
  ---------- Resumen factual del héroe ----------
  Texto puro sin caja ni fondo propio: etiqueta pequeña y una lista de
  hechos ya verificados (acceso root, SolusVM, Apache/LiteSpeed,
  recursos en exclusiva) separados por líneas finas — mismo lenguaje
  que el directorio de producto de la portada y de Cloud Hosting.
*/
.vps-hero__col--info {
  border-block-start: 1px solid var(--color-footer-border);
  padding-block-start: var(--space-5);
}

.vps-hero__info-label {
  margin: 0 0 var(--space-2) 0;
  color: var(--color-on-footer-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vps-hero__info-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vps-hero__info-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--color-footer-border);
}

.vps-hero__info-item:first-child {
  border-block-start: none;
}

.vps-hero__info-name {
  flex: 0 0 auto;
  min-width: 10rem;
  color: var(--color-on-footer);
  font-weight: 700;
  font-size: 1rem;
}

.vps-hero__info-desc {
  color: var(--color-on-footer-muted);
  font-size: 0.9375rem;
}

/*
  El cursor parpadeante se define aquí porque lo sigue usando el CTA
  integrado del FAQ ("root@vps:~$ _") — un guiño de terminal pequeño y
  restringido, no una pantalla de terminal simulada.
*/
.vps-terminal__cursor {
  display: inline-block;
  color: var(--color-brand);
  animation: vps-blink 1.1s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .vps-terminal__cursor {
    animation: none;
  }
}

@keyframes vps-blink {
  50% {
    opacity: 0;
  }
}

@media (min-width: 960px) {
  .vps-hero {
    padding-block: 3.25rem;
  }

  .vps-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-7);
  }

  .vps-hero__col--info {
    border-block-start: none;
    padding-block-start: 0;
    border-inline-start: 1px solid var(--color-footer-border);
    padding-inline-start: var(--space-6);
  }
}

/* ===== Recursos en exclusiva: lista tipográfica (blanco) ===== */

.vps-rail-section {
  padding-block: 2.75rem;
  background: var(--color-surface);
}

.vps-rail-section__intro {
  max-width: 62ch;
  font-size: 1.125rem;
  color: var(--color-text-muted);
}

.vps-resource-list {
  margin: var(--space-5) 0 0 0;
  padding: 0;
  list-style: none;
  max-width: 52rem;
  border-block-start: 1px solid var(--color-border);
}

.vps-resource-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-block: 0.75rem;
  border-block-start: 1px solid var(--color-border);
}

.vps-resource-list__item:first-child {
  border-block-start: none;
}

.vps-resource-list__name {
  flex: 0 0 auto;
  min-width: 10rem;
  color: var(--color-heading);
  font-weight: 700;
  font-size: 1.0625rem;
}

.vps-resource-list__desc {
  color: var(--color-text-muted);
}

.vps-resource-list__caption {
  margin: var(--space-3) 0 0 0;
  color: var(--color-text-muted);
  font-family: var(--vps-mono);
  font-size: 0.8125rem;
}

/* ===== Panel de gestión: SolusVM (azul claro, fondo de página) ===== */

.vps-manage {
  padding-block: 3rem;
}

.vps-manage__intro {
  max-width: 62ch;
  font-size: 1.125rem;
  color: var(--color-text-muted);
}

/*
  Lista tipográfica con divisores, sin panel simulado: cada fila es un
  hecho ya verificado, lista para convivir más adelante con una
  captura real y sanitizada de SolusVM (ver "REAL ASSET SLOT" en el
  HTML) sin rediseñar la sección.
*/
.vps-tech-list {
  margin: var(--space-5) 0 0 0;
  padding: 0;
  list-style: none;
  max-width: 52rem;
  border-block-start: 1px solid var(--color-border);
}

.vps-tech-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-block: 0.75rem;
  border-block-start: 1px solid var(--color-border);
}

.vps-tech-list__item:first-child {
  border-block-start: none;
}

.vps-tech-list__name {
  flex: 0 0 auto;
  min-width: 10rem;
  color: var(--color-heading);
  font-weight: 700;
  font-size: 1.0625rem;
}

.vps-tech-list__desc {
  color: var(--color-text-muted);
}

/* ===== Para quién es: lista editorial con etiqueta de comentario (blanco) ===== */

.vps-audience {
  padding-block: 3rem;
  background: var(--color-surface);
}

.vps-audience__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-block-start: var(--space-5);
}

.vps-audience__tag {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--color-text-muted);
  font-family: var(--vps-mono);
  font-size: 0.8125rem;
  font-weight: 700;
}

.vps-audience__item h3 {
  margin: 0 0 var(--space-1) 0;
  font-size: 1.3125rem;
}

.vps-audience__item p {
  margin: 0;
  max-width: 42ch;
  color: var(--color-text-muted);
}

@media (min-width: 700px) {
  .vps-audience__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-7);
  }
}

/* ===== FAQ: lista sin caja con divisores, mismo lenguaje que el acordeón de inicio (azul claro, fondo de página) ===== */

.vps-faq {
  padding-block: 3rem;
}

.vps-faq__list {
  margin-block-start: var(--space-4);
}

.vps-faq__list details {
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
  break-inside: avoid;
}

.vps-faq__list details:first-of-type {
  border-top: none;
  padding-top: 0;
}

.vps-faq__list summary {
  color: var(--color-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
}

.vps-faq__list summary::-webkit-details-marker {
  color: var(--color-brand);
}

.vps-faq__list p {
  margin: var(--space-2) 0 0 0;
  max-width: none;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .vps-faq__list {
    column-count: 2;
    column-gap: var(--space-6);
  }
}

/*
  ---------- Cierre del FAQ: CTA integrado ----------
  El CTA comercial vive dentro del propio bloque del FAQ en vez de una
  sección aparte a todo lo ancho justo antes del CTA del pie —
  checkpoint "sin CTA duplicado", mismo patrón ya usado en el resto de
  páginas de servicio rediseñadas. El guiño de terminal "root@vps"
  se conserva aquí, pequeño y contenido, sin convertirse en una
  pantalla de terminal simulada.
*/
.vps-faq__cta {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.vps-faq__cta-label {
  margin: 0;
  color: var(--color-heading);
  font-weight: 700;
  font-size: 1.125rem;
}

.vps-faq__cta-text {
  margin: 0.25rem 0 0 0;
  color: var(--color-text-muted);
}

.vps-faq__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}

.vps-faq__cta-prompt {
  margin: var(--space-4) 0 0 0;
  color: var(--color-text-muted);
  font-family: var(--vps-mono);
  font-size: 0.8125rem;
}