/*
  Diseño específico de la página de inicio. Checkpoint "humanización
  de homepage": se retiró toda la capa de ilustración generada (héroe
  de fondo con nube/brillos/nodos y las nueve miniaturas de tarjeta de
  servicio) — ver auditoría de credibilidad visual. El héroe es ahora
  tipográfico puro sobre el mismo fondo azul marino ya usado como
  superficie de autoridad en el resto del sitio, sin ilustración de
  sustitución. Las tarjetas de servicio son paneles de texto real
  (nombre, descripción, especificaciones ya publicadas y CTA), sin
  imagen; la jerarquía entre "productos principales" y el resto sigue
  viniendo del tamaño tipográfico y el espaciado, no de una
  ilustración. Los nueve servicios enlazan primero a su página de
  servicio local ya existente en anysls.es (alojamiento-web.html,
  cloud-hosting.html, etc.), agrupados en tres bloques de tres por
  tipo de necesidad. "Por qué ANYSRV MG" es una franja compacta de
  hechos (ver CLAIMS-REVIEW.md: sin cifras de clientes, SLA ni
  certificaciones no confirmadas), no cuatro tarjetas con párrafos
  largos.
*/

/*
  ---------- Héroe ----------
  Héroe tipográfico deliberado sobre el mismo fondo azul marino
  (--color-footer, ya medido y verificado sobre anysls.com y usado
  como superficie de autoridad en el resto del sitio), sin ilustración
  de ningún tipo. Checkpoint "sin mitad vacía": en vez de ensanchar
  solo la columna de texto para llenar el hueco que dejó la
  ilustración retirada, el lado derecho del héroe pasa a ser contenido
  real — un índice de texto de los tres productos principales
  (nombre, descriptor factual ya publicado en las tarjetas de abajo,
  enlace directo) — para que el héroe funcione como directorio de
  producto, no como composición decorativa.
*/

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

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

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

.hero__content {
  color: var(--color-on-footer-muted);
}

.hero .eyebrow {
  color: var(--color-on-footer);
}

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

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

@media (min-width: 1024px) {
  .hero__intro {
    font-size: 1.0625rem;
  }
}

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

/*
  ---------- Directorio de producto del héroe ----------
  Texto puro: etiqueta pequeña, lista de tres filas separadas por
  líneas finas (mismo patrón de divisor usado en el resto del sitio),
  cada una con el nombre del producto, su descriptor factual ya
  publicado en la tarjeta correspondiente más abajo, y un enlace
  directo a su página. Sin caja, sin icono, sin fondo propio: vive
  directamente sobre el azul marino del héroe.
*/
.hero__directory-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;
}

.hero__directory-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-footer-border);
}

.hero__directory-item {
  border-block-start: 1px solid var(--color-footer-border);
}

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

.hero__directory-item a {
  display: block;
  padding-block: var(--space-3);
  text-decoration: none;
}

.hero__directory-name {
  display: block;
  color: var(--color-on-footer);
  font-weight: 700;
  font-size: 1.0625rem;
}

.hero__directory-item a:hover .hero__directory-name,
.hero__directory-item a:focus-visible .hero__directory-name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.hero__directory-desc {
  display: block;
  margin-block-start: 2px;
  max-width: 34ch;
  color: var(--color-on-footer-muted);
  font-size: 0.875rem;
}

@media (min-width: 700px) {
  .hero {
    padding-block: 2.75rem 2.25rem;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-block: 3rem 2.5rem;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--space-7);
    align-items: center;
  }
}

@media (min-width: 1360px) {
  .hero {
    padding-block: 3.5rem 2.75rem;
  }

  .hero__content h1 {
    max-width: 22ch;
  }
}

/* ---------- Ritmo general de sección ---------- */

.section {
  padding-block: var(--space-6);
}

.section--surface {
  background: var(--color-surface);
}

.section__intro {
  max-width: 62ch;
  font-size: 1.0625rem;
}

/*
  El encabezado ("h2") hereda de base.css un margen superior pensado
  para un flujo largo de texto. Precedido de una etiqueta ".eyebrow"
  (el patrón habitual en esta página) ese margen se anula: el espacio
  entre ambos lo aporta el margen inferior de ".eyebrow".
*/
.eyebrow + h2 {
  margin-block-start: 0;
}

/*
  ---------- Por qué ANYSRV MG: franja compacta de hechos ----------
  Checkpoint "franja de hechos": la versión anterior (cuatro columnas
  con icono grande, título y frase completa) leía como cuatro tarjetas
  débiles flotando sobre párrafos largos, visualmente desconectadas
  del héroe. Aquí cada hecho es una línea, no un párrafo; el icono es
  pequeño y va en línea con el texto, no encima; en escritorio los
  cuatro hechos comparten una sola fila separada por divisores finos
  (patrón de "barra de datos" compacta), no cuatro cajas sueltas.
*/

.trust-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: var(--space-5) 0 0 0;
}

@media (min-width: 700px) {
  .trust-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
  }
}

@media (min-width: 1024px) {
  .trust-band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .trust-band__item {
    padding-inline-end: var(--space-4);
  }

  .trust-band__item + .trust-band__item {
    padding-inline-start: var(--space-4);
    border-inline-start: 1px solid var(--color-border);
  }
}

.trust-band__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.trust-band__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-background);
  border-radius: 50%;
}

.trust-band__icon img {
  width: 18px;
  height: 18px;
}

.trust-band__title {
  margin: 0 0 2px 0;
  color: var(--color-heading);
  font-weight: 700;
  font-size: 0.9375rem;
}

.trust-band__desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/*
  ---------- Servicios: agrupados por necesidad ----------
  Nueve servicios verificados en tres grupos de tres (infraestructura
  y servidores; hosting y dominios; seguridad y adicionales) en vez de
  una única cuadrícula plana de nueve: reduce la carga de lectura y
  refleja cómo una empresa recorre el catálogo en la práctica. Cada
  grupo mantiene una cuadrícula real de 3 columnas en escritorio (3
  tarjetas exactas, sin huérfanas). La sección usa el fondo azul claro
  del cuerpo de página (sin ".section--surface") para que las tarjetas
  blancas ganen relieve propio en vez de fundirse con un fondo también
  blanco.
*/

.service-group + .service-group {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.service-group__title {
  margin: 0 0 var(--space-3) 0;
  color: var(--color-brand-dark);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0;
}

@media (min-width: 700px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
  }
}

/*
  ---------- Jerarquía comercial de servicios ----------
  Checkpoint "menos cajas repetidas": solo los tres productos
  principales (Cloud Hosting, VPS, servidores dedicados) conservan el
  tratamiento de tarjeta blanca con borde (".product-card"). Los otros
  seis servicios pasan a un tratamiento editorial sin caja —
  tipografía, separadores y alineación — con dos pesos distintos:
    - "Servicios para tu negocio" (alojamiento web, revendedores,
      dominios): ".service-row", fila con divisor, título enlazado,
      descripción, especificaciones en línea y un enlace de texto.
    - "Servicios adicionales" (SSL, diseño web, complementos):
      ".service-compact", la misma idea con menos peso tipográfico y
      la descripción y las especificaciones combinadas en una sola
      línea de párrafo.
  Ningún nivel envuelve el servicio en un rectángulo redondeado.
*/

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

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

.service-row__item:first-child {
  border-block-start: none;
}

.service-row h3 {
  margin: 0 0 var(--space-1) 0;
  font-size: 1.125rem;
}

.service-row h3 a {
  color: var(--color-heading);
  text-decoration: none;
}

.service-row h3 a:hover,
.service-row h3 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.service-row p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1rem;
}

.service-row__specs {
  margin: var(--space-2) 0 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.service-row__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-3);
  color: var(--color-brand-dark);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}

.service-row__link:hover,
.service-row__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

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

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

  .service-row__item:first-child {
    border-inline-start: none;
    padding-inline-start: 0;
  }
}

/*
  ---------- Nivel "servicios adicionales": lista compacta ----------
  La variante con menos peso de las tres: título más pequeño,
  descripción y especificaciones combinadas en un único párrafo, y un
  enlace de texto simple. Sin caja, sin separación en columnas propia
  — comparte el mismo divisor horizontal en todos los anchos.
*/
.service-compact {
  margin: 0;
  border-block-start: 1px solid var(--color-border);
}

.service-compact__item {
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.service-compact__item:first-child {
  border-block-start: none;
}

.service-compact h3 {
  margin: 0 0 2px 0;
  font-size: 1rem;
}

.service-compact h3 a {
  color: var(--color-heading);
  text-decoration: none;
}

.service-compact h3 a:hover,
.service-compact h3 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.service-compact p {
  margin: 0;
  max-width: 68ch;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.service-compact__specs {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.service-compact__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  color: var(--color-brand-dark);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
}

.service-compact__link:hover,
.service-compact__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/*
  ---------- Nivel "productos principales": tarjeta de producto ----------
  Las tres líneas de negocio principales (Cloud Hosting, VPS,
  servidores dedicados) son las únicas que conservan el tratamiento de
  tarjeta blanca con borde, ahora con más aire (más relleno, título
  mayor, botón algo más grande) para que destaquen con claridad sobre
  el resto del catálogo, presentado como filas editoriales. El nombre
  del producto domina; la descripción es una sola frase de apoyo; las
  especificaciones son etiquetas técnicas compactas, no una lista de
  viñetas larga — todas ya publicadas en la página propia de cada
  servicio (nunca inventadas aquí, ver CLAIMS-REVIEW.md). La acción es
  un botón compacto de ancho propio, nunca una franja verde a todo lo
  ancho.
*/
.product-card,
.product-card:link,
.product-card:visited {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(11, 23, 48, 0.06);
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.product-card:hover {
  border-color: var(--color-brand);
  box-shadow: 0 16px 32px rgba(11, 23, 48, 0.16);
  transform: translateY(-3px);
}

/*
  El anillo de foco de teclado accesible (":focus-visible" global, ver
  base.css) se redeclara aquí en vez de heredarse: la sombra ambiental
  de ".product-card" tiene la misma especificidad que la regla global
  y, al cargarse home.css después de base.css, ganaría la cascada y
  ocultaría el anillo de foco si no se repite explícitamente aquí.
*/
.product-card:focus-visible {
  border-color: var(--color-brand);
  box-shadow:
    0 0 0 2px var(--color-focus-separator),
    0 0 0 4px var(--color-focus);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-5);
}

.product-card h3 {
  margin: 0 0 6px 0;
  font-size: 1.4375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.product-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1rem;
}

.product-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  align-content: flex-start;
  margin: var(--space-4) 0 0 0;
  padding: 0;
  list-style: none;
}

.product-card__specs li {
  margin: 0;
  padding: 4px 10px;
  background: var(--color-background);
  border-radius: 5px;
  color: var(--color-brand-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.product-card__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  padding: 11px 20px;
  background-color: var(--color-brand);
  border-radius: 8px;
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.9375rem;
  transition:
    background-color var(--transition-fast),
    gap var(--transition-fast);
}

.product-card:hover .product-card__cta,
.product-card:focus-visible .product-card__cta {
  background-color: var(--color-brand-hover);
  gap: 9px;
}

/*
  ---------- Acción de conversión integrada ----------
  La invitación a hablar con ventas vive dentro del propio bloque de
  contenido de la sección de servicios, con el ancho normal del
  contenedor — nunca como franja aparte a todo lo ancho.
*/

.inline-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 700px) {
  .inline-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
  }

  .inline-cta > div:first-child {
    flex: 1 1 320px;
  }
}

.inline-cta__label {
  margin: 0 0 4px 0;
  color: var(--color-heading);
  font-weight: 700;
  font-size: 1.0625rem;
}

.inline-cta p:last-child {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.inline-cta__actions {
  display: flex;
  flex: none;
}

@media (max-width: 480px) {
  .inline-cta__actions .btn {
    width: 100%;
  }
}

/*
  ---------- Preguntas frecuentes: acordeón nativo ----------
  "<details>/<summary>" nativos, sin JavaScript, con foco de teclado y
  semántica de divulgación accesibles por defecto — sustituye a la
  lista de definiciones larga anterior por un patrón progresivo, más
  cómodo en móvil. Dos columnas en escritorio mediante "column-count"
  (cada elemento con "break-inside: avoid" para que no se divida a
  mitad).
*/

.faq-accordion {
  margin: var(--space-5) 0 0 0;
}

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

.faq-accordion details:first-of-type {
  border-top: none;
  padding-top: 0;
}

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

.faq-accordion summary::-webkit-details-marker {
  color: var(--color-brand);
}

.faq-accordion p {
  margin: var(--space-2) 0 0 0;
  color: var(--color-text-muted);
}

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

@media (min-width: 1024px) {
  .section {
    padding-block: 3.5rem;
  }
}