/*
  Complementos de hosting — hoja de estilo exclusiva de esta página.
  Checkpoint "humanización": se retiró la composición "hosting base +
  módulos" del héroe (.co-system — base con tres módulos IP/AS/WP
  conectados mediante pines discontinuos) y el tratamiento tipo
  ecuación de la sección "Cómo se relacionan" (.co-equation__row —
  píldoras con operadores + / =) — ver auditoría de credibilidad
  visual. El héroe pasa a ser tipográfico puro, con la lista de
  complementos verificados a la derecha en vez de una ilustración,
  siguiendo exactamente el mismo patrón ya aprobado en el resto de
  páginas de servicio rediseñadas. La relación "el complemento amplía
  el hosting, no lo sustituye" queda solo como texto editorial. El
  listado de complementos agrupado por categoría (.co-rail) ya
  presentaba filas divididas sin iconos sintéticos ni tarjetas
  idénticas, así que se conserva sin cambios. Usa únicamente tokens de
  diseño existentes; no se introducen colores de marca nuevos.
*/

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

main {
  min-width: 0;
}

/* ===== Héroe: sistema modular ===== */

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

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

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

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

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

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

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

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

.co-hero__eyebrow {
  color: var(--color-on-footer);
  opacity: 0.8;
}

.co-hero h1 {
  max-width: 20ch;
  color: var(--color-on-footer);
  font-size: clamp(2.125rem, 1.7rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-block-end: var(--space-3);
}

.co-hero__lede {
  max-width: 48ch;
  color: var(--color-on-footer-muted);
  font-size: 1.0625rem;
}

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

.co-hero__secondary {
  color: var(--color-on-footer);
  border-color: var(--color-footer-border);
  background: transparent;
}

.co-hero__secondary:hover,
.co-hero__secondary:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-on-footer);
  border-color: var(--color-on-footer-muted);
}

/*
  ---------- Resumen factual del héroe ----------
  Texto puro sin caja ni fondo propio: etiqueta pequeña y una lista de
  los seis complementos verificados, separados por líneas finas —
  mismo lenguaje que el directorio de producto de la portada y el
  resto de páginas de servicio rediseñadas.
*/
.co-hero__col--info {
  border-block-start: 1px solid var(--color-footer-border);
  padding-block-start: var(--space-5);
}

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

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

.co-hero__info-item {
  padding-block: 0.65rem;
  border-block-start: 1px solid var(--color-footer-border);
}

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

.co-hero__info-name {
  color: var(--color-on-footer);
  font-weight: 700;
  font-size: 1rem;
}

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

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

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

/* ===== "Elige solo lo que necesitas": listado modular (blanco) ===== */

.co-modules {
  padding-block: 3.5rem;
  background: var(--color-surface);
}

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

.co-rail {
  margin: var(--space-6) 0 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.co-rail__group-label {
  margin: 0 0 var(--space-2) 0;
  color: var(--color-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.co-rail__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.co-rail__group .co-rail__item:first-of-type {
  border-block-start: none;
  padding-block-start: 0;
}

.co-rail__mark {
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border: 2px solid var(--color-brand);
  border-radius: 2px;
  margin-block-start: 0.3rem;
}

.co-rail__name {
  margin: 0 0 0.15rem 0;
  color: var(--color-heading);
  font-weight: 700;
  font-size: 1.0625rem;
}

.co-rail__desc {
  margin: 0;
  max-width: 52ch;
  color: var(--color-text-muted);
}

@media (min-width: 760px) {
  .co-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

/* ===== "El complemento amplía tu hosting, no lo sustituye" ===== */

.co-equation {
  padding-block: 3.5rem;
  background: var(--color-surface);
}

.co-equation__text {
  max-width: 68ch;
  margin: var(--space-4) 0 0 0;
  color: var(--color-text-muted);
}

/* ===== "Cuándo añadir cada complemento" ===== */

.co-scenarios {
  padding-block: 3.5rem;
}

.co-scenarios__list {
  margin: var(--space-5) 0 0 0;
  padding: 0;
  list-style: none;
  max-width: 68ch;
}

.co-scenarios__list li {
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.co-scenarios__list li:first-child {
  border-block-start: none;
}

.co-scenarios__list strong {
  color: var(--color-heading);
}

/* ===== "Complementos según tu alojamiento" ===== */

.co-related {
  padding-block: 3.5rem;
  background: var(--color-surface);
}

.co-related__text {
  max-width: 68ch;
  margin: var(--space-5) 0 0 0;
  color: var(--color-text-muted);
  font-size: 1.0625rem;
}

.co-related__links {
  margin: var(--space-4) 0 0 0;
}

.co-related__links a {
  color: var(--color-heading);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ===== FAQ: lista sin caja con divisores + cierre restringido ===== */

.co-faq {
  padding-block: 3.5rem;
}

.co-faq__note {
  max-width: 68ch;
  margin: var(--space-4) 0 var(--space-6) 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.co-faq__note strong {
  color: var(--color-heading);
}

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

.co-faq__list details:first-of-type {
  border-block-start: none;
  padding-block-start: 0;
}

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

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

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

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

.co-faq__cta {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

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

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

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