/*
  Diseño Web — hoja de estilo exclusiva de esta página.
  Checkpoint "humanización": se retiraron el lienzo de composición de
  página del héroe (.dw-canvas — cabecera, bloque principal, mosaico
  de contenido, pie, marcas de recorte y guías de alineación) y la
  composición de reflow responsive (.dw-reflow — tres lienzos
  encadenados de escritorio/tablet/móvil) — ver auditoría de
  credibilidad visual. El héroe pasa a ser tipográfico puro, 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, VPS, Servidores dedicados, Hosting para revendedores,
  Alojamiento web y Certificados SSL. La sección "Un mismo diseño,
  adaptado a cada pantalla" se retiró por completo: su único hecho
  (diseño adaptado a distintos dispositivos) ya está recogido en la
  lista de "Los elementos de una web bien construida", así que
  mantenerla solo como título + una frase sin ilustración habría sido
  relleno. No existe un portafolio real y verificado de proyectos
  ANYSRV en el repositorio, así que la página no incluye una sección
  de portafolio ni proyectos de ejemplo inventados. El resto de la
  página conserva el contenido editorial ya aprobado: flujo de trabajo
  de 4 etapas, listas con divisores, y una alternancia restringida de
  superficies blanco/azul-claro entre secciones. 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: lienzo de composición ===== */

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

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

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

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

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

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

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

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

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

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

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

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

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

.dw-hero__secondary:hover,
.dw-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
  hechos ya verificados (WordPress, HTML a medida, PrestaShop, alcance
  del proyecto, solicitud) 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.
*/
.dw-hero__col--info {
  border-block-start: 1px solid var(--color-footer-border);
  padding-block-start: var(--space-5);
}

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

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

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

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

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

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

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

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

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

/* ===== "Del brief a una web publicada": flujo de trabajo ===== */

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

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

.dw-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: var(--space-6) 0 0 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-border);
}

.dw-rail__stage {
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.dw-rail__stage:first-child {
  border-block-start: none;
}

.dw-rail__num {
  display: block;
  color: var(--color-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  font-size: 1.25rem;
}

.dw-rail__title {
  margin: 0.2rem 0 0.25rem 0;
  color: var(--color-heading);
  font-weight: 800;
  font-size: 1.0625rem;
}

.dw-rail__desc {
  margin: 0;
  max-width: 42ch;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

@media (min-width: 900px) {
  .dw-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block-start: none;
    border-block-end: 1px solid var(--color-border);
  }

  .dw-rail__stage {
    border-block-start: none;
    border-inline-start: 1px solid var(--color-border);
    padding: 0 var(--space-4) var(--space-4);
  }

  .dw-rail__stage:first-child {
    border-inline-start: none;
    padding-inline-start: 0;
  }
}

/* ===== "Los elementos de una web bien construida" ===== */

.dw-needs {
  padding-block: 3.5rem;
}

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

.dw-needs__list {
  margin: var(--space-5) 0 0 0;
  padding: 0;
  list-style: none;
  max-width: 62ch;
}

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

.dw-needs__list li:first-child {
  border-block-start: none;
}

.dw-needs__list strong {
  display: block;
  color: var(--color-heading);
  font-weight: 700;
}

.dw-needs__note {
  margin: var(--space-5) 0 0 0;
  max-width: 64ch;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* ===== "Para qué proyectos trabajamos" ===== */

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

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

.dw-types__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: var(--space-6) 0 0 0;
  border-block-start: 1px solid var(--color-border);
}

.dw-types__item {
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.dw-types__item:first-child {
  border-block-start: none;
}

.dw-types__name {
  margin: 0 0 0.4rem 0;
  color: var(--color-heading);
  font-weight: 800;
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
}

.dw-types__item p:last-child {
  margin: 0;
  max-width: 32ch;
  color: var(--color-text-muted);
  font-size: 1.0625rem;
}

@media (min-width: 760px) {
  .dw-types__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block-start: none;
    border-block-end: 2px solid var(--color-border);
  }

  .dw-types__item {
    border-block-start: none;
    border-inline-start: 1px solid var(--color-border);
    padding: 0 var(--space-5) var(--space-5);
  }

  .dw-types__item:first-child {
    border-inline-start: none;
    padding-inline-start: 0;
  }
}

/* ===== "Tu web necesita dominio, alojamiento y SSL" ===== */

.dw-infra {
  padding-block: 3.5rem;
}

.dw-infra__path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-4) 0;
  color: var(--color-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.9375rem;
}

.dw-infra__path span:not(.dw-infra__arrow) {
  padding: 0.3em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-heading);
}

.dw-infra__arrow {
  opacity: 0.5;
}

.dw-infra__text {
  max-width: 68ch;
  color: var(--color-text-muted);
}

.dw-infra__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-4) 0 0 0;
  padding: 0;
  list-style: none;
}

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

/* ===== "Situaciones habituales al solicitar un proyecto" ===== */

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

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

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

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

.dw-audience__list li:first-child {
  border-block-start: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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