/* Tecnifum — Bloques de servicio (ventajas, casos de uso, beneficios)
   y credenciales legales. */

.servicios {
  display: grid;
  gap: var(--espacio-4);
  margin-top: var(--espacio-8);
}

.servicio {
  display: grid;
  gap: var(--espacio-8);
  padding: var(--espacio-8);
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}

@media (min-width: 900px) {
  .servicio { grid-template-columns: 1fr 1.5fr; }
}

.servicio__resumen h3 {
  margin-bottom: var(--espacio-3);
  font-size: var(--texto-xl);
}

.servicio__resumen p {
  margin: 0;
  color: var(--texto-secundario);
  font-size: var(--texto-sm);
}

.servicio__detalle {
  display: grid;
  gap: var(--espacio-6);
}

@media (min-width: 620px) {
  .servicio__detalle { grid-template-columns: repeat(3, 1fr); }
}

.servicio__detalle h4 {
  margin-bottom: var(--espacio-3);
  padding-bottom: var(--espacio-2);
  border-bottom: 1px solid var(--borde);
  color: var(--texto-tenue);
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.servicio__detalle ul {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.servicio__detalle li {
  position: relative;
  padding-left: var(--espacio-4);
  color: var(--texto-secundario);
  font-size: var(--texto-sm);
  line-height: 1.45;
}

/* Viñeta propia: un punto en color de marca, no el disco del navegador */
.servicio__detalle li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: var(--radio-completo);
  background-color: var(--marca-medio);
}

/* =========================================================
   CREDENCIALES
   Solo se dibujan cuando el administrador captura los datos.
   ========================================================= */
.credenciales {
  display: grid;
  gap: var(--espacio-4);
  margin: var(--espacio-8) 0 0;
}

@media (min-width: 720px) {
  .credenciales { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .credenciales { grid-template-columns: repeat(3, 1fr); }
}

.credencial {
  padding: var(--espacio-6);
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}

.credencial dt {
  color: var(--texto-tenue);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.credencial dd {
  margin: var(--espacio-2) 0 0;
  color: var(--texto);
  font-weight: var(--peso-medio);
}

.credencial__pdf {
  display: inline-flex;
  margin-top: var(--espacio-3);
  color: var(--marca);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}