/*
  Cloud Hosting — hoja de estilo exclusiva de esta página.
  Checkpoint "humanización": se retiraron el héroe animado (núcleo con
  pulso, estelas y nodos flotantes), el gráfico de capacidad con
  resplandor y el panel de cPanel/Softaculous fabricado — 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, sin
  degradados de resplandor), con un bloque de texto real a la derecha
  en vez de una ilustración. La sección "Lo que incluye" queda como
  contenido editorial listo para una futura captura real y sanitizada
  de cPanel/Softaculous (ver comentario "REAL ASSET SLOT" en el HTML).
  El CTA final se integró en el cierre del FAQ en vez de vivir como
  una sección aparte, para no repetir el CTA justo antes del pie.
  Checkpoint "refinamiento humano": el ritmo vertical entre secciones
  se ajustó tras retirar los gráficos (el "padding-block" generoso
  pensado para sus ilustraciones ya no tiene sentido sin ellas), y el
  cuerpo alterna blanco/azul-claro por sección en vez de un único
  fondo azul-claro continuo — mismos tokens ya usados en el resto del
  sitio, sin contenedores con borde nuevos.
*/

/*
  Esta hoja no se carga en la página de inicio, así que puede corregir
  aquí, sin tocar home.css, un hueco real de jerarquía: base.css da a
  "h2" un margen superior pensado para texto largo (3rem) que se suma
  al margen inferior propio de ".eyebrow", dejando ~3.5rem de hueco
  muerto entre la etiqueta y el título en las secciones de esta página
  que usan el patrón "eyebrow + h2".
*/
.eyebrow + h2 {
  margin-block-start: 0;
}

/*
  "body" es "display: flex; flex-direction: column" (base.css, patrón
  de pie de página pegado al fondo), lo que convierte a "main" en un
  elemento flexible cuyo "min-width" automático por defecto es el
  min-content de su contenido, no 0 — con un titular grande, una
  palabra suelta puede empujar "main" (y con él la página entera) por
  encima del ancho del viewport en móvil estrecho. ".container" con
  "width: 100%" no protege frente a esto. Confirmado con capturas
  reales a 390px durante esta misma sesión de trabajo.
*/
main {
  min-width: 0;
}

/*
  Enlace de texto discreto: la alternativa a un segundo botón que
  compite con la acción primaria. Se usa en el héroe.
*/
.ch-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

.ch-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: 16ch;
}

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

.ch-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 (cPanel, LiteSpeed, Softaculous, copias de
  seguridad) separados por líneas finas, mismo lenguaje que el
  directorio de producto del héroe de la portada.
*/
.ch-hero__col--info {
  border-block-start: 1px solid var(--color-footer-border);
  padding-block-start: var(--space-5);
}

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

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

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

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

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

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

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

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

  .ch-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 y crecimiento: explicación breve (blanco) ===== */

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

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

/* ===== Lo que incluye: lista editorial (azul claro, fondo de página) ===== */

.ch-stack {
  padding-block: 3rem;
}

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

/*
  Lista tipográfica con divisores, sin caja ni panel simulado: cada
  fila es un hecho ya verificado (nombre + una frase factual), lista
  para convivir más adelante con una captura real y sanitizada de
  cPanel/Softaculous (ver "REAL ASSET SLOT" en el HTML) sin rediseñar
  la sección.
*/
.ch-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);
}

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

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

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

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

/* ===== Para quién es: lista editorial con numeral fantasma (blanco) ===== */

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

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

.ch-audience__index {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--color-border);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

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

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

@media (min-width: 700px) {
  .ch-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) ===== */

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

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

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

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

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

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

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

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

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

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

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

/*
  ---------- Pie de página: solo más compacto en esta página ----------
  El pie (".site-footer" y sus clases hijas) vive en components.css,
  compartido por las once páginas del sitio — no se toca ese archivo.
  Esta hoja, en cambio, solo se carga en cloud-hosting.html, así que
  una regla aquí que reduzca su "padding-block" no puede afectar a
  ninguna otra página aunque use el mismo nombre de clase. No se toca
  ninguna columna, enlace, CTA ni línea legal, solo el espacio
  vertical del nivel de escritorio (>= 768px): components.css ya
  reduce este mismo padding-block para móvil por su cuenta (valores
  ya "ajustados a propósito", ver sus propios comentarios), y esa
  regla de móvil tiene que seguir ganando sin que esta la sobrescriba.
*/
@media (min-width: 768px) {
  .site-footer .footer-cta-row {
    padding-block: var(--space-4) var(--space-3);
  }

  .site-footer .footer-grid-wrap {
    padding-block: var(--space-3);
  }

  .site-footer .footer-bottom {
    padding-block: var(--space-2);
  }
}