/*
  Servidores dedicados — hoja de estilo exclusiva de esta página.
  Checkpoint "humanización": se retiraron la insignia de marca "Raw
  Metal", el plano técnico ilustrado del chasis (a todo el ancho del
  héroe) y las placas remachadas sobre grafito de la ficha técnica —
  ver auditoría de credibilidad visual. El héroe pasa a ser
  tipográfico puro sobre el mismo fondo azul marino que el resto del
  sitio (antes un grafito casi negro propio de esta página), con un
  resumen factual a la derecha en vez de una ilustración, siguiendo
  exactamente el mismo patrón ya aprobado en la portada, Cloud Hosting
  y VPS. La ficha técnica pasa a una lista tipográfica sobre fondo
  blanco. 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 una identidad visual propia para esta página.
  Nota: la copia de esta página está auditada contra
  ../../../CLAIMS-REVIEW.md — no se publican cifras de disponibilidad,
  SLA, redundancia, ubicación de datacenter ni monitorización, por no
  estar verificadas. Tampoco se usan palabras de garantía absoluta
  ("garantía", "cero tolerancia", "cien por cien") para afirmaciones
  de rendimiento o de no interferencia entre cuentas — se mantiene
  únicamente la descripción factual de hardware físico sin
  virtualizar, ya verificada en la copia original de esta página.
*/

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

main {
  min-width: 0;
}

.ded-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;
}

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

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

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

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

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

.ded-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);
}

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

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

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

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

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

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

.ded-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;
}

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

.ded-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 (hardware físico, cPanel opcional,
  Apache/LiteSpeed, soporte por ticket) separados por líneas finas —
  mismo lenguaje que el directorio de producto de la portada, Cloud
  Hosting y VPS.
*/
.ded-hero__col--info {
  border-block-start: 1px solid var(--color-footer-border);
  padding-block-start: var(--space-5);
}

.ded-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;
}

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

.ded-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);
}

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

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

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

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

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

  .ded-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);
  }
}

/* ===== Ficha técnica: lista tipográfica (blanco) ===== */

.ded-pillars {
  padding-block: 2.75rem;
  background: var(--color-surface);
}

.ded-pillars__intro {
  max-width: 64ch;
  color: var(--color-text-muted);
  font-size: 1.125rem;
}

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

.ded-spec-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);
}

.ded-spec-list__item:first-child {
  border-block-start: none;
}

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

.ded-spec-list__desc {
  color: var(--color-text-muted);
}

/* ===== Cargas de trabajo: manifiesto de una sola columna (azul claro, fondo de página) ===== */

.ded-ledger {
  padding-block: 3rem;
}

.ded-ledger__list {
  margin-block-start: var(--space-5);
}

.ded-ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: 3px solid var(--color-heading);
}

.ded-ledger__list > .ded-ledger__row:last-child {
  border-bottom: 3px solid var(--color-heading);
}

.ded-ledger__num {
  color: var(--color-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
  font-weight: 800;
  line-height: 1;
}

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

.ded-ledger__body p {
  margin: 0;
  max-width: 56ch;
  color: var(--color-text-muted);
}

@media (min-width: 560px) {
  .ded-ledger__row {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-4);
  }
}

/* ===== FAQ: lista sin caja con divisores, mismo lenguaje que el acordeón de inicio (blanco) ===== */

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

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

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

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

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

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

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

@media (min-width: 768px) {
  .ded-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.
*/
.ded-faq__cta {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

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

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

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